From cd2ae030366ff4d4652a91b4c090ab128b8c82a9 Mon Sep 17 00:00:00 2001
From: fxzer <fxzer@users.noreply.github.com>
Date: Mon, 6 Nov 2023 15:54:53 +0000
Subject: [PATCH] [release] Publish on GitHub Pages

---
 .DS_Store                                     |  Bin 0 -> 6148 bytes
 404.html                                      |   27 +
 .../MongoDB\347\254\224\350\256\260.html"     |  485 +++++
 ...\344\273\266\344\270\212\344\274\240.html" |  277 +++
 ...\344\271\240\347\254\224\350\256\260.html" | 1003 ++++++++++
 ...\344\274\240\346\226\207\344\273\266.html" |  175 ++
 ...\344\271\240\347\254\224\350\256\260.html" |  251 +++
 ...\344\271\240\347\254\224\350\256\260.html" |   41 +
 ...\346\200\273\347\273\223\344\270\200.html" |  381 ++++
 ...\346\200\273\347\273\223\344\270\211.html" |  891 +++++++++
 ...\346\200\273\347\273\223\344\272\214.html" |  783 ++++++++
 ...\346\200\273\347\273\223\344\270\200.html" |  466 +++++
 ...\347\220\206\345\255\246\344\271\240.html" |   31 +
 ...\346\274\217\347\254\224\350\256\260.html" |  127 ++
 ...\346\230\276\344\274\230\345\214\226.html" |  367 ++++
 ...\351\231\244\345\244\204\347\220\206.html" |  109 ++
 ...\344\271\240\347\254\224\350\256\260.html" |  265 +++
 ...\344\273\243\347\240\201\346\256\265.html" |  205 ++
 ...\344\271\246\346\221\230\350\246\201.html" |  371 ++++
 ...\347\224\250\346\223\215\344\275\234.html" |  145 ++
 ...\347\253\257\347\276\216\345\214\226.html" |   59 +
 ...4\270\252\345\271\263\345\217\260SSH.html" |   67 +
 .../JavaScript/async\344\270\216await.html"   |  227 +++
 ...\346\224\257\344\274\230\345\214\226.html" |  147 ++
 ...\346\207\222\345\212\240\350\275\275.html" |   81 +
 ...\345\244\215\344\271\240\344\270\200.html" |  143 ++
 ...\345\244\215\344\271\240\344\272\214.html" |  445 +++++
 ...\350\247\201\347\256\227\346\263\225.html" | 1713 +++++++++++++++++
 .../\346\211\213\345\206\231Promise.html"     | 1179 ++++++++++++
 ...\346\215\256\345\216\273\351\207\215.html" |  559 ++++++
 ...\346\261\202\351\233\206\345\220\210.html" |  189 ++
 ...\344\273\266\347\263\273\347\273\237.html" |  201 ++
 ...\350\241\250\350\276\276\345\274\217.html" |  267 +++
 ...\345\275\225\347\273\223\346\236\204.html" |  119 ++
 ...\351\230\266\345\207\275\346\225\260.html" |  323 ++++
 ...\347\275\262\350\204\232\346\234\254.html" |  177 ++
 ...\345\255\246\347\254\224\350\256\260.html" | 1017 ++++++++++
 ...\347\224\250\346\212\200\345\267\247.html" |   83 +
 ...\344\273\266\350\257\246\350\247\243.html" |  295 +++
 GoodTool/index.html                           |   31 +
 ...\347\216\257\346\234\272\345\210\266.html" |   31 +
 ...\346\261\202\350\277\207\347\250\213.html" |   31 +
 ...\346\234\272\347\275\221\347\273\234.html" |   31 +
 ...\351\235\242\350\257\225\351\242\230.html" |  185 ++
 ...\351\235\242\350\257\225\351\242\230.html" |  171 ++
 ...\351\235\242\350\257\225\351\242\230.html" |   31 +
 .../Promise\347\233\270\345\205\263.html"     |  305 +++
 ...\345\216\237\345\236\213\351\223\276.html" |  121 ++
 ...\351\235\242\350\257\225\351\242\230.html" |  407 ++++
 ...\347\224\250\346\226\271\346\263\225.html" |   63 +
 ...\351\235\242\350\257\225\351\242\230.html" |  429 +++++
 ...\351\235\242\350\257\225\351\242\230.html" |  129 ++
 ...\345\274\217\345\216\237\347\220\206.html" |   31 +
 ...\345\237\272\347\241\200\347\257\207.html" |   31 +
 ...\346\230\216\345\221\250\346\234\237.html" |   89 +
 ...\350\277\233\351\230\266\347\257\207.html" |   31 +
 ...\350\241\214\350\277\207\347\250\213.html" |   31 +
 ...\347\233\256\344\274\230\345\214\226.html" |  117 ++
 ...\247\201Path\345\214\272\345\210\253.html" |   65 +
 ...\344\271\211\346\214\207\344\273\244.html" |  127 ++
 Interview/index.html                          |   31 +
 ...\346\256\265\351\233\206\351\224\246.html" | 1211 ++++++++++++
 ...\347\224\250\346\200\273\347\273\223.html" |   55 +
 ...\351\242\230\346\200\273\347\273\223.html" |  249 +++
 ...\347\233\256\350\270\251\345\235\221.html" |  103 +
 ...\345\235\221\350\256\260\345\275\225.html" |  337 ++++
 ...\345\235\221\350\256\260\345\275\225.html" |   35 +
 ...\350\270\251\345\235\221\344\270\200.html" |  435 +++++
 Problem/index.html                            |   31 +
 ...DB\347\254\224\350\256\260.md.eb6021c2.js" |  455 +++++
 ...7\254\224\350\256\260.md.eb6021c2.lean.js" |    1 +
 ...66\344\270\212\344\274\240.md.84c9f765.js" |  247 +++
 ...4\270\212\344\274\240.md.84c9f765.lean.js" |    1 +
 ...40\347\254\224\350\256\260.md.f1b234ff.js" |  973 ++++++++++
 ...7\254\224\350\256\260.md.f1b234ff.lean.js" |    1 +
 ...40\346\226\207\344\273\266.md.faa27b4e.js" |  145 ++
 ...6\226\207\344\273\266.md.faa27b4e.lean.js" |    1 +
 ...40\347\254\224\350\256\260.md.d29feca6.js" |  221 +++
 ...7\254\224\350\256\260.md.d29feca6.lean.js" |    1 +
 ...40\347\254\224\350\256\260.md.9d658cc4.js" |   11 +
 ...7\254\224\350\256\260.md.9d658cc4.lean.js" |    1 +
 ...73\347\273\223\344\270\200.md.25af9886.js" |  351 ++++
 ...7\273\223\344\270\200.md.25af9886.lean.js" |    1 +
 ...73\347\273\223\344\270\211.md.574a1956.js" |  861 +++++++++
 ...7\273\223\344\270\211.md.574a1956.lean.js" |    1 +
 ...73\347\273\223\344\272\214.md.0a8462a7.js" |  753 ++++++++
 ...7\273\223\344\272\214.md.0a8462a7.lean.js" |    1 +
 ...73\347\273\223\344\270\200.md.fc5d41af.js" |  436 +++++
 ...7\273\223\344\270\200.md.fc5d41af.lean.js" |    1 +
 ...06\345\255\246\344\271\240.md.8895a11d.js" |    1 +
 ...5\255\246\344\271\240.md.8895a11d.lean.js" |    1 +
 ...17\347\254\224\350\256\260.md.6422a5f9.js" |   97 +
 ...7\254\224\350\256\260.md.6422a5f9.lean.js" |    1 +
 ...76\344\274\230\345\214\226.md.8805bdc2.js" |  337 ++++
 ...4\274\230\345\214\226.md.8805bdc2.lean.js" |    1 +
 ...44\345\244\204\347\220\206.md.9f59b85b.js" |   79 +
 ...5\244\204\347\220\206.md.9f59b85b.lean.js" |    1 +
 ...40\347\254\224\350\256\260.md.6624dd93.js" |  235 +++
 ...7\254\224\350\256\260.md.6624dd93.lean.js" |    1 +
 ...43\347\240\201\346\256\265.md.083fb786.js" |  175 ++
 ...7\240\201\346\256\265.md.083fb786.lean.js" |    1 +
 ...46\346\221\230\350\246\201.md.3689a434.js" |  341 ++++
 ...6\221\230\350\246\201.md.3689a434.lean.js" |    1 +
 ...50\346\223\215\344\275\234.md.a0e87468.js" |  115 ++
 ...6\223\215\344\275\234.md.a0e87468.lean.js" |    1 +
 ...57\347\276\216\345\214\226.md.6674896b.js" |   29 +
 ...7\276\216\345\214\226.md.6674896b.lean.js" |    1 +
 ...345\271\263\345\217\260SSH.md.49289c60.js" |   37 +
 ...71\263\345\217\260SSH.md.49289c60.lean.js" |    1 +
 ...ipt_async\344\270\216await.md.d21c9cb0.js" |  197 ++
 ...sync\344\270\216await.md.d21c9cb0.lean.js" |    1 +
 ...57\344\274\230\345\214\226.md.e8fda00c.js" |  117 ++
 ...4\274\230\345\214\226.md.e8fda00c.lean.js" |    1 +
 ...22\345\212\240\350\275\275.md.3d5465d0.js" |   51 +
 ...5\212\240\350\275\275.md.3d5465d0.lean.js" |    1 +
 ...15\344\271\240\344\270\200.md.a8906ce7.js" |  113 ++
 ...4\271\240\344\270\200.md.a8906ce7.lean.js" |    1 +
 ...15\344\271\240\344\272\214.md.8f89af07.js" |  415 ++++
 ...4\271\240\344\272\214.md.8f89af07.lean.js" |    1 +
 ...01\347\256\227\346\263\225.md.0cd56de3.js" | 1683 ++++++++++++++++
 ...7\256\227\346\263\225.md.0cd56de3.lean.js" |    1 +
 ...211\213\345\206\231Promise.md.fbddbbf5.js" | 1149 +++++++++++
 ...13\345\206\231Promise.md.fbddbbf5.lean.js" |    1 +
 ...56\345\216\273\351\207\215.md.f1eaba48.js" |  529 +++++
 ...5\216\273\351\207\215.md.f1eaba48.lean.js" |    1 +
 ...02\351\233\206\345\220\210.md.9e71e873.js" |  159 ++
 ...1\233\206\345\220\210.md.9e71e873.lean.js" |    1 +
 ...66\347\263\273\347\273\237.md.1488f287.js" |  171 ++
 ...7\263\273\347\273\237.md.1488f287.lean.js" |    1 +
 ...50\350\276\276\345\274\217.md.a9560fb8.js" |  237 +++
 ...0\276\276\345\274\217.md.a9560fb8.lean.js" |    1 +
 ...25\347\273\223\346\236\204.md.f15b6a8f.js" |   89 +
 ...7\273\223\346\236\204.md.f15b6a8f.lean.js" |    1 +
 ...66\345\207\275\346\225\260.md.f3e81d0b.js" |  293 +++
 ...5\207\275\346\225\260.md.f3e81d0b.lean.js" |    1 +
 ...62\350\204\232\346\234\254.md.7ce896dd.js" |  147 ++
 ...0\204\232\346\234\254.md.7ce896dd.lean.js" |    1 +
 ...46\347\254\224\350\256\260.md.a7be054a.js" |  987 ++++++++++
 ...7\254\224\350\256\260.md.a7be054a.lean.js" |    1 +
 ...50\346\212\200\345\267\247.md.21fda5ca.js" |   53 +
 ...6\212\200\345\267\247.md.21fda5ca.lean.js" |    1 +
 ...66\350\257\246\350\247\243.md.7a55465d.js" |  265 +++
 ...0\257\246\350\247\243.md.7a55465d.lean.js" |    1 +
 assets/GoodTool_index.md.2cde5d0e.js          |    1 +
 assets/GoodTool_index.md.2cde5d0e.lean.js     |    1 +
 ...57\346\234\272\345\210\266.md.9f053692.js" |    1 +
 ...6\234\272\345\210\266.md.9f053692.lean.js" |    1 +
 ...02\350\277\207\347\250\213.md.1acb73dd.js" |    1 +
 ...0\277\207\347\250\213.md.1acb73dd.lean.js" |    1 +
 ...72\347\275\221\347\273\234.md.73c84072.js" |    1 +
 ...7\275\221\347\273\234.md.73c84072.lean.js" |    1 +
 ...42\350\257\225\351\242\230.md.b72bdb12.js" |  155 ++
 ...0\257\225\351\242\230.md.b72bdb12.lean.js" |    1 +
 ...42\350\257\225\351\242\230.md.6b9b42f1.js" |  141 ++
 ...0\257\225\351\242\230.md.6b9b42f1.lean.js" |    1 +
 ...42\350\257\225\351\242\230.md.63a54546.js" |    1 +
 ...0\257\225\351\242\230.md.63a54546.lean.js" |    1 +
 ...se\347\233\270\345\205\263.md.1015a7af.js" |  275 +++
 ...7\233\270\345\205\263.md.1015a7af.lean.js" |    1 +
 ...37\345\236\213\351\223\276.md.4ad216b5.js" |   91 +
 ...5\236\213\351\223\276.md.4ad216b5.lean.js" |    1 +
 ...42\350\257\225\351\242\230.md.0df982a7.js" |  377 ++++
 ...0\257\225\351\242\230.md.0df982a7.lean.js" |    1 +
 ...50\346\226\271\346\263\225.md.4808f793.js" |   33 +
 ...6\226\271\346\263\225.md.4808f793.lean.js" |    1 +
 ...42\350\257\225\351\242\230.md.c89e986d.js" |  399 ++++
 ...0\257\225\351\242\230.md.c89e986d.lean.js" |    1 +
 ...42\350\257\225\351\242\230.md.0abc2056.js" |   99 +
 ...0\257\225\351\242\230.md.0abc2056.lean.js" |    1 +
 ...17\345\216\237\347\220\206.md.2eeac150.js" |    1 +
 ...5\216\237\347\220\206.md.2eeac150.lean.js" |    1 +
 ...72\347\241\200\347\257\207.md.d7fd744f.js" |    1 +
 ...7\241\200\347\257\207.md.d7fd744f.lean.js" |    1 +
 ...16\345\221\250\346\234\237.md.4220f397.js" |   59 +
 ...5\221\250\346\234\237.md.4220f397.lean.js" |    1 +
 ...33\351\230\266\347\257\207.md.786b9622.js" |    1 +
 ...1\230\266\347\257\207.md.786b9622.lean.js" |    1 +
 ...14\350\277\207\347\250\213.md.9da37746.js" |    1 +
 ...0\277\207\347\250\213.md.9da37746.lean.js" |    1 +
 ...56\344\274\230\345\214\226.md.3cd67a0e.js" |   87 +
 ...4\274\230\345\214\226.md.3cd67a0e.lean.js" |    1 +
 ...th\345\214\272\345\210\253.md.56f4fc59.js" |   35 +
 ...5\214\272\345\210\253.md.56f4fc59.lean.js" |    1 +
 ...11\346\214\207\344\273\244.md.3d2ea0a9.js" |   97 +
 ...6\214\207\344\273\244.md.3d2ea0a9.lean.js" |    1 +
 assets/Interview_index.md.ff0a75dc.js         |    1 +
 assets/Interview_index.md.ff0a75dc.lean.js    |    1 +
 ...65\351\233\206\351\224\246.md.3d28f150.js" | 1181 ++++++++++++
 ...1\233\206\351\224\246.md.3d28f150.lean.js" |    1 +
 ...50\346\200\273\347\273\223.md.10b596c9.js" |   25 +
 ...6\200\273\347\273\223.md.10b596c9.lean.js" |    1 +
 ...30\346\200\273\347\273\223.md.fe67d408.js" |  219 +++
 ...6\200\273\347\273\223.md.fe67d408.lean.js" |    1 +
 ...56\350\270\251\345\235\221.md.e3bdda07.js" |   73 +
 ...0\270\251\345\235\221.md.e3bdda07.lean.js" |    1 +
 ...21\350\256\260\345\275\225.md.007e02bc.js" |  307 +++
 ...0\256\260\345\275\225.md.007e02bc.lean.js" |    1 +
 ...21\350\256\260\345\275\225.md.d7553dcf.js" |    5 +
 ...0\256\260\345\275\225.md.d7553dcf.lean.js" |    1 +
 ...51\345\235\221\344\270\200.md.5d32b46a.js" |  405 ++++
 ...5\235\221\344\270\200.md.5d32b46a.lean.js" |    1 +
 assets/Problem_index.md.724652c6.js           |    1 +
 assets/Problem_index.md.724652c6.lean.js      |    1 +
 assets/app.c5d8d5ce.js                        |    1 +
 .../chunks/@localSearchIndexroot.20abec5d.js  |    1 +
 assets/chunks/DemoWrap.1b6e7adf.js            |    1 +
 assets/chunks/VPLocalSearchBox.0bede1e4.js    |    7 +
 assets/chunks/framework.c53372a0.js           |    2 +
 assets/chunks/theme.1e9d2528.js               |    1 +
 assets/index.md.4cc1630f.js                   |    1 +
 assets/index.md.4cc1630f.lean.js              |    1 +
 .../inter-italic-cyrillic-ext.33bd5a8e.woff2  |  Bin 0 -> 28332 bytes
 assets/inter-italic-cyrillic.ea42a392.woff2   |  Bin 0 -> 17824 bytes
 assets/inter-italic-greek-ext.4fbe9427.woff2  |  Bin 0 -> 12188 bytes
 assets/inter-italic-greek.8f4463c4.woff2      |  Bin 0 -> 23264 bytes
 assets/inter-italic-latin-ext.bd8920cc.woff2  |  Bin 0 -> 63552 bytes
 assets/inter-italic-latin.bd3b6f56.woff2      |  Bin 0 -> 46048 bytes
 assets/inter-italic-vietnamese.6ce511fb.woff2 |  Bin 0 -> 8784 bytes
 .../inter-roman-cyrillic-ext.e75737ce.woff2   |  Bin 0 -> 26600 bytes
 assets/inter-roman-cyrillic.5f2c6c8c.woff2    |  Bin 0 -> 16780 bytes
 assets/inter-roman-greek-ext.ab0619bc.woff2   |  Bin 0 -> 11808 bytes
 assets/inter-roman-greek.d5a6d92a.woff2       |  Bin 0 -> 21776 bytes
 assets/inter-roman-latin-ext.0030eebd.woff2   |  Bin 0 -> 59608 bytes
 assets/inter-roman-latin.2ed14f66.woff2       |  Bin 0 -> 42464 bytes
 assets/inter-roman-vietnamese.14ce25a6.woff2  |  Bin 0 -> 8492 bytes
 assets/style.ca30dd5f.css                     |    1 +
 favicon.ico                                   |  Bin 0 -> 4286 bytes
 hashmap.json                                  |    1 +
 index.html                                    |   31 +
 logo.svg                                      |   21 +
 manifest.webmanifest                          |    1 +
 pwa-192x192.png                               |  Bin 0 -> 35142 bytes
 pwa-512x512.png                               |  Bin 0 -> 220652 bytes
 registerSW.js                                 |    1 +
 sitemap.xml                                   |    1 +
 socialIcons.ts                                |    9 +
 sw.js                                         |    1 +
 workbox-fa446783.js                           |    1 +
 238 files changed, 35443 insertions(+)
 create mode 100644 .DS_Store
 create mode 100644 404.html
 create mode 100644 "BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.html"
 create mode 100644 "BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.html"
 create mode 100644 "BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.html"
 create mode 100644 "BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.html"
 create mode 100644 "BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.html"
 create mode 100644 "BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.html"
 create mode 100644 "Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html"
 create mode 100644 "Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.html"
 create mode 100644 "Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.html"
 create mode 100644 "Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html"
 create mode 100644 "Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.html"
 create mode 100644 "Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.html"
 create mode 100644 "Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.html"
 create mode 100644 "Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.html"
 create mode 100644 "FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.html"
 create mode 100644 "FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.html"
 create mode 100644 "FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.html"
 create mode 100644 "FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.html"
 create mode 100644 "FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.html"
 create mode 100644 "FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.html"
 create mode 100644 "FrontEnd/JavaScript/async\344\270\216await.html"
 create mode 100644 "FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.html"
 create mode 100644 "FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html"
 create mode 100644 "FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.html"
 create mode 100644 "FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.html"
 create mode 100644 "FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.html"
 create mode 100644 "FrontEnd/JavaScript/\346\211\213\345\206\231Promise.html"
 create mode 100644 "FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.html"
 create mode 100644 "FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.html"
 create mode 100644 "FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.html"
 create mode 100644 "FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.html"
 create mode 100644 "FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.html"
 create mode 100644 "FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.html"
 create mode 100644 "FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.html"
 create mode 100644 "FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.html"
 create mode 100644 "FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.html"
 create mode 100644 "FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.html"
 create mode 100644 GoodTool/index.html
 create mode 100644 "Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.html"
 create mode 100644 "Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.html"
 create mode 100644 "Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.html"
 create mode 100644 "Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html"
 create mode 100644 "Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html"
 create mode 100644 "Interview/CSS/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html"
 create mode 100644 "Interview/JavaScript/Promise\347\233\270\345\205\263.html"
 create mode 100644 "Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.html"
 create mode 100644 "Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html"
 create mode 100644 "Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.html"
 create mode 100644 "Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html"
 create mode 100644 "Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html"
 create mode 100644 "Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html"
 create mode 100644 "Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.html"
 create mode 100644 "Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.html"
 create mode 100644 "Interview/Vue/Vue\350\277\233\351\230\266\347\257\207.html"
 create mode 100644 "Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.html"
 create mode 100644 "Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.html"
 create mode 100644 "Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.html"
 create mode 100644 "Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
 create mode 100644 Interview/index.html
 create mode 100644 "Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.html"
 create mode 100644 "Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.html"
 create mode 100644 "Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.html"
 create mode 100644 "Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.html"
 create mode 100644 "Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.html"
 create mode 100644 "Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.html"
 create mode 100644 "Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.html"
 create mode 100644 Problem/index.html
 create mode 100644 "assets/BackEnd_NodeJS_MongoDB\347\254\224\350\256\260.md.eb6021c2.js"
 create mode 100644 "assets/BackEnd_NodeJS_MongoDB\347\254\224\350\256\260.md.eb6021c2.lean.js"
 create mode 100644 "assets/BackEnd_NodeJS_Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md.84c9f765.js"
 create mode 100644 "assets/BackEnd_NodeJS_Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md.84c9f765.lean.js"
 create mode 100644 "assets/BackEnd_NodeJS_Node\345\255\246\344\271\240\347\254\224\350\256\260.md.f1b234ff.js"
 create mode 100644 "assets/BackEnd_NodeJS_Node\345\255\246\344\271\240\347\254\224\350\256\260.md.f1b234ff.lean.js"
 create mode 100644 "assets/BackEnd_NodeJS_Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md.faa27b4e.js"
 create mode 100644 "assets/BackEnd_NodeJS_Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md.faa27b4e.lean.js"
 create mode 100644 "assets/BackEnd_Server_Docker\345\255\246\344\271\240\347\254\224\350\256\260.md.d29feca6.js"
 create mode 100644 "assets/BackEnd_Server_Docker\345\255\246\344\271\240\347\254\224\350\256\260.md.d29feca6.lean.js"
 create mode 100644 "assets/BackEnd_Server_Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md.9d658cc4.js"
 create mode 100644 "assets/BackEnd_Server_Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md.9d658cc4.lean.js"
 create mode 100644 "assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.25af9886.js"
 create mode 100644 "assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.25af9886.lean.js"
 create mode 100644 "assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md.574a1956.js"
 create mode 100644 "assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md.574a1956.lean.js"
 create mode 100644 "assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md.0a8462a7.js"
 create mode 100644 "assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md.0a8462a7.lean.js"
 create mode 100644 "assets/Framework_React_React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.fc5d41af.js"
 create mode 100644 "assets/Framework_React_React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.fc5d41af.lean.js"
 create mode 100644 "assets/Framework_Vue_Vite\345\216\237\347\220\206\345\255\246\344\271\240.md.8895a11d.js"
 create mode 100644 "assets/Framework_Vue_Vite\345\216\237\347\220\206\345\255\246\344\271\240.md.8895a11d.lean.js"
 create mode 100644 "assets/Framework_Vue_Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md.6422a5f9.js"
 create mode 100644 "assets/Framework_Vue_Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md.6422a5f9.lean.js"
 create mode 100644 "assets/Framework_Vue_\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md.8805bdc2.js"
 create mode 100644 "assets/Framework_Vue_\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md.8805bdc2.lean.js"
 create mode 100644 "assets/Framework_Vue_\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md.9f59b85b.js"
 create mode 100644 "assets/Framework_Vue_\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md.9f59b85b.lean.js"
 create mode 100644 "assets/FrontEnd_CSS_Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md.6624dd93.js"
 create mode 100644 "assets/FrontEnd_CSS_Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md.6624dd93.lean.js"
 create mode 100644 "assets/FrontEnd_CSS_\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md.083fb786.js"
 create mode 100644 "assets/FrontEnd_CSS_\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md.083fb786.lean.js"
 create mode 100644 "assets/FrontEnd_CSS_\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md.3689a434.js"
 create mode 100644 "assets/FrontEnd_CSS_\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md.3689a434.lean.js"
 create mode 100644 "assets/FrontEnd_Git_Git\345\270\270\347\224\250\346\223\215\344\275\234.md.a0e87468.js"
 create mode 100644 "assets/FrontEnd_Git_Git\345\270\270\347\224\250\346\223\215\344\275\234.md.a0e87468.lean.js"
 create mode 100644 "assets/FrontEnd_Git_Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md.6674896b.js"
 create mode 100644 "assets/FrontEnd_Git_Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md.6674896b.lean.js"
 create mode 100644 "assets/FrontEnd_Git_\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md.49289c60.js"
 create mode 100644 "assets/FrontEnd_Git_\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md.49289c60.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_async\344\270\216await.md.d21c9cb0.js"
 create mode 100644 "assets/FrontEnd_JavaScript_async\344\270\216await.md.d21c9cb0.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md.e8fda00c.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md.e8fda00c.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md.3d5465d0.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md.3d5465d0.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md.a8906ce7.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md.a8906ce7.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md.8f89af07.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md.8f89af07.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\345\270\270\350\247\201\347\256\227\346\263\225.md.0cd56de3.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\345\270\270\350\247\201\347\256\227\346\263\225.md.0cd56de3.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\211\213\345\206\231Promise.md.fbddbbf5.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\211\213\345\206\231Promise.md.fbddbbf5.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\225\260\346\215\256\345\216\273\351\207\215.md.f1eaba48.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\225\260\346\215\256\345\216\273\351\207\215.md.f1eaba48.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md.9e71e873.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md.9e71e873.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\226\207\344\273\266\347\263\273\347\273\237.md.1488f287.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\226\207\344\273\266\347\263\273\347\273\237.md.1488f287.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md.a9560fb8.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md.a9560fb8.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md.f15b6a8f.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md.f15b6a8f.lean.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\351\253\230\351\230\266\345\207\275\346\225\260.md.f3e81d0b.js"
 create mode 100644 "assets/FrontEnd_JavaScript_\351\253\230\351\230\266\345\207\275\346\225\260.md.f3e81d0b.lean.js"
 create mode 100644 "assets/FrontEnd_Shell_\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md.7ce896dd.js"
 create mode 100644 "assets/FrontEnd_Shell_\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md.7ce896dd.lean.js"
 create mode 100644 "assets/FrontEnd_TypeScript_\345\210\235\345\255\246\347\254\224\350\256\260.md.a7be054a.js"
 create mode 100644 "assets/FrontEnd_TypeScript_\345\210\235\345\255\246\347\254\224\350\256\260.md.a7be054a.lean.js"
 create mode 100644 "assets/FrontEnd_TypeScript_\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md.21fda5ca.js"
 create mode 100644 "assets/FrontEnd_TypeScript_\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md.21fda5ca.lean.js"
 create mode 100644 "assets/FrontEnd_TypeScript_\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md.7a55465d.js"
 create mode 100644 "assets/FrontEnd_TypeScript_\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md.7a55465d.lean.js"
 create mode 100644 assets/GoodTool_index.md.2cde5d0e.js
 create mode 100644 assets/GoodTool_index.md.2cde5d0e.lean.js
 create mode 100644 "assets/Interview_Brower_\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md.9f053692.js"
 create mode 100644 "assets/Interview_Brower_\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md.9f053692.lean.js"
 create mode 100644 "assets/Interview_Brower_\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md.1acb73dd.js"
 create mode 100644 "assets/Interview_Brower_\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md.1acb73dd.lean.js"
 create mode 100644 "assets/Interview_Brower_\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md.73c84072.js"
 create mode 100644 "assets/Interview_Brower_\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md.73c84072.lean.js"
 create mode 100644 "assets/Interview_CSS_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.b72bdb12.js"
 create mode 100644 "assets/Interview_CSS_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.b72bdb12.lean.js"
 create mode 100644 "assets/Interview_CSS_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.6b9b42f1.js"
 create mode 100644 "assets/Interview_CSS_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.6b9b42f1.lean.js"
 create mode 100644 "assets/Interview_CSS_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.63a54546.js"
 create mode 100644 "assets/Interview_CSS_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.63a54546.lean.js"
 create mode 100644 "assets/Interview_JavaScript_Promise\347\233\270\345\205\263.md.1015a7af.js"
 create mode 100644 "assets/Interview_JavaScript_Promise\347\233\270\345\205\263.md.1015a7af.lean.js"
 create mode 100644 "assets/Interview_JavaScript_\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md.4ad216b5.js"
 create mode 100644 "assets/Interview_JavaScript_\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md.4ad216b5.lean.js"
 create mode 100644 "assets/Interview_JavaScript_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.0df982a7.js"
 create mode 100644 "assets/Interview_JavaScript_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.0df982a7.lean.js"
 create mode 100644 "assets/Interview_JavaScript_\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md.4808f793.js"
 create mode 100644 "assets/Interview_JavaScript_\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md.4808f793.lean.js"
 create mode 100644 "assets/Interview_JavaScript_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.c89e986d.js"
 create mode 100644 "assets/Interview_JavaScript_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.c89e986d.lean.js"
 create mode 100644 "assets/Interview_JavaScript_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.0abc2056.js"
 create mode 100644 "assets/Interview_JavaScript_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.0abc2056.lean.js"
 create mode 100644 "assets/Interview_Vue_Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md.2eeac150.js"
 create mode 100644 "assets/Interview_Vue_Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md.2eeac150.lean.js"
 create mode 100644 "assets/Interview_Vue_Vue\345\237\272\347\241\200\347\257\207.md.d7fd744f.js"
 create mode 100644 "assets/Interview_Vue_Vue\345\237\272\347\241\200\347\257\207.md.d7fd744f.lean.js"
 create mode 100644 "assets/Interview_Vue_Vue\345\243\260\346\230\216\345\221\250\346\234\237.md.4220f397.js"
 create mode 100644 "assets/Interview_Vue_Vue\345\243\260\346\230\216\345\221\250\346\234\237.md.4220f397.lean.js"
 create mode 100644 "assets/Interview_Vue_Vue\350\277\233\351\230\266\347\257\207.md.786b9622.js"
 create mode 100644 "assets/Interview_Vue_Vue\350\277\233\351\230\266\347\257\207.md.786b9622.lean.js"
 create mode 100644 "assets/Interview_Vue_npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md.9da37746.js"
 create mode 100644 "assets/Interview_Vue_npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md.9da37746.lean.js"
 create mode 100644 "assets/Interview_Vue_\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md.3cd67a0e.js"
 create mode 100644 "assets/Interview_Vue_\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md.3cd67a0e.lean.js"
 create mode 100644 "assets/Interview_Vue_\345\270\270\350\247\201Path\345\214\272\345\210\253.md.56f4fc59.js"
 create mode 100644 "assets/Interview_Vue_\345\270\270\350\247\201Path\345\214\272\345\210\253.md.56f4fc59.lean.js"
 create mode 100644 "assets/Interview_Vue_\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md.3d2ea0a9.js"
 create mode 100644 "assets/Interview_Vue_\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md.3d2ea0a9.lean.js"
 create mode 100644 assets/Interview_index.md.ff0a75dc.js
 create mode 100644 assets/Interview_index.md.ff0a75dc.lean.js
 create mode 100644 "assets/Problem_Graphical_Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md.3d28f150.js"
 create mode 100644 "assets/Problem_Graphical_Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md.3d28f150.lean.js"
 create mode 100644 "assets/Problem_Graphical_Antv\344\275\277\347\224\250\346\200\273\347\273\223.md.10b596c9.js"
 create mode 100644 "assets/Problem_Graphical_Antv\344\275\277\347\224\250\346\200\273\347\273\223.md.10b596c9.lean.js"
 create mode 100644 "assets/Problem_Graphical_Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md.fe67d408.js"
 create mode 100644 "assets/Problem_Graphical_Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md.fe67d408.lean.js"
 create mode 100644 "assets/Problem_Nuxt3_Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md.e3bdda07.js"
 create mode 100644 "assets/Problem_Nuxt3_Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md.e3bdda07.lean.js"
 create mode 100644 "assets/Problem_VitePress_VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md.007e02bc.js"
 create mode 100644 "assets/Problem_VitePress_VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md.007e02bc.lean.js"
 create mode 100644 "assets/Problem_VitePress_VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md.d7553dcf.js"
 create mode 100644 "assets/Problem_VitePress_VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md.d7553dcf.lean.js"
 create mode 100644 "assets/Problem_VueProject_Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md.5d32b46a.js"
 create mode 100644 "assets/Problem_VueProject_Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md.5d32b46a.lean.js"
 create mode 100644 assets/Problem_index.md.724652c6.js
 create mode 100644 assets/Problem_index.md.724652c6.lean.js
 create mode 100644 assets/app.c5d8d5ce.js
 create mode 100644 assets/chunks/@localSearchIndexroot.20abec5d.js
 create mode 100644 assets/chunks/DemoWrap.1b6e7adf.js
 create mode 100644 assets/chunks/VPLocalSearchBox.0bede1e4.js
 create mode 100644 assets/chunks/framework.c53372a0.js
 create mode 100644 assets/chunks/theme.1e9d2528.js
 create mode 100644 assets/index.md.4cc1630f.js
 create mode 100644 assets/index.md.4cc1630f.lean.js
 create mode 100644 assets/inter-italic-cyrillic-ext.33bd5a8e.woff2
 create mode 100644 assets/inter-italic-cyrillic.ea42a392.woff2
 create mode 100644 assets/inter-italic-greek-ext.4fbe9427.woff2
 create mode 100644 assets/inter-italic-greek.8f4463c4.woff2
 create mode 100644 assets/inter-italic-latin-ext.bd8920cc.woff2
 create mode 100644 assets/inter-italic-latin.bd3b6f56.woff2
 create mode 100644 assets/inter-italic-vietnamese.6ce511fb.woff2
 create mode 100644 assets/inter-roman-cyrillic-ext.e75737ce.woff2
 create mode 100644 assets/inter-roman-cyrillic.5f2c6c8c.woff2
 create mode 100644 assets/inter-roman-greek-ext.ab0619bc.woff2
 create mode 100644 assets/inter-roman-greek.d5a6d92a.woff2
 create mode 100644 assets/inter-roman-latin-ext.0030eebd.woff2
 create mode 100644 assets/inter-roman-latin.2ed14f66.woff2
 create mode 100644 assets/inter-roman-vietnamese.14ce25a6.woff2
 create mode 100644 assets/style.ca30dd5f.css
 create mode 100644 favicon.ico
 create mode 100644 hashmap.json
 create mode 100644 index.html
 create mode 100644 logo.svg
 create mode 100644 manifest.webmanifest
 create mode 100644 pwa-192x192.png
 create mode 100644 pwa-512x512.png
 create mode 100644 registerSW.js
 create mode 100644 sitemap.xml
 create mode 100644 socialIcons.ts
 create mode 100644 sw.js
 create mode 100644 workbox-fa446783.js

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..b016fdeaa022a65ad32ad7e0a3134cdd8c0e50e6
GIT binary patch
literal 6148
zcmeHK%SyvQ6g{I|1l)A#GGAcu4?>AM5vAzb)W%||ZAcqXSNU|$y?1<s#%(Eb2WHNF
z&&(;E$p8qGc76$r0VM2#L4<)O=0Vp<3>FMp;{r9-Sk$}O^+2IxG|Ac%tgyj?{nz^2
z?XIEk4pY2iiybPwBEtitR%j_#v}Pz!(pOTtr(U5^>oYBDykSZEEp1Z0p-n27zGUnZ
zGes*^df`}U#SJB?{h{^d%r^Z;s=0z0*C9FCA3L~-JJ{RZG5!p`CTGAIa0Z-#12Vun
zTUv5v=%X{>3^)Vd49NMAvJ2)BJ3~D>IOr3AIHFk_WqC_TP8u<f*csBp7A%!$sUbcw
zf~C`*#<)CUXK3jNIy39UnZF({L1(8u)o_H|&_`#$8R#=`YU)_-|117w1|RwT6xW;q
zXW*YP5Jttcm~d0^Zr$6S+_fqDBfB(->qKCq-1`WiBIn4tI?bPo%(y&aXDC&~uIWVo
N5KuyVa0U**z$Yr+JdFSV

literal 0
HcmV?d00001

diff --git a/404.html b/404.html
new file mode 100644
index 00000000..6cb760f8
--- /dev/null
+++ b/404.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>404 | ZerDocs</title>
+    <meta name="description" content="Not Found">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav fixed reached-top" data-v-5a346dfe data-v-79c8c1df><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><!----><div class="VPContent" id="VPContent" data-v-5a346dfe data-v-669faec9><!--[--><div class="NotFound" data-v-669faec9 data-v-f87ff6e4><p class="code" data-v-f87ff6e4>404</p><h1 class="title" data-v-f87ff6e4>PAGE NOT FOUND</h1><div class="divider" data-v-f87ff6e4></div><blockquote class="quote" data-v-f87ff6e4>But if you don&#39;t change your direction, and if you keep looking, you may end up where you are heading.</blockquote><div class="action" data-v-f87ff6e4><a class="link" href="/zerdocs/" aria-label="go to home" data-v-f87ff6e4>Take me home</a></div></div><!--]--></div><footer class="VPFooter" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.html" "b/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.html"
new file mode 100644
index 00000000..65a30a19
--- /dev/null
+++ "b/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.html"
@@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/BackEnd_NodeJS_MongoDB笔记.md.eb6021c2.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>NodeJS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/MongoDB%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>MongoDB笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node大文件上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node简单上传文件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Server</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Docker学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nginx学习笔记</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_BackEnd_NodeJS_MongoDB%E7%AC%94%E8%AE%B0" data-v-6b87e69f><div><h2 id="一、相关概念" tabindex="-1">一、相关概念 <a class="header-anchor" href="#一、相关概念" aria-label="Permalink to &quot;一、相关概念&quot;">​</a></h2><p><strong>MongoDB是文档型的NoSQL数据库</strong>。</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220508194905648.png" alt="image-20220508194905648"></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507220553150.png" alt="image-20220507220553150"></p><p><strong>优点</strong>：</p><ol><li><p>高性能</p></li><li><p>高可用性</p></li><li><p>可扩展分片集群</p></li></ol><p><strong>应用场景</strong>：（数据量大、读写操作频繁、对事务要求不高）</p><h2 id="二、数据库操作" tabindex="-1">二、数据库操作 <a class="header-anchor" href="#二、数据库操作" aria-label="Permalink to &quot;二、数据库操作&quot;">​</a></h2><p><strong>查看所有数据库</strong></p><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">show</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">databases</span></span>
+<span class="line"><span style="color:#80A665;">show</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">dbs</span></span>
+<span class="line"><span style="color:#758575DD;">#连接数据库后默认在test库</span></span>
+<span class="line"><span style="color:#80A665;">use</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">testdb01</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#切换数据库</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">show</span><span style="color:#393A34;"> </span><span style="color:#B56959;">databases</span></span>
+<span class="line"><span style="color:#59873A;">show</span><span style="color:#393A34;"> </span><span style="color:#B56959;">dbs</span></span>
+<span class="line"><span style="color:#A0ADA0;">#连接数据库后默认在test库</span></span>
+<span class="line"><span style="color:#59873A;">use</span><span style="color:#393A34;"> </span><span style="color:#B56959;">testdb01</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#切换数据库</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507215028603.png" alt="image-20220507215028603"></p><p><strong>创建/删除数据库</strong></p><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">use</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">数据库名</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;"># use testdb01</span></span>
+<span class="line"><span style="color:#80A665;">db</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#查看所在数据库</span></span>
+<span class="line"><span style="color:#80A665;">db.dropDatabase</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> 	#删除当前所在库</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">use</span><span style="color:#393A34;"> </span><span style="color:#B56959;">数据库名</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;"># use testdb01</span></span>
+<span class="line"><span style="color:#59873A;">db</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#查看所在数据库</span></span>
+<span class="line"><span style="color:#59873A;">db.dropDatabase</span><span style="color:#999999;">()</span><span style="color:#393A34;"> 	#删除当前所在库</span></span></code></pre></div><h2 id="三、集合相关操作" tabindex="-1">三、集合相关操作 <a class="header-anchor" href="#三、集合相关操作" aria-label="Permalink to &quot;三、集合相关操作&quot;">​</a></h2><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">show</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">collections</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;"># 查看数据库集合	show tables;</span></span>
+<span class="line"><span style="color:#80A665;">db.createCollection(</span><span style="color:#80A665;">&#39;collectionName&#39;</span><span style="color:#80A665;">,[option]</span><span style="color:#DBD7CAEE;">)</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">	 </span><span style="color:#758575DD;">#显式创建集合</span></span>
+<span class="line"><span style="color:#80A665;">db.users.insert(</span><span style="color:#DBD7CAEE;">{&#39;</span><span style="color:#80A665;">name</span><span style="color:#80A665;">&#39;:&#39;</span><span style="color:#80A665;">李四</span><span style="color:#80A665;">&#39;}); 	#隐式创建集合 往不存在的集合插入数据</span></span>
+<span class="line"><span style="color:#80A665;">db.users.drop(); 	#删除集合</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">show</span><span style="color:#393A34;"> </span><span style="color:#B56959;">collections</span><span style="color:#999999;">;</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;"># 查看数据库集合	show tables;</span></span>
+<span class="line"><span style="color:#59873A;">db.createCollection(</span><span style="color:#59873A;">&#39;collectionName&#39;</span><span style="color:#59873A;">,[option]</span><span style="color:#393A34;">)</span><span style="color:#999999;">;</span><span style="color:#393A34;">	 </span><span style="color:#A0ADA0;">#显式创建集合</span></span>
+<span class="line"><span style="color:#59873A;">db.users.insert(</span><span style="color:#393A34;">{&#39;</span><span style="color:#59873A;">name</span><span style="color:#59873A;">&#39;:&#39;</span><span style="color:#59873A;">李四</span><span style="color:#59873A;">&#39;}); 	#隐式创建集合 往不存在的集合插入数据</span></span>
+<span class="line"><span style="color:#59873A;">db.users.drop(); 	#删除集合</span></span></code></pre></div><h2 id="四、文档相关操作" tabindex="-1">四、文档相关操作 <a class="header-anchor" href="#四、文档相关操作" aria-label="Permalink to &quot;四、文档相关操作&quot;">​</a></h2><h3 id="_1-查询" tabindex="-1">1.查询 <a class="header-anchor" href="#_1-查询" aria-label="Permalink to &quot;1.查询&quot;">​</a></h3><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> 	#查询所有 SELECT * from users  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">db.getCollection</span><span style="color:#666666;">(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#666666;">)</span><span style="color:#80A665;">.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">	#查询所有</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">db.getCollection</span><span style="color:#666666;">(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#666666;">)</span><span style="color:#80A665;">.findOne</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">	#查询第一个</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">db.getCollection</span><span style="color:#666666;">(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">.findOne</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{name:&#39;zhang3&#39;})		#查询符合条件的第一个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#SELECT _id,name,age from users </span></span>
+<span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">name:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">_id:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> ) 	</span><span style="color:#758575DD;">#去除id字段</span></span>
+<span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> ) 	</span><span style="color:#758575DD;">#去除特定字段</span></span>
+<span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#80A665;">.pretty</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> 	#格式化查询</span><span style="color:#666666;">(</span><span style="color:#80A665;">适用于长/复杂数据</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#393A34;"> 	#查询所有 SELECT * from users  </span></span>
+<span class="line"><span style="color:#393A34;">db.getCollection</span><span style="color:#999999;">(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#999999;">)</span><span style="color:#59873A;">.find</span><span style="color:#999999;">()</span><span style="color:#393A34;">	#查询所有</span></span>
+<span class="line"><span style="color:#393A34;">db.getCollection</span><span style="color:#999999;">(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#999999;">)</span><span style="color:#59873A;">.findOne</span><span style="color:#999999;">()</span><span style="color:#393A34;">	#查询第一个</span></span>
+<span class="line"><span style="color:#393A34;">db.getCollection</span><span style="color:#999999;">(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">.findOne</span><span style="color:#999999;">(</span><span style="color:#393A34;">{name:&#39;zhang3&#39;})		#查询符合条件的第一个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#SELECT _id,name,age from users </span></span>
+<span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;">  </span><span style="color:#B56959;">name:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">_id:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> ) 	</span><span style="color:#A0ADA0;">#去除id字段</span></span>
+<span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> ) 	</span><span style="color:#A0ADA0;">#去除特定字段</span></span>
+<span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#59873A;">.pretty</span><span style="color:#999999;">()</span><span style="color:#393A34;"> 	#格式化查询</span><span style="color:#999999;">(</span><span style="color:#59873A;">适用于长/复杂数据</span><span style="color:#999999;">)</span></span></code></pre></div><ul><li><strong>等值查询</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:18}</span><span style="color:#DBD7CAEE;"> )</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE age = 18</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:18}</span><span style="color:#393A34;"> )</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE age = 18</span></span></code></pre></div><ul><li><strong>AND条件</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$lt</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">,sex:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">男</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">,}</span><span style="color:#DBD7CAEE;"> )</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE sex = &quot;男&quot; AND age &lt; 30</span></span>
+<span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:24,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$lt</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> )  </span><span style="color:#758575DD;">#相同字段and查询中出现多次,以最后一个为查询条件</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE age &lt; 30</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$lt</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">,sex:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">男</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">,}</span><span style="color:#393A34;"> )</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE sex = &quot;男&quot; AND age &lt; 30</span></span>
+<span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:24,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$lt</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> )  </span><span style="color:#A0ADA0;">#相同字段and查询中出现多次,以最后一个为查询条件</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE age &lt; 30</span></span></code></pre></div><ul><li><strong>OR条件</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$or</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> [{</span><span style="color:#80A665;">sex:</span><span style="color:#80A665;">&#39;男&#39;</span><span style="color:#80A665;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$lt</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> )</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE sex = &quot;男&quot; OR age &lt; 30</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$or</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> [{</span><span style="color:#59873A;">sex:</span><span style="color:#59873A;">&#39;男&#39;</span><span style="color:#59873A;">},</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$lt</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">]</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> )</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE sex = &quot;男&quot; OR age &lt; 30</span></span></code></pre></div><ul><li><strong>同时使用AND和OR条件</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">like:</span><span style="color:#80A665;">&#39;美女&#39;</span><span style="color:#80A665;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">$or</span><span style="color:#DBD7CAEE;">: [{</span><span style="color:#80A665;">sex:</span><span style="color:#80A665;">&#39;男&#39;</span><span style="color:#80A665;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$lt</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">},{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/^p/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">]</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> )</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE like = &quot;美女&quot; AND (sex = &quot;男&quot; OR age &lt; 30 OR name LIKE &quot;%p%&quot;)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#59873A;">like:</span><span style="color:#59873A;">&#39;美女&#39;</span><span style="color:#59873A;">},</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">$or</span><span style="color:#393A34;">: [{</span><span style="color:#59873A;">sex:</span><span style="color:#59873A;">&#39;男&#39;</span><span style="color:#59873A;">},</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$lt</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">},{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/^p/</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">]</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span><span style="color:#393A34;"> )</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE like = &quot;美女&quot; AND (sex = &quot;男&quot; OR age &lt; 30 OR name LIKE &quot;%p%&quot;)</span></span></code></pre></div><ul><li><strong>查询条件中使用查询操作符</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$in</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> [ </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">20</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">22</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> )</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$in</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> [ </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">20</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">22</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B56959;">]</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> )</span></span></code></pre></div><ul><li><strong>模糊查询</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name:/张/}</span><span style="color:#DBD7CAEE;"> ) </span><span style="color:#758575DD;">#查询名字中含有&#39;张&#39;的所有</span></span>
+<span class="line"><span style="color:#758575DD;"># WHERE name LIKE &quot;%张%</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name:/张/}</span><span style="color:#393A34;"> ) </span><span style="color:#A0ADA0;">#查询名字中含有&#39;张&#39;的所有</span></span>
+<span class="line"><span style="color:#A0ADA0;"># WHERE name LIKE &quot;%张%</span></span></code></pre></div><ul><li><strong>数组中的查询</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(likes:</span><span style="color:#DBD7CAEE;">{</span><span style="color:#BD976A;">$size</span><span style="color:#DBD7CAEE;">:3})	</span><span style="color:#758575DD;">#查询&#39;喜好&#39;数组大小为3</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(likes:</span><span style="color:#393A34;">{</span><span style="color:#B07D48;">$size</span><span style="color:#393A34;">:3})	</span><span style="color:#A0ADA0;">#查询&#39;喜好&#39;数组大小为3</span></span></code></pre></div><ul><li><strong>排序</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">.sort</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{age:-1}) # 1 升序 	-1 降序 (没有这个字段的数据排在前面)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#393A34;">.sort</span><span style="color:#999999;">(</span><span style="color:#393A34;">{age:-1}) # 1 升序 	-1 降序 (没有这个字段的数据排在前面)</span></span></code></pre></div><ul><li><strong>分页</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">.skip</span><span style="color:#666666;">(</span><span style="color:#80A665;">40</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">.limit</span><span style="color:#666666;">(</span><span style="color:#80A665;">30</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;"># 跳过40条数据查30条数据 (起始0,则从40开始)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#393A34;">.skip</span><span style="color:#999999;">(</span><span style="color:#59873A;">40</span><span style="color:#999999;">)</span><span style="color:#393A34;">.limit</span><span style="color:#999999;">(</span><span style="color:#59873A;">30</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;"># 跳过40条数据查30条数据 (起始0,则从40开始)</span></span></code></pre></div><ul><li><strong>条数</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#80A665;">.count</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#59873A;">.count</span><span style="color:#999999;">()</span></span></code></pre></div><ul><li><strong>去重</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">.distinct</span><span style="color:#666666;">(</span><span style="color:#80A665;">&#39;字段&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#393A34;">.distinct</span><span style="color:#999999;">(</span><span style="color:#59873A;">&#39;字段&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><ul><li><strong>对比语法:</strong></li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507231641824.png" alt="image-20220507231641824"></p><h3 id="_2-插入" tabindex="-1">2.插入 <a class="header-anchor" href="#_2-插入" aria-label="Permalink to &quot;2.插入&quot;">​</a></h3><ul><li><strong>单条文档</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.insert(</span><span style="color:#DBD7CAEE;">{&#39;</span><span style="color:#80A665;">name</span><span style="color:#80A665;">&#39;:&#39;</span><span style="color:#80A665;">李四</span><span style="color:#80A665;">&#39;,age:18,sex:&#39;</span><span style="color:#80A665;">男</span><span style="color:#80A665;">&#39;});  # 提示已弃用</span></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(&#39;</span><span style="color:#80A665;">users</span><span style="color:#80A665;">&#39;).insert({&#39;</span><span style="color:#80A665;">name</span><span style="color:#80A665;">&#39;:&#39;</span><span style="color:#80A665;">李四</span><span style="color:#80A665;">&#39;,age:18,sex:&#39;</span><span style="color:#80A665;">男</span><span style="color:#80A665;">&#39;})</span></span>
+<span class="line"><span style="color:#80A665;">db.users.insertOne({&#39;</span><span style="color:#80A665;">name</span><span style="color:#80A665;">&#39;:&#39;</span><span style="color:#80A665;">赵六</span><span style="color:#80A665;">&#39;})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.insert(</span><span style="color:#393A34;">{&#39;</span><span style="color:#59873A;">name</span><span style="color:#59873A;">&#39;:&#39;</span><span style="color:#59873A;">李四</span><span style="color:#59873A;">&#39;,age:18,sex:&#39;</span><span style="color:#59873A;">男</span><span style="color:#59873A;">&#39;});  # 提示已弃用</span></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(&#39;</span><span style="color:#59873A;">users</span><span style="color:#59873A;">&#39;).insert({&#39;</span><span style="color:#59873A;">name</span><span style="color:#59873A;">&#39;:&#39;</span><span style="color:#59873A;">李四</span><span style="color:#59873A;">&#39;,age:18,sex:&#39;</span><span style="color:#59873A;">男</span><span style="color:#59873A;">&#39;})</span></span>
+<span class="line"><span style="color:#59873A;">db.users.insertOne({&#39;</span><span style="color:#59873A;">name</span><span style="color:#59873A;">&#39;:&#39;</span><span style="color:#59873A;">赵六</span><span style="color:#59873A;">&#39;})</span></span></code></pre></div><ul><li><strong>多条文档</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.insert([</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#80A665;">&#39;缘一&#39;</span><span style="color:#80A665;">},</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#80A665;">&#39;二楞&#39;</span><span style="color:#80A665;">}]</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#80A665;">db.users.insertMany([</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#80A665;">&#39;缘一1&#39;</span><span style="color:#80A665;">},</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#80A665;">&#39;二楞1&#39;</span><span style="color:#80A665;">}]</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#DBD7CAEE;">).insertMany</span><span style="color:#666666;">([</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhang3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">,age:19},{name:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhang4</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">,age:19}</span><span style="color:#666666;">])</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.insert([</span><span style="color:#393A34;">{name:</span><span style="color:#59873A;">&#39;缘一&#39;</span><span style="color:#59873A;">},</span><span style="color:#393A34;">{name:</span><span style="color:#59873A;">&#39;二楞&#39;</span><span style="color:#59873A;">}]</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#59873A;">db.users.insertMany([</span><span style="color:#393A34;">{name:</span><span style="color:#59873A;">&#39;缘一1&#39;</span><span style="color:#59873A;">},</span><span style="color:#393A34;">{name:</span><span style="color:#59873A;">&#39;二楞1&#39;</span><span style="color:#59873A;">}]</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#393A34;">).insertMany</span><span style="color:#999999;">([</span><span style="color:#393A34;">{name:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhang3</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">,age:19},{name:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhang4</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">,age:19}</span><span style="color:#999999;">])</span></span></code></pre></div><ul><li><strong>脚本方式</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">for</span><span style="color:#666666;">(</span><span style="color:#B8A965;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#80A665;">i&lt;5</span><span style="color:#666666;">;</span><span style="color:#80A665;">i++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">{ </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">db.users.insert(</span><span style="color:#DBD7CAEE;">{id:i,name:</span><span style="color:#80A665;">&#39;zhang&#39;</span><span style="color:#80A665;">+i}</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">for</span><span style="color:#999999;">(</span><span style="color:#998418;">let</span><span style="color:#393A34;"> </span><span style="color:#B56959;">i</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#59873A;">i&lt;5</span><span style="color:#999999;">;</span><span style="color:#59873A;">i++</span><span style="color:#999999;">)</span><span style="color:#393A34;">{ </span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">db.users.insert(</span><span style="color:#393A34;">{id:i,name:</span><span style="color:#59873A;">&#39;zhang&#39;</span><span style="color:#59873A;">+i}</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><h3 id="_3-删除" tabindex="-1">3.删除 <a class="header-anchor" href="#_3-删除" aria-label="Permalink to &quot;3.删除&quot;">​</a></h3><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.remove(</span><span style="color:#DBD7CAEE;">{}) 	</span><span style="color:#758575DD;">#删除所有文档</span></span>
+<span class="line"><span style="color:#80A665;">db.users.remove(</span><span style="color:#DBD7CAEE;">{_id:ObjectId(</span><span style="color:#80A665;">&quot;62767f841f41a9d7de748124&quot;</span><span style="color:#DBD7CAEE;">)})	 </span><span style="color:#758575DD;">#删除某一条</span></span>
+<span class="line"><span style="color:#80A665;">db.users.remove(</span><span style="color:#DBD7CAEE;">{age:20})	 </span><span style="color:#758575DD;">#删除满足条件的数据</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#DBD7CAEE;">).deleteOne</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{name:&#39;zhang3&#39;})	 #删除某一条</span></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">.deleteMany</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{age:18})	 #删除满足条件的数据</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.remove(</span><span style="color:#393A34;">{}) 	</span><span style="color:#A0ADA0;">#删除所有文档</span></span>
+<span class="line"><span style="color:#59873A;">db.users.remove(</span><span style="color:#393A34;">{_id:ObjectId(</span><span style="color:#59873A;">&quot;62767f841f41a9d7de748124&quot;</span><span style="color:#393A34;">)})	 </span><span style="color:#A0ADA0;">#删除某一条</span></span>
+<span class="line"><span style="color:#59873A;">db.users.remove(</span><span style="color:#393A34;">{age:20})	 </span><span style="color:#A0ADA0;">#删除满足条件的数据</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#393A34;">).deleteOne</span><span style="color:#999999;">(</span><span style="color:#393A34;">{name:&#39;zhang3&#39;})	 #删除某一条</span></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">.deleteMany</span><span style="color:#999999;">(</span><span style="color:#393A34;">{age:18})	 #删除满足条件的数据</span></span></code></pre></div><h3 id="_4-更新" tabindex="-1">4.更新 <a class="header-anchor" href="#_4-更新" aria-label="Permalink to &quot;4.更新&quot;">​</a></h3><p>语法 :</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#BD976A;">集合名称</span><span style="color:#666666;">.</span><span style="color:#80A665;">update</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">query</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">update</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">updert</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">boolean</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">, </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        multi:</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">boolean</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    	writeConcern:</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">document</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> //抛出异常的级别</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#B07D48;">集合名称</span><span style="color:#999999;">.</span><span style="color:#59873A;">update</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">query</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">update</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">updert</span><span style="color:#393A34;">:</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">boolean</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">, </span></span>
+<span class="line"><span style="color:#393A34;">        multi:</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">boolean</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">,</span></span>
+<span class="line"><span style="color:#393A34;">    	writeConcern:</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">document</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> //抛出异常的级别</span></span>
+<span class="line"><span style="color:#393A34;">    }</span></span>
+<span class="line"><span style="color:#393A34;">)</span></span></code></pre></div><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.update(</span><span style="color:#DBD7CAEE;">{_id:ObjectId(</span><span style="color:#80A665;">&#39;627686574f57a31b328b63ab&#39;</span><span style="color:#DBD7CAEE;">)},{</span><span style="color:#BD976A;">$set</span><span style="color:#DBD7CAEE;">:{</span><span style="color:#80A665;">age:24,likes:[</span><span style="color:#80A665;">&#39;代码&#39;</span><span style="color:#80A665;">,</span><span style="color:#80A665;">&#39;吃饭&#39;</span><span style="color:#80A665;">]}}</span><span style="color:#DBD7CAEE;">)  </span><span style="color:#758575DD;">#指定更新</span></span>
+<span class="line"><span style="color:#80A665;">db.users.update(</span><span style="color:#DBD7CAEE;">{age:18}</span><span style="color:#80A665;">,</span><span style="color:#DBD7CAEE;">{</span><span style="color:#BD976A;">$set</span><span style="color:#DBD7CAEE;">:{age:24,likes:[</span><span style="color:#80A665;">&#39;动漫&#39;</span><span style="color:#80A665;">,</span><span style="color:#80A665;">&#39;美女&#39;</span><span style="color:#80A665;">]}}</span><span style="color:#DBD7CAEE;">)  </span><span style="color:#758575DD;">#更新匹配到的第一条</span></span>
+<span class="line"><span style="color:#80A665;">db.users.update(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#80A665;">age:18},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#BD976A;">$set</span><span style="color:#DBD7CAEE;">:{</span><span style="color:#80A665;">age:24,likes:[</span><span style="color:#80A665;">&#39;动漫&#39;</span><span style="color:#80A665;">,</span><span style="color:#80A665;">&#39;美女&#39;</span><span style="color:#80A665;">]}},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#80A665;">multi:true}</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#更新多条</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#80A665;">upsert:true}</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#不存在则插入</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">)  #更新匹配到的所有</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#DBD7CAEE;">).update</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{age:18},{$set:{age:24,likes:[&#39;动漫&#39;,&#39;美女&#39;]}})	#更新匹配到的第一条</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.update(</span><span style="color:#393A34;">{_id:ObjectId(</span><span style="color:#59873A;">&#39;627686574f57a31b328b63ab&#39;</span><span style="color:#393A34;">)},{</span><span style="color:#B07D48;">$set</span><span style="color:#393A34;">:{</span><span style="color:#59873A;">age:24,likes:[</span><span style="color:#59873A;">&#39;代码&#39;</span><span style="color:#59873A;">,</span><span style="color:#59873A;">&#39;吃饭&#39;</span><span style="color:#59873A;">]}}</span><span style="color:#393A34;">)  </span><span style="color:#A0ADA0;">#指定更新</span></span>
+<span class="line"><span style="color:#59873A;">db.users.update(</span><span style="color:#393A34;">{age:18}</span><span style="color:#59873A;">,</span><span style="color:#393A34;">{</span><span style="color:#B07D48;">$set</span><span style="color:#393A34;">:{age:24,likes:[</span><span style="color:#59873A;">&#39;动漫&#39;</span><span style="color:#59873A;">,</span><span style="color:#59873A;">&#39;美女&#39;</span><span style="color:#59873A;">]}}</span><span style="color:#393A34;">)  </span><span style="color:#A0ADA0;">#更新匹配到的第一条</span></span>
+<span class="line"><span style="color:#59873A;">db.users.update(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#59873A;">age:18},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#B07D48;">$set</span><span style="color:#393A34;">:{</span><span style="color:#59873A;">age:24,likes:[</span><span style="color:#59873A;">&#39;动漫&#39;</span><span style="color:#59873A;">,</span><span style="color:#59873A;">&#39;美女&#39;</span><span style="color:#59873A;">]}},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#59873A;">multi:true}</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#更新多条</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#59873A;">upsert:true}</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#不存在则插入</span></span>
+<span class="line"><span style="color:#393A34;">)  #更新匹配到的所有</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#393A34;">).update</span><span style="color:#999999;">(</span><span style="color:#393A34;">{age:18},{$set:{age:24,likes:[&#39;动漫&#39;,&#39;美女&#39;]}})	#更新匹配到的第一条</span></span></code></pre></div><h2 id="五、mongoose学习" tabindex="-1">五、<a href="http://www.mongoosejs.net/docs/index.html" target="_blank" rel="noreferrer">Mongoose学习</a> <a class="header-anchor" href="#五、mongoose学习" aria-label="Permalink to &quot;五、[Mongoose学习](http://www.mongoosejs.net/docs/index.html)&quot;">​</a></h2><h3 id="_1-插入" tabindex="-1">1.插入 <a class="header-anchor" href="#_1-插入" aria-label="Permalink to &quot;1.插入&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">register</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">User</span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#80A665;">save</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">//转化为json才能移除密码</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#80A665;">toJSON</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">delete</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">password</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">注册成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">user</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">next</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">register</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">User</span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#59873A;">save</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">//转化为json才能移除密码</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#59873A;">toJSON</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">delete</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">password</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">注册成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">user</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">next</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_2-删除" tabindex="-1">2.删除 <a class="header-anchor" href="#_2-删除" aria-label="Permalink to &quot;2.删除&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">deleteArticle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Types</span><span style="color:#666666;">.</span><span style="color:#80A665;">ObjectId</span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">findByIdAndRemove</span><span style="color:#666666;">(</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">result: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">succ</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章删除成功!</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">deleteArticle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Types</span><span style="color:#999999;">.</span><span style="color:#59873A;">ObjectId</span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">findByIdAndRemove</span><span style="color:#999999;">(</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">result: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">succ</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章删除成功!</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_3-更新" tabindex="-1">3.更新 <a class="header-anchor" href="#_3-更新" aria-label="Permalink to &quot;3.更新&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">updateArticle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">article</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">article</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">_id</span><span style="color:#666666;">:</span><span style="color:#BD976A;">id</span><span style="color:#666666;">,</span><span style="color:#BD976A;">title</span><span style="color:#666666;">,</span><span style="color:#BD976A;">desc</span><span style="color:#666666;">,</span><span style="color:#BD976A;">body</span><span style="color:#666666;">,</span><span style="color:#BD976A;">tagList</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">article</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">article</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">findByIdAndUpdate</span><span style="color:#666666;">(</span><span style="color:#BD976A;">id</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">$set</span><span style="color:#666666;">:</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">article</span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">new</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">succ</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章更新成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">article</span><span style="color:#666666;">:</span><span style="color:#BD976A;">article</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">updateArticle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">article</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">article</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">_id</span><span style="color:#999999;">:</span><span style="color:#B07D48;">id</span><span style="color:#999999;">,</span><span style="color:#B07D48;">title</span><span style="color:#999999;">,</span><span style="color:#B07D48;">desc</span><span style="color:#999999;">,</span><span style="color:#B07D48;">body</span><span style="color:#999999;">,</span><span style="color:#B07D48;">tagList</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">article</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">article</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">findByIdAndUpdate</span><span style="color:#999999;">(</span><span style="color:#B07D48;">id</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">$set</span><span style="color:#999999;">:</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">article</span><span style="color:#999999;">},</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">new</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">succ</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章更新成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">article</span><span style="color:#999999;">:</span><span style="color:#B07D48;">article</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_4-查询" tabindex="-1">4.查询 <a class="header-anchor" href="#_4-查询" aria-label="Permalink to &quot;4.查询&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//获取一个文章</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">getArticleById</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//映射用户</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">article</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">findById</span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#BD976A;">articleId</span><span style="color:#666666;">).</span><span style="color:#80A665;">populate</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">author</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">article</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章不存在!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">succ</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章查询成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">article</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//获取一个文章</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">getArticleById</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//映射用户</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">article</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">findById</span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#B07D48;">articleId</span><span style="color:#999999;">).</span><span style="color:#59873A;">populate</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">author</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">article</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">return</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章不存在!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">succ</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章查询成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">article</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 获取文章列表</span></span>
+<span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">getArticles</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">limit</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#BD976A;">offset</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#BD976A;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">author</span><span style="color:#666666;">,</span><span style="color:#BD976A;">favorited</span><span style="color:#666666;">,</span><span style="color:#BD976A;">sortBy</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">conditions</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">filter</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tag</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">filter</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tag</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//某个作者的文章</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">author</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">User</span><span style="color:#666666;">.</span><span style="color:#80A665;">findOne</span><span style="color:#666666;">({</span><span style="color:#B8A965;">username</span><span style="color:#666666;">:</span><span style="color:#BD976A;">author</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">filter</span><span style="color:#666666;">.</span><span style="color:#BD976A;">author</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#BD976A;">user</span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">_id</span><span style="color:#CB7676;">:null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">articleList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">filter</span><span style="color:#666666;">).</span><span style="color:#80A665;">skip</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Number</span><span style="color:#666666;">.</span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">offset</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">limit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Number</span><span style="color:#666666;">.</span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">limit</span><span style="color:#666666;">)).</span><span style="color:#80A665;">sort</span><span style="color:#666666;">({</span><span style="color:#B8A965;">creeateAt</span><span style="color:#666666;">:</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,...</span><span style="color:#BD976A;">sortBy</span><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">articleCount</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">filter</span><span style="color:#666666;">).</span><span style="color:#80A665;">skip</span><span style="color:#666666;">(</span><span style="color:#BD976A;">offset</span><span style="color:#666666;">).</span><span style="color:#80A665;">limit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">limit</span><span style="color:#666666;">).</span><span style="color:#80A665;">count</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">totalCount</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">countDocuments</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">articleList</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">暂无文章!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">succ</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章查询列表成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">articleList</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">articleCount</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">totalCount</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 获取文章列表</span></span>
+<span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">getArticles</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">limit</span><span style="color:#999999;">=</span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#B07D48;">offset</span><span style="color:#999999;">=</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#B07D48;">tag</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">author</span><span style="color:#999999;">,</span><span style="color:#B07D48;">favorited</span><span style="color:#999999;">,</span><span style="color:#B07D48;">sortBy</span><span style="color:#999999;">}</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">conditions</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">filter</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tag</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">filter</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tag</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//某个作者的文章</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">author</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">User</span><span style="color:#999999;">.</span><span style="color:#59873A;">findOne</span><span style="color:#999999;">({</span><span style="color:#998418;">username</span><span style="color:#999999;">:</span><span style="color:#B07D48;">author</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">filter</span><span style="color:#999999;">.</span><span style="color:#B07D48;">author</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B07D48;">user</span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">_id</span><span style="color:#AB5959;">:null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">articleList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">filter</span><span style="color:#999999;">).</span><span style="color:#59873A;">skip</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Number</span><span style="color:#999999;">.</span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">offset</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">limit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Number</span><span style="color:#999999;">.</span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">limit</span><span style="color:#999999;">)).</span><span style="color:#59873A;">sort</span><span style="color:#999999;">({</span><span style="color:#998418;">creeateAt</span><span style="color:#999999;">:</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,...</span><span style="color:#B07D48;">sortBy</span><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">articleCount</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">filter</span><span style="color:#999999;">).</span><span style="color:#59873A;">skip</span><span style="color:#999999;">(</span><span style="color:#B07D48;">offset</span><span style="color:#999999;">).</span><span style="color:#59873A;">limit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">limit</span><span style="color:#999999;">).</span><span style="color:#59873A;">count</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">totalCount</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">countDocuments</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">articleList</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">return</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">暂无文章!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">succ</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章查询列表成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">articleList</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">articleCount</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">totalCount</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_5-模型" tabindex="-1">5.模型 <a class="header-anchor" href="#_5-模型" aria-label="Permalink to &quot;5.模型&quot;">​</a></h3><p>📝model/index.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mongoose</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dbUri</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../config/config.default</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">connect</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dbUri</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">db</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#BD976A;">connection</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">error</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#BD976A;">error</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#BD976A;">console</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">MongDB数据库连接失败!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">));</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">once</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">open</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">MongDB数据库连接成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Cat</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">model</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Cat</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">User</span><span style="color:#666666;">:</span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">model</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">User</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./user</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">Article</span><span style="color:#666666;">:</span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">model</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Article</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./article</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)),</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mongoose</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dbUri</span><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../config/config.default</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">connect</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dbUri</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">db</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#B07D48;">connection</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">error</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#B07D48;">error</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#B07D48;">console</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">MongDB数据库连接失败!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">));</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">once</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">open</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">MongDB数据库连接成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Cat</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">model</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Cat</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">User</span><span style="color:#999999;">:</span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">model</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">User</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./user</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)),</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">Article</span><span style="color:#999999;">:</span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">model</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Article</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./article</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)),</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝model/base.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//基础模型 </span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">createAt</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Date</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Date</span><span style="color:#666666;">.</span><span style="color:#BD976A;">now</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">updtedAt</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Date</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Date</span><span style="color:#666666;">.</span><span style="color:#BD976A;">now</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//基础模型 </span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">createAt</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Date</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Date</span><span style="color:#999999;">.</span><span style="color:#B07D48;">now</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">updtedAt</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Date</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Date</span><span style="color:#999999;">.</span><span style="color:#B07D48;">now</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝model/user.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mongoose</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">baseSchema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./base</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">md5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../util/md5</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//用户模型</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userSchema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">Schema</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">...</span><span style="color:#BD976A;">baseSchema</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">username</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">password</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">set</span><span style="color:#666666;">:</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">md5</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">select</span><span style="color:#666666;">:</span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">email</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">bio</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">image</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userSchema</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mongoose</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">baseSchema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./base</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">md5</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../util/md5</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//用户模型</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userSchema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">Schema</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">...</span><span style="color:#B07D48;">baseSchema</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">username</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">password</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">set</span><span style="color:#999999;">:</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">md5</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">select</span><span style="color:#999999;">:</span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">email</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">bio</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">image</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userSchema</span></span></code></pre></div><p>📝model/article.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mongoose</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Schema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Schema</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">baseSchema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./base</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//文章模型</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">articleSchema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">Schema</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">...</span><span style="color:#BD976A;">baseSchema</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">desc</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">body</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">favoritesCount</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Number</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">tagList</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:[</span><span style="color:#BD976A;">String</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">author</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Schema</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Types</span><span style="color:#666666;">.</span><span style="color:#BD976A;">ObjectId</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">ref</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">User</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">articleSchema</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mongoose</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Schema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Schema</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">baseSchema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./base</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//文章模型</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">articleSchema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">Schema</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">...</span><span style="color:#B07D48;">baseSchema</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">title</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">desc</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">body</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">favoritesCount</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Number</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">tagList</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:[</span><span style="color:#B07D48;">String</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">author</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Schema</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Types</span><span style="color:#999999;">.</span><span style="color:#B07D48;">ObjectId</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">ref</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">User</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">articleSchema</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/BackEnd/NodeJS/MongoDB笔记.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><!----></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Node大文件上传</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.html" "b/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.html"
new file mode 100644
index 00000000..89e8f3c0
--- /dev/null
+++ "b/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.html"
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Node大文件上传 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/BackEnd_NodeJS_Node大文件上传.md.84c9f765.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>NodeJS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/MongoDB%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>MongoDB笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node大文件上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node简单上传文件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Server</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Docker学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nginx学习笔记</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_BackEnd_NodeJS_Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-6b87e69f><div><h1 id="node大文件上传" tabindex="-1">Node大文件上传 <a class="header-anchor" href="#node大文件上传" aria-label="Permalink to &quot;Node大文件上传&quot;">​</a></h1><ol><li>创建文件唯一 HASH</li><li>发请求检查文件是否已传过 <ol><li>传过:提示&#39;秒传成功&#39;</li><li>未传过:开始切片并上传，创建任务池，循环上传切片</li><li>传过未传完:从下一切片开始传</li></ol></li><li>上传完成，发送合并切片请求</li></ol><h2 id="vue-前端代码" tabindex="-1">Vue 前端代码 <a class="header-anchor" href="#vue-前端代码" aria-label="Permalink to &quot;Vue 前端代码&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-upload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">:http-request</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">customRequest</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#80A665;">trigger</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">primary</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">选择文件</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-button</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-upload</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">axios</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">axios</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">SparkMD5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">spark-md5</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">customRequest</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">({</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#CB7676;"> </span><span style="color:#666666;">})</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">formData</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">FormData</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">formData</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fileName</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">hash</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">calcFileHash</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">chunks</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">createFileChunk</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 检查文件是否存在</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// const { data: { data: { exist } } } = await checkFileExist(hash)</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">res</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">uploadChunks</span><span style="color:#666666;">(</span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">checkFileExist</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">return</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">axios</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">http://localhost:3000/upload/checkFile</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#BD976A;">hash</span></span>
+<span class="line"><span style="color:#666666;">  })</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Chunk</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">index</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Blob</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">ChunkSize</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">1024</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">1024</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;"> </span><span style="color:#758575DD;">// 2M</span></span>
+<span class="line"><span style="color:#758575DD;">// 创建分片</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">createFileChunk</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Chunk</span><span style="color:#666666;">[] =</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">chunkCount</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">ceil</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;"> / </span><span style="color:#BD976A;">ChunkSize</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">for</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunkCount</span><span style="color:#666666;">;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Blob</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> * </span><span style="color:#BD976A;">ChunkSize</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> + </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> * </span><span style="color:#BD976A;">ChunkSize</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">name</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#CB7676;"> + </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">-</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> + </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">lastIndexOf</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> + </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#B8A965;">index</span><span style="color:#666666;">: </span><span style="color:#BD976A;">i</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    })</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">return</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunks</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">// 创建文件hash值</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">calcFileHash</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">: </span><span style="color:#5DA994;">File</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">return</span><span style="color:#CB7676;"> new </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">spark</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#BD976A;">SparkMD5</span><span style="color:#666666;">.</span><span style="color:#80A665;">ArrayBuffer</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">reader</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">FileReader</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">size</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">offset</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">1024</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">1024</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 第一个2M，最后一个区块数据全要</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">chunks</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">offset</span><span style="color:#666666;">)]</span></span>
+<span class="line"><span style="color:#CB7676;">    let </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">offset</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">while</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#4D9375;">if</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">offset</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 最后一个区快</span></span>
+<span class="line"><span style="color:#CB7676;">        </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">offset</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#666666;">}</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">else</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 中间的区块</span></span>
+<span class="line"><span style="color:#CB7676;">        const </span><span style="color:#BD976A;">mid</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">offset</span><span style="color:#CB7676;"> / </span><span style="color:#4C9A91;">2</span></span>
+<span class="line"><span style="color:#CB7676;">        const </span><span style="color:#BD976A;">end</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">offset</span></span>
+<span class="line"><span style="color:#CB7676;">        </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">        </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">mid</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">mid</span><span style="color:#CB7676;"> + </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">        </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">end</span><span style="color:#CB7676;"> - </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">end</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> += </span><span style="color:#BD976A;">offset</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 中间的，取前中后各2各字节</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">reader</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsArrayBuffer</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new </span><span style="color:#80A665;">Blob</span><span style="color:#666666;">(</span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">reader</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">e</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#BD976A;">spark</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">ArrayBuffer</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">spark</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">())</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">// 上传分片</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">uploadChunks</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">(</span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Array</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">Chunk</span><span style="color:#666666;">&gt;,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 转成promise</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">requestList</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(({</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#CB7676;"> </span><span style="color:#666666;">})</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">form</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">FormData</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">form</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">chunk</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">form</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hash</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">form</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">return</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{ </span><span style="color:#BD976A;">form</span><span style="color:#666666;">, </span><span style="color:#B8A965;">index</span><span style="color:#666666;">: </span><span style="color:#BD976A;">index</span><span style="color:#666666;">, </span><span style="color:#B8A965;">error</span><span style="color:#666666;">: </span><span style="color:#4C9A91;">0</span><span style="color:#666666;"> }</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">  let </span><span style="color:#BD976A;">index</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Array</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">any</span><span style="color:#666666;">&gt;&gt; =</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">max</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">6</span><span style="color:#CB7676;"> </span><span style="color:#758575DD;">// 设置浏览器运行最大并发数  目前6个为当前的主流</span></span>
+<span class="line"><span style="color:#CB7676;">  let </span><span style="color:#BD976A;">allProgress</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">index</span><span style="color:#CB7676;"> </span><span style="color:#758575DD;">// 总进度</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">while</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">requestList</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">task</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">axios</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://localhost:3000/upload/postFile</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">requestList</span><span style="color:#666666;">[</span><span style="color:#BD976A;">index</span><span style="color:#666666;">].</span><span style="color:#BD976A;">form</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#80A665;">onUploadProgress</span><span style="color:#666666;">: (</span><span style="color:#BD976A;">progress</span><span style="color:#666666;">) =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#BD976A;">allProgress</span><span style="color:#666666;"> </span><span style="color:#CB7676;">+=</span><span style="color:#666666;"> (</span><span style="color:#BD976A;">progress</span><span style="color:#666666;">.</span><span style="color:#BD976A;">loaded</span><span style="color:#666666;"> </span><span style="color:#CB7676;">/</span><span style="color:#666666;"> (</span><span style="color:#BD976A;">progress</span><span style="color:#666666;">.</span><span style="color:#BD976A;">total</span><span style="color:#666666;"> </span><span style="color:#CB7676;">?</span><span style="color:#666666;"> </span><span style="color:#BD976A;">progress</span><span style="color:#666666;">.</span><span style="color:#BD976A;">total</span><span style="color:#666666;"> </span><span style="color:#CB7676;">:</span><span style="color:#666666;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)) </span><span style="color:#758575DD;">// 这是单个分片的</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#CB7676;">const </span><span style="color:#BD976A;">percent</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">((</span><span style="color:#BD976A;">allProgress</span><span style="color:#CB7676;"> / </span><span style="color:#BD976A;">requestList</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// if (params.onProgress) params.onProgress({ percent })</span></span>
+<span class="line"><span style="color:#666666;">      }</span></span>
+<span class="line"><span style="color:#666666;">    })</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">task</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">.</span><span style="color:#80A665;">splice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">.</span><span style="color:#80A665;">findIndex</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">item</span><span style="color:#CB7676;"> === </span><span style="color:#BD976A;">task</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">task</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">if</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#CB7676;"> === </span><span style="color:#BD976A;">max</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">race</span><span style="color:#666666;">(</span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#758575DD;">// 竞赛等出一个执行完毕的请求</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">index</span><span style="color:#CB7676;">++</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ taskPool ]-95</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">all</span><span style="color:#666666;">(</span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">style</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">scoped</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">scss</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">upload-demo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">style</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-upload</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">:http-request</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">customRequest</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#59873A;">trigger</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-button</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">primary</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">选择文件</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-button</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-upload</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">axios</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">axios</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">SparkMD5</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">spark-md5</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">customRequest</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">({</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#AB5959;"> </span><span style="color:#999999;">})</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">formData</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">FormData</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">formData</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fileName</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">hash</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">calcFileHash</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">chunks</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">createFileChunk</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 检查文件是否存在</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// const { data: { data: { exist } } } = await checkFileExist(hash)</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">res</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">uploadChunks</span><span style="color:#999999;">(</span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">checkFileExist</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">return</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">axios</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">http://localhost:3000/upload/checkFile</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#B07D48;">hash</span></span>
+<span class="line"><span style="color:#999999;">  })</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Chunk</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">index</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Blob</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">ChunkSize</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">1024</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">1024</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">2</span><span style="color:#AB5959;"> </span><span style="color:#A0ADA0;">// 2M</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 创建分片</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">createFileChunk</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Chunk</span><span style="color:#999999;">[] =</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">chunkCount</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">ceil</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;"> / </span><span style="color:#B07D48;">ChunkSize</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">for</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunkCount</span><span style="color:#999999;">;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Blob</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> * </span><span style="color:#B07D48;">ChunkSize</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> + </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> * </span><span style="color:#B07D48;">ChunkSize</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">name</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#AB5959;"> + </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">-</span><span style="color:#B5695999;">&quot;</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> + </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">lastIndexOf</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> + </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#998418;">index</span><span style="color:#999999;">: </span><span style="color:#B07D48;">i</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    })</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">return</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunks</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 创建文件hash值</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">calcFileHash</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">File</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">return</span><span style="color:#AB5959;"> new </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">spark</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#B07D48;">SparkMD5</span><span style="color:#999999;">.</span><span style="color:#59873A;">ArrayBuffer</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">reader</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">FileReader</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">size</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">offset</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">2</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">1024</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">1024</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 第一个2M，最后一个区块数据全要</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">chunks</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">offset</span><span style="color:#999999;">)]</span></span>
+<span class="line"><span style="color:#AB5959;">    let </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">offset</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">while</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#1E754F;">if</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">offset</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 最后一个区快</span></span>
+<span class="line"><span style="color:#AB5959;">        </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">offset</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#999999;">}</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">else</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 中间的区块</span></span>
+<span class="line"><span style="color:#AB5959;">        const </span><span style="color:#B07D48;">mid</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">offset</span><span style="color:#AB5959;"> / </span><span style="color:#2F798A;">2</span></span>
+<span class="line"><span style="color:#AB5959;">        const </span><span style="color:#B07D48;">end</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">offset</span></span>
+<span class="line"><span style="color:#AB5959;">        </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#2F798A;">2</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">        </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">mid</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">mid</span><span style="color:#AB5959;"> + </span><span style="color:#2F798A;">2</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">        </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">end</span><span style="color:#AB5959;"> - </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">end</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> += </span><span style="color:#B07D48;">offset</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 中间的，取前中后各2各字节</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">reader</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsArrayBuffer</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new </span><span style="color:#59873A;">Blob</span><span style="color:#999999;">(</span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">reader</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">e</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#B07D48;">spark</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">ArrayBuffer</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">spark</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">())</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 上传分片</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">uploadChunks</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">(</span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">Chunk</span><span style="color:#999999;">&gt;,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 转成promise</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">requestList</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(({</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#AB5959;"> </span><span style="color:#999999;">})</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">form</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">FormData</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">form</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">chunk</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">form</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hash</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">form</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">return</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{ </span><span style="color:#B07D48;">form</span><span style="color:#999999;">, </span><span style="color:#998418;">index</span><span style="color:#999999;">: </span><span style="color:#B07D48;">index</span><span style="color:#999999;">, </span><span style="color:#998418;">error</span><span style="color:#999999;">: </span><span style="color:#2F798A;">0</span><span style="color:#999999;"> }</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">  let </span><span style="color:#B07D48;">index</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">any</span><span style="color:#999999;">&gt;&gt; =</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">max</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">6</span><span style="color:#AB5959;"> </span><span style="color:#A0ADA0;">// 设置浏览器运行最大并发数  目前6个为当前的主流</span></span>
+<span class="line"><span style="color:#AB5959;">  let </span><span style="color:#B07D48;">allProgress</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">index</span><span style="color:#AB5959;"> </span><span style="color:#A0ADA0;">// 总进度</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">while</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">requestList</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">task</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">axios</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://localhost:3000/upload/postFile</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">requestList</span><span style="color:#999999;">[</span><span style="color:#B07D48;">index</span><span style="color:#999999;">].</span><span style="color:#B07D48;">form</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#59873A;">onUploadProgress</span><span style="color:#999999;">: (</span><span style="color:#B07D48;">progress</span><span style="color:#999999;">) =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#B07D48;">allProgress</span><span style="color:#999999;"> </span><span style="color:#AB5959;">+=</span><span style="color:#999999;"> (</span><span style="color:#B07D48;">progress</span><span style="color:#999999;">.</span><span style="color:#B07D48;">loaded</span><span style="color:#999999;"> </span><span style="color:#AB5959;">/</span><span style="color:#999999;"> (</span><span style="color:#B07D48;">progress</span><span style="color:#999999;">.</span><span style="color:#B07D48;">total</span><span style="color:#999999;"> </span><span style="color:#AB5959;">?</span><span style="color:#999999;"> </span><span style="color:#B07D48;">progress</span><span style="color:#999999;">.</span><span style="color:#B07D48;">total</span><span style="color:#999999;"> </span><span style="color:#AB5959;">:</span><span style="color:#999999;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)) </span><span style="color:#A0ADA0;">// 这是单个分片的</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#AB5959;">const </span><span style="color:#B07D48;">percent</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">((</span><span style="color:#B07D48;">allProgress</span><span style="color:#AB5959;"> / </span><span style="color:#B07D48;">requestList</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">100</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// if (params.onProgress) params.onProgress({ percent })</span></span>
+<span class="line"><span style="color:#999999;">      }</span></span>
+<span class="line"><span style="color:#999999;">    })</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">task</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">.</span><span style="color:#59873A;">splice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">.</span><span style="color:#59873A;">findIndex</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">item</span><span style="color:#AB5959;"> === </span><span style="color:#B07D48;">task</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">task</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">if</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#AB5959;"> === </span><span style="color:#B07D48;">max</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">race</span><span style="color:#999999;">(</span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#A0ADA0;">// 竞赛等出一个执行完毕的请求</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">index</span><span style="color:#AB5959;">++</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ taskPool ]-95</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">all</span><span style="color:#999999;">(</span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">style</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">scoped</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">scss</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">upload-demo</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">style</span><span style="color:#999999;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/BackEnd/NodeJS/Node大文件上传.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/BackEnd/NodeJS/MongoDB%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>MongoDB笔记</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Node学习笔记</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.html"
new file mode 100644
index 00000000..d4cc041e
--- /dev/null
+++ "b/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.html"
@@ -0,0 +1,1003 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/BackEnd_NodeJS_Node学习笔记.md.f1b234ff.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>NodeJS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/MongoDB%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>MongoDB笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node大文件上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node简单上传文件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Server</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Docker学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nginx学习笔记</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_BackEnd_NodeJS_Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-6b87e69f><div><h2 id="一、读取文件" tabindex="-1">一、读取文件 <a class="header-anchor" href="#一、读取文件" aria-label="Permalink to &quot;一、读取文件&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readFile</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">utf8</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">data</span><span style="color:#666666;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">data: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//失败为undefined</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">err: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">err</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//成功为null,否则为错误对象</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	 </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">读取失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">读取成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">data</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readFile</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">utf8</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">data</span><span style="color:#999999;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">data: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//失败为undefined</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">err: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">err</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//成功为null,否则为错误对象</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	 </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">读取失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">读取成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">data</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p><strong>问题</strong></p><ul><li>相对路径在上一层读取不了文件</li><li>绝对路径不利于维护移植</li></ul><p><strong>解决</strong></p><p><code>__dirname</code>代表当前文件所处目录, 解决文件路径动态拼接问题</p><p><strong>坑点</strong>：<code>__dirname</code>输出是路径是**<em>反斜杠（\）</em><strong>，拼接后面的路径需要写</strong><em>正斜杠（/）</em>**</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//__dirname:  D:\PracticeProject\Node\readfile</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/3.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">utf8</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">data</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\\\</span><span style="color:#C98A7D;">3.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\\3</span><span style="color:#C98A7D;">.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\\3</span><span style="color:#C98A7D;">.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C99076;">\\</span><span style="color:#C98A7D;">3.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">__dirname: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\</span><span style="color:#C98A7D;">3.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//这四个都可以成功(?)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">__dirname: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">data: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">读取失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//__dirname:  D:\PracticeProject\Node\readfile</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/3.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">utf8</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">data</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\\\</span><span style="color:#B56959;">3.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\\3</span><span style="color:#B56959;">.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\\3</span><span style="color:#B56959;">.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#A65E2B;">\\</span><span style="color:#B56959;">3.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">__dirname: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\</span><span style="color:#B56959;">3.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//这四个都可以成功(?)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">__dirname: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">data: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">读取失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="path-路径模块" tabindex="-1">path 路径模块 <a class="header-anchor" href="#path-路径模块" aria-label="Permalink to &quot;path 路径模块&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pathStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/a</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/b/c</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/d</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//  a\b\d 抵消路劲(../)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pathStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/a</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/b/c</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/d</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//  a\b\d 抵消路劲(../)</span></span></code></pre></div><p>获取文件扩展名</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fext</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">extname</span><span style="color:#666666;">(</span><span style="color:#BD976A;">fpath</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fext</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">extname</span><span style="color:#999999;">(</span><span style="color:#B07D48;">fpath</span><span style="color:#999999;">)</span></span></code></pre></div><h2 id="二、写入文件" tabindex="-1">二、写入文件 <a class="header-anchor" href="#二、写入文件" aria-label="Permalink to &quot;二、写入文件&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">writeFile</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">F:/12.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">888888</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">写入失败 </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//写入成功,错误为null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">写入成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">writeFile</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">F:/12.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">888888</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#393A34;">  </span><span style="color:#999999;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">写入失败 </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//写入成功,错误为null</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">写入成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><blockquote><p>fs.writeFile 只能创建文件，不能创建路径</p><p>重复调用 fs.writeFile 写入同一个文件，新写入的会覆盖之前内容</p></blockquote><h2 id="三、服务器操作" tabindex="-1">三、服务器操作 <a class="header-anchor" href="#三、服务器操作" aria-label="Permalink to &quot;三、服务器操作&quot;">​</a></h2><blockquote><p>服务器与普通电脑：服务器上安装了 web 服务器软件</p></blockquote><h3 id="_1-创建-web-服务器步骤" tabindex="-1">1.创建 web 服务器步骤 <a class="header-anchor" href="#_1-创建-web-服务器步骤" aria-label="Permalink to &quot;1.创建 web 服务器步骤&quot;">​</a></h3><ul><li>导入 http 模块</li><li>创建 web 服务器实例</li><li>为服务器实例绑定 request 事件，监听客户端请求</li><li>启动服务器</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">http</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#666666;">.</span><span style="color:#80A665;">createServer</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">request</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//返回数据给客户端(解决中文乱码两种方法)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">writeHead</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/plain;charset=utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// res.setHeader(&#39;Content-Type&#39;,&#39;text/html; charset=utf-8&#39;)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> 	 </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">请求url:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">,请求方法:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">method</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	 </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">服务器监听到请求</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">服务器运行在 127.0.0.1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">http</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">server</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#999999;">.</span><span style="color:#59873A;">createServer</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">request</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//返回数据给客户端(解决中文乱码两种方法)</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">writeHead</span><span style="color:#999999;">(</span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/plain;charset=utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// res.setHeader(&#39;Content-Type&#39;,&#39;text/html; charset=utf-8&#39;)</span></span>
+<span class="line"><span style="color:#393A34;"> 	 </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">请求url:</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">,请求方法:</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">method</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	 </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">服务器监听到请求</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">服务器运行在 127.0.0.1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="_2-动态响应内容" tabindex="-1">2.动态响应内容 <a class="header-anchor" href="#_2-动态响应内容" aria-label="Permalink to &quot;2.动态响应内容&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#666666;">.</span><span style="color:#80A665;">createServer</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">request</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/index.html</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;h1&gt;Home&lt;/h1&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/about.html</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;h1&gt;About&lt;/h1&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">setHeader</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text/html; charset=utf-8</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#BD976A;">content</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">运行在localhost:8080</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">server</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#999999;">.</span><span style="color:#59873A;">createServer</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">request</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">content</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/index.html</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">content</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;h1&gt;Home&lt;/h1&gt;</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/about.html</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">content</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;h1&gt;About&lt;/h1&gt;</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">setHeader</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text/html; charset=utf-8</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B07D48;">content</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">运行在localhost:8080</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h3 id="_3-响应文件内容" tabindex="-1">3.响应文件内容 <a class="header-anchor" href="#_3-响应文件内容" aria-label="Permalink to &quot;3.响应文件内容&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#666666;">.</span><span style="color:#80A665;">createServer</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">request</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">请求路径和方式 </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">method</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//映射服务器文件路径</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fpath</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">读取失败</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">setHeader</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/html; charset=utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#BD976A;">data</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">8888</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">服务器运行在localhost:8888</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">server</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#999999;">.</span><span style="color:#59873A;">createServer</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">request</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">请求路径和方式 </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">method</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//映射服务器文件路径</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fpath</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">读取失败</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">setHeader</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/html; charset=utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B07D48;">data</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">8888</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">服务器运行在localhost:8888</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><p><strong>优化访问方式</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#666666;">.</span><span style="color:#80A665;">createServer</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">request</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">请求路径和方式 </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">method</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//让访问(/,/index.html,/stock-roolup/index.html)都可以得到响应</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/stock-rollup/index.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/index.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/stock-rollup</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">url</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/stock-rollup/index.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fpath: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fpath</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">fpath</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">读取失败</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">setHeader</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/html; charset=utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#BD976A;">data</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">8888</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">服务器运行在localhost:8888</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">server</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#999999;">.</span><span style="color:#59873A;">createServer</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">request</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">请求路径和方式 </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">method</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//让访问(/,/index.html,/stock-roolup/index.html)都可以得到响应</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/stock-rollup/index.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/index.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/stock-rollup</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">url</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/stock-rollup/index.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fpath: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fpath</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">fpath</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">读取失败</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">setHeader</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/html; charset=utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B07D48;">data</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">8888</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">服务器运行在localhost:8888</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h2 id="四、node-模块化" tabindex="-1">四、Node 模块化 <a class="header-anchor" href="#四、node-模块化" aria-label="Permalink to &quot;四、Node 模块化&quot;">​</a></h2><p>模块分为：内置模块、自定义模块、第三方模块</p><h3 id="_1-module-对象" tabindex="-1">1.module 对象 <a class="header-anchor" href="#_1-module-对象" aria-label="Permalink to &quot;1.module 对象&quot;">​</a></h3><p>在自定义模块中，<code>module.exports</code>模式是空对象，使用<code>module.exports</code>将模块内部成员共享</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220430114048249.png" alt="image-20220430114048249"></p><h3 id="_2-模块共享" tabindex="-1">2.模块共享 <a class="header-anchor" href="#_2-模块共享" aria-label="Permalink to &quot;2.模块共享&quot;">​</a></h3><p><code>m1.js</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">lisi</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">module-m1: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">module</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">lisi</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">module-m1: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">module</span><span style="color:#999999;">);</span></span></code></pre></div><p><code>m2.js</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./m1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">m1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./m1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">m1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span></span></code></pre></div><p>运行: <code>node m2.js</code></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220430120846611.png" alt="image-20220430120846611"></p><p>导出的对象以<code>module.expports</code>为准, 使用<code>require()</code>得到的永远是<code>module.expports</code>指向的对象</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//m1.js</span></span>
+<span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#666666;">={</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">lisi</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">20</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//m2.js</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./m1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">m1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//lisi</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">m1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//20</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//m1.js</span></span>
+<span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#999999;">={</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">lisi</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">20</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//m2.js</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./m1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">m1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//lisi</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">m1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//20</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220430121633293.png" alt="image-20220430121633293"></p><h2 id="五、模块加载机制" tabindex="-1">五、模块加载机制 <a class="header-anchor" href="#五、模块加载机制" aria-label="Permalink to &quot;五、模块加载机制&quot;">​</a></h2><ol><li><p>优先从缓存中加载，模块多次 require()只会执行一次</p></li><li><p>内置模块的加载优先级是最高的</p></li><li><p>自定义模块 require 时，必须在路径指定<code>./或../</code>开头的路径标识符</p></li></ol><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502220923072.png" alt="image-20220502220923072">4. 第三方模块记载机制</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502221028461.png" alt="image-20220502221028461"></p><ol start="5"><li><p>目录作为模块</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502221133208.png" alt="image-20220502221133208"></p></li></ol><h2 id="六、express-模块" tabindex="-1">六、Express 模块 <a class="header-anchor" href="#六、express-模块" aria-label="Permalink to &quot;六、Express 模块&quot;">​</a></h2><p><strong>前端两种服务器：</strong></p><p>​ Web 网站服务器：专门对外提供 Web 网页资源服务器</p><p>​ API 接口服务器：专门对外提供 API 接口服务器</p><h3 id="_1-express-创建服务器" tabindex="-1">1.Express 创建服务器 <a class="header-anchor" href="#_1-express-创建服务器" aria-label="Permalink to &quot;1.Express 创建服务器&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/zhj</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhj被访问</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhj被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">run 80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/zhj</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhj被访问</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhj被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">run 80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="_2-express-中间件" tabindex="-1">2.Express 中间件 <a class="header-anchor" href="#_2-express-中间件" aria-label="Permalink to &quot;2.Express 中间件&quot;">​</a></h3><ul><li><strong>概念</strong></li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501095630708.png" alt="image-20220501095630708"></p><ul><li><p><strong>定义与使用全局中间件</strong></p><blockquote><p>可以调用多个中间件对请求进行**<em>预处理</em>**</p></blockquote><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501095912439.png" alt="image-20220501095912439"></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">全局中间件被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">mw</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/zjj</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.name: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//zhangsan</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zjj被访问</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zjj被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">run 80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">全局中间件被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">mw</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/zjj</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.name: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//zhangsan</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zjj被访问</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zjj被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">run 80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><ul><li><p><strong>中间件本质</strong></p><p>next 函数可以流转关系转交给下一个中间件或路由</p></li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501100043506.png" alt="image-20220501100043506"></p><ul><li><strong>局部中间件</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">中间件mw1被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//在路由加一个参数,</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/mw1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">mw1</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.age: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mw1被访问</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mw1被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">...</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">中间件mw1被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//在路由加一个参数,</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/mw1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">mw1</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.age: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mw1被访问</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mw1被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">...</span></span></code></pre></div><ul><li><strong>多个局部中间件</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">全局中间件被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">中间件mw1被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">中间件mw2被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">mw</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/zhj</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.name: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhj被访问</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhj被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#758575DD;">//两种传参方式</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/mw1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,[</span><span style="color:#BD976A;">mw1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">mw2</span><span style="color:#666666;">],(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#758575DD;">//app.get(&#39;/mw1&#39;,mw1,mw2,(req,res)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.age: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//20</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mw1被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">run 80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">全局中间件被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">中间件mw1被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">中间件mw2被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">mw</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/zhj</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.name: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhj被访问</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhj被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#A0ADA0;">//两种传参方式</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/mw1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,[</span><span style="color:#B07D48;">mw1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">mw2</span><span style="color:#999999;">],(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#A0ADA0;">//app.get(&#39;/mw1&#39;,mw1,mw2,(req,res)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.age: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//20</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mw1被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">run 80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501101526777.png" alt="image-20220501101526777"></p><ul><li><strong>中间件注意事项</strong></li></ul><ol><li>一定要在路由之前注册中间件</li><li>可以连续调用多个中间件对请求进行处理</li><li>中间件函数必须有<code>next()</code>函数</li><li><code>next()</code>后不要写额外代码</li><li>连续调用的多个中间件共享 req 和 res 对象</li></ol><ul><li><strong>中间件分类</strong></li></ul><ol><li>应用级别中间件：绑定到 app 实例上的中间件</li><li>路由级别中间件：绑定到 router 实例上的中间件</li><li>错误级别中间件：捕获项目异常错误的中间件</li></ol><h2 id="七、编写接口" tabindex="-1">七、编写接口 <a class="header-anchor" href="#七、编写接口" aria-label="Permalink to &quot;七、编写接口&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//index.js</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./router</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//配置解析urlencoded请求体中间件(在路由中间件前使用)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">urlencoded</span><span style="color:#666666;">({</span><span style="color:#B8A965;">extended</span><span style="color:#666666;">:</span><span style="color:#4D9375;">false</span><span style="color:#666666;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//CORS解决跨域</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cors</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">cors</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cors</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">router</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">server running 127.0.0.1:80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//index.js</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./router</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//配置解析urlencoded请求体中间件(在路由中间件前使用)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">urlencoded</span><span style="color:#999999;">({</span><span style="color:#998418;">extended</span><span style="color:#999999;">:</span><span style="color:#1E754F;">false</span><span style="color:#999999;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//CORS解决跨域</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cors</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">cors</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cors</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">router</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">server running 127.0.0.1:80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//router.js</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">apiRouter</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">Router</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">apiRouter</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/get</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.query: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">GET 请求成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">success</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">data</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">apiRouter</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/post</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.body</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">POST 请求成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">success</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">data</span><span style="color:#666666;">:</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">apiRouter</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//router.js</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">apiRouter</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">Router</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">apiRouter</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/get</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.query: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">GET 请求成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">success</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">data</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">apiRouter</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/post</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.body</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">POST 请求成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">success</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">data</span><span style="color:#999999;">:</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">apiRouter</span></span></code></pre></div><h3 id="_1-cors-跨域资源共享" tabindex="-1">1. CORS 跨域资源共享 <a class="header-anchor" href="#_1-cors-跨域资源共享" aria-label="Permalink to &quot;1. CORS 跨域资源共享&quot;">​</a></h3><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502115641176.png" alt="image-20220502115641176"></p><h3 id="_2-cors-头部" tabindex="-1">2.CORS 头部 <a class="header-anchor" href="#_2-cors-头部" aria-label="Permalink to &quot;2.CORS 头部&quot;">​</a></h3><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502120846061.png" alt="image-20220502120846061"></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502120941415.png" alt="image-20220502120941415"></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502121028306.png" alt="image-20220502121028306"></p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502121159109.png" alt="image-20220502121159109"><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502120738921.png" alt="image-20220502120738921"></p><h2 id="八、node-连接数据库" tabindex="-1">八、Node 连接数据库 <a class="header-anchor" href="#八、node-连接数据库" aria-label="Permalink to &quot;八、Node 连接数据库&quot;">​</a></h2><h3 id="_1-配置-mysql-模块" tabindex="-1">1.配置 mysql 模块 <a class="header-anchor" href="#_1-配置-mysql-模块" aria-label="Permalink to &quot;1.配置 mysql 模块&quot;">​</a></h3><ul><li><p>安装 mysql 模块：`npm i mysql</p></li><li><p>连接数据库并测试 mysql 是否连接成功</p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mysql</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mysql</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">db</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mysql</span><span style="color:#666666;">.</span><span style="color:#80A665;">createPool</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">host</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">127.0.0.1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">user</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">password</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">database</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mydb01</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//测试</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">select 1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">res: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//res:  [ RowDataPacket { &#39;1&#39;: 1 } ]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mysql</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mysql</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">db</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mysql</span><span style="color:#999999;">.</span><span style="color:#59873A;">createPool</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">host</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">127.0.0.1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">user</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">password</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">database</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mydb01</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//测试</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">select 1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">res: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//res:  [ RowDataPacket { &#39;1&#39;: 1 } ]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="_2-查询数据" tabindex="-1">2.查询数据 <a class="header-anchor" href="#_2-查询数据" aria-label="Permalink to &quot;2.查询数据&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//查询语句</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">qstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">select * from users</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">qstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">res: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#758575DD;">/*查询结果:</span></span>
+<span class="line"><span style="color:#758575DD;">res:  [</span></span>
+<span class="line"><span style="color:#758575DD;">  RowDataPacket { id: 1, name: &#39;张三&#39;, age: 19 },</span></span>
+<span class="line"><span style="color:#758575DD;">  RowDataPacket { id: 2, name: &#39;李四&#39;, age: 22 }</span></span>
+<span class="line"><span style="color:#758575DD;">]</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//查询语句</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">qstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">select * from users</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">qstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">,(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">res: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*查询结果:</span></span>
+<span class="line"><span style="color:#A0ADA0;">res:  [</span></span>
+<span class="line"><span style="color:#A0ADA0;">  RowDataPacket { id: 1, name: &#39;张三&#39;, age: 19 },</span></span>
+<span class="line"><span style="color:#A0ADA0;">  RowDataPacket { id: 2, name: &#39;李四&#39;, age: 22 }</span></span>
+<span class="line"><span style="color:#A0ADA0;">]</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span></code></pre></div><h3 id="_3-插入数据" tabindex="-1">3.插入数据 <a class="header-anchor" href="#_3-插入数据" aria-label="Permalink to &quot;3.插入数据&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方式一:</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">zl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhaoliu</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">21</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//占位符的数量和表的列数需要一致,</span></span>
+<span class="line"><span style="color:#758575DD;">//否则报错ER_WRONG_VALUE_COUNT_ON_ROW: Column count doesn&#39;t match value count at row 1</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">istr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">insert into users values(?,?,?)</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">istr</span><span style="color:#666666;">,[</span><span style="color:#BD976A;">zl</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">,</span><span style="color:#BD976A;">zl</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">zl</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">],(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">res:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//res.affectedRows大于0表示插入成功</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#758575DD;">/* 返回结果:</span></span>
+<span class="line"><span style="color:#758575DD;">res: OkPacket {</span></span>
+<span class="line"><span style="color:#758575DD;">  fieldCount: 0,</span></span>
+<span class="line"><span style="color:#758575DD;">  affectedRows: 1,</span></span>
+<span class="line"><span style="color:#758575DD;">  insertId: 3,</span></span>
+<span class="line"><span style="color:#758575DD;">  serverStatus: 2,</span></span>
+<span class="line"><span style="color:#758575DD;">  warningCount: 0,</span></span>
+<span class="line"><span style="color:#758575DD;">  message: &#39;&#39;,</span></span>
+<span class="line"><span style="color:#758575DD;">  protocol41: true,</span></span>
+<span class="line"><span style="color:#758575DD;">  changedRows: 0</span></span>
+<span class="line"><span style="color:#758575DD;">}</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方式二:(便捷形式)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">istr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">insert into users set ?</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">istr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">zl</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#666666;">&gt;</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">插入成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方式一:</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">zl</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhaoliu</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">21</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//占位符的数量和表的列数需要一致,</span></span>
+<span class="line"><span style="color:#A0ADA0;">//否则报错ER_WRONG_VALUE_COUNT_ON_ROW: Column count doesn&#39;t match value count at row 1</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">istr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">insert into users values(?,?,?)</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">istr</span><span style="color:#999999;">,[</span><span style="color:#B07D48;">zl</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">,</span><span style="color:#B07D48;">zl</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">zl</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">],(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">res:</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//res.affectedRows大于0表示插入成功</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#A0ADA0;">/* 返回结果:</span></span>
+<span class="line"><span style="color:#A0ADA0;">res: OkPacket {</span></span>
+<span class="line"><span style="color:#A0ADA0;">  fieldCount: 0,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  affectedRows: 1,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  insertId: 3,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  serverStatus: 2,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  warningCount: 0,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  message: &#39;&#39;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  protocol41: true,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  changedRows: 0</span></span>
+<span class="line"><span style="color:#A0ADA0;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方式二:(便捷形式)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">istr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">insert into users set ?</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">istr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">zl</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#999999;">&gt;</span><span style="color:#2F798A;">0</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">插入成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,);</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="_4-更新数据" tabindex="-1">4.更新数据 <a class="header-anchor" href="#_4-更新数据" aria-label="Permalink to &quot;4.更新数据&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方式一:</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">laoqi</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ustr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">update  users set name=?,age=? where id=?</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ustr</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">res: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">更新成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#758575DD;">//方式二:(便捷形式)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ustr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">update  users set ? where id=?</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ustr</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">user</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">更新成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方式一:</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">laoqi</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ustr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">update  users set name=?,age=? where id=?</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ustr</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">res: </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">更新成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方式二:(便捷形式)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ustr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">update  users set ? where id=?</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ustr</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">user</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">更新成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h3 id="_5-删除数据" tabindex="-1">5.删除数据 <a class="header-anchor" href="#_5-删除数据" aria-label="Permalink to &quot;5.删除数据&quot;">​</a></h3><ul><li>硬删除</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">delete from users where id=?</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//只有一个占位符可省略数组括号</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dstr</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">硬删除成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">delete from users where id=?</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//只有一个占位符可省略数组括号</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dstr</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">硬删除成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><ul><li>软删除</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">deleted</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dstr</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">update users set ? where id = ?</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dstr</span><span style="color:#666666;">,[</span><span style="color:#BD976A;">user</span><span style="color:#666666;">,</span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">],(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">软删除成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">deleted</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dstr</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">update users set ? where id = ?</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dstr</span><span style="color:#999999;">,[</span><span style="color:#B07D48;">user</span><span style="color:#999999;">,</span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">],(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">软删除成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h2 id="九、身份认证" tabindex="-1">九、身份认证 <a class="header-anchor" href="#九、身份认证" aria-label="Permalink to &quot;九、身份认证&quot;">​</a></h2><h3 id="_1-http-协议的特性" tabindex="-1">1. http 协议的特性 <a class="header-anchor" href="#_1-http-协议的特性" aria-label="Permalink to &quot;1. http 协议的特性&quot;">​</a></h3><ul><li><strong>无状态性</strong>：多个请求之间相互独立，服务器不会保留每次 HTTP 请求的状态</li><li><strong>无连接</strong>：服务器挨个处理访问队列里的访问，处理完一个就关闭连接</li></ul><h3 id="_2-cookie-特性" tabindex="-1">2.Cookie 特性 <a class="header-anchor" href="#_2-cookie-特性" aria-label="Permalink to &quot;2.Cookie 特性&quot;">​</a></h3><ul><li>自动发送</li><li>域名独立</li><li>过期时限</li><li>4KB 限制</li></ul><blockquote><p>注意：Cookie 不具有安全性，可以伪造，所以不要用 Cookie 保存隐私数据。</p></blockquote><h3 id="_3-session-认证" tabindex="-1">3.Session 认证 <a class="header-anchor" href="#_3-session-认证" aria-label="Permalink to &quot;3.Session 认证&quot;">​</a></h3><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502193259029.png" alt="image-20220502193259029"></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//配置 Session 中间件</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">session</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express-session</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">session</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">secret</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">usersession</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">resave</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">saveUninitialized</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 托管静态页面</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">static</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./pages</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#758575DD;">// 解析 POST 提交过来的表单数据</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">urlencoded</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">extended</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 登录的 API 接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api/login</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断用户提交的登录信息是否正确</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">username</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">admin</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">password</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">000000</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">登录失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//将登录成功后的用户信息，保存到 Session 中(express-session配置后才有)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 用户的信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#BD976A;">islogin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 用户的登录状态</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">登录成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 获取用户姓名的接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api/username</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//从 Session 中获取用户的名称，响应给客户端</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#BD976A;">islogin</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fail</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">success</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">username</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">username</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 退出登录的接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api/logout</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//清空 Session 信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#80A665;">destroy</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">退出登录成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 调用 app.listen 方法，指定端口号并启动web服务器</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Express server running at http://127.0.0.1:80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//配置 Session 中间件</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">session</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express-session</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">session</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">secret</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">usersession</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">resave</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">saveUninitialized</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 托管静态页面</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">static</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./pages</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 解析 POST 提交过来的表单数据</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">urlencoded</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">extended</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#999999;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 登录的 API 接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api/login</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断用户提交的登录信息是否正确</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">username</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">admin</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">password</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">000000</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">登录失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//将登录成功后的用户信息，保存到 Session 中(express-session配置后才有)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 用户的信息</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#B07D48;">islogin</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 用户的登录状态</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">登录成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 获取用户姓名的接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api/username</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//从 Session 中获取用户的名称，响应给客户端</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#B07D48;">islogin</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fail</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">success</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">username</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">username</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 退出登录的接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api/logout</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//清空 Session 信息</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#59873A;">destroy</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">退出登录成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 调用 app.listen 方法，指定端口号并启动web服务器</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Express server running at http://127.0.0.1:80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><blockquote><p>Session 认证弊端：需要配合 Cookie，Cookie 不支持跨域，需要做额外配置，才能实现跨域 Session 认证。</p></blockquote><h3 id="_4-jwt-认证" tabindex="-1">4.JWT 认证 <a class="header-anchor" href="#_4-jwt-认证" aria-label="Permalink to &quot;4.JWT 认证&quot;">​</a></h3><p><strong>原理</strong>：服务端通多用户信息生成 Token，发送并保存在客户端，服务器通过还原 Token 来认证用户身份。</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502195232085.png" alt="image-20220502195232085"></p><p>JWT 组成部分：Header（头部）、Payload（有效载荷)、Signature（签名）。形式：<code>Header.Payload.Signature</code></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502195537066.png" alt="image-20220502195537066"></p><p><strong>JWT 使用</strong></p><p>安装<code>jsonwebtoken</code>、<code>express-jwt</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">jwt</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">jsonwebtoken</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">expressJWT</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express-jwt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 允许跨域资源共享</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cors</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">cors</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#80A665;">cors</span><span style="color:#666666;">())</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 解析 post 表单数据的中间件</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bodyParser</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">body-parser</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">bodyParser</span><span style="color:#666666;">.</span><span style="color:#80A665;">urlencoded</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">extended</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 02：定义 secret 密钥，建议将密钥命名为 secretKey</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">secretKey</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">coder8888</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 04：注册将 JWT 字符串解析还原成 JSON 对象的中间件</span></span>
+<span class="line"><span style="color:#758575DD;">// 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#80A665;">expressJWT</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">secret</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">secretKey</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}).</span><span style="color:#80A665;">unless</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">path</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#E6CC77;">\/</span><span style="color:#C4704F;">api</span><span style="color:#E6CC77;">\/</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 登录接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api/login</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 将 req.body 请求体中的数据，转存为 userinfo 常量</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userinfo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 登录失败</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">userinfo</span><span style="color:#666666;">.</span><span style="color:#BD976A;">username</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">admin</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userinfo</span><span style="color:#666666;">.</span><span style="color:#BD976A;">password</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">000000</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">400</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">登录失败！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 登录成功</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端</span></span>
+<span class="line"><span style="color:#758575DD;">   参数1：用户的信息对象</span></span>
+<span class="line"><span style="color:#758575DD;">   参数2：加密的秘钥</span></span>
+<span class="line"><span style="color:#758575DD;">   参数3：配置对象，可以配置当前 token 的有效期</span></span>
+<span class="line"><span style="color:#758575DD;">   记住：千万不要把密码加密到 token 字符中*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tokenStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">jwt</span><span style="color:#666666;">.</span><span style="color:#80A665;">sign</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">username</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userinfo</span><span style="color:#666666;">.</span><span style="color:#BD976A;">username</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">secretKey</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">expiresIn</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">30s</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">登录成功！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">token</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tokenStr</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 要发送给客户端的 token 字符串</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 这是一个有权限的 API 接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/admin/getinfo</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">获取用户信息成功！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">data</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 要发送给客户端的用户信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">((</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 这次错误是由 token 解析失败导致的</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">UnauthorizedError</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">401</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">无效的token</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">未知的错误</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">8888</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Express server running at http://127.0.0.1:8888</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">jwt</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">jsonwebtoken</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">expressJWT</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express-jwt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 允许跨域资源共享</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cors</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">cors</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#59873A;">cors</span><span style="color:#999999;">())</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 解析 post 表单数据的中间件</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bodyParser</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">body-parser</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">bodyParser</span><span style="color:#999999;">.</span><span style="color:#59873A;">urlencoded</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">extended</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#999999;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 02：定义 secret 密钥，建议将密钥命名为 secretKey</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">secretKey</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">coder8888</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 04：注册将 JWT 字符串解析还原成 JSON 对象的中间件</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#59873A;">expressJWT</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">secret</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">secretKey</span><span style="color:#393A34;"> </span><span style="color:#999999;">}).</span><span style="color:#59873A;">unless</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">path</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#BDA437;">\/</span><span style="color:#AB5E3F;">api</span><span style="color:#BDA437;">\/</span><span style="color:#B5695999;">/</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 登录接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api/login</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 将 req.body 请求体中的数据，转存为 userinfo 常量</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userinfo</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 登录失败</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">userinfo</span><span style="color:#999999;">.</span><span style="color:#B07D48;">username</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">admin</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userinfo</span><span style="color:#999999;">.</span><span style="color:#B07D48;">password</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">000000</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">400</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">登录失败！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 登录成功</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端</span></span>
+<span class="line"><span style="color:#A0ADA0;">   参数1：用户的信息对象</span></span>
+<span class="line"><span style="color:#A0ADA0;">   参数2：加密的秘钥</span></span>
+<span class="line"><span style="color:#A0ADA0;">   参数3：配置对象，可以配置当前 token 的有效期</span></span>
+<span class="line"><span style="color:#A0ADA0;">   记住：千万不要把密码加密到 token 字符中*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tokenStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">jwt</span><span style="color:#999999;">.</span><span style="color:#59873A;">sign</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">username</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userinfo</span><span style="color:#999999;">.</span><span style="color:#B07D48;">username</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">secretKey</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">expiresIn</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">30s</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">登录成功！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">token</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tokenStr</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 要发送给客户端的 token 字符串</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 这是一个有权限的 API 接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/admin/getinfo</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">获取用户信息成功！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">data</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 要发送给客户端的用户信息</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">((</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 这次错误是由 token 解析失败导致的</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">UnauthorizedError</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">401</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">无效的token</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">未知的错误</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">8888</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Express server running at http://127.0.0.1:8888</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/BackEnd/NodeJS/Node学习笔记.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Node大文件上传</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Node简单上传文件</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.html" "b/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.html"
new file mode 100644
index 00000000..fafe1add
--- /dev/null
+++ "b/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.html"
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Node 简单上传文件 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/BackEnd_NodeJS_Node简单上传文件.md.faa27b4e.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>NodeJS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/MongoDB%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>MongoDB笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node大文件上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node简单上传文件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Server</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Docker学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nginx学习笔记</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_BackEnd_NodeJS_Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-6b87e69f><div><h1 id="node-简单上传文件" tabindex="-1">Node 简单上传文件 <a class="header-anchor" href="#node-简单上传文件" aria-label="Permalink to &quot;Node 简单上传文件&quot;">​</a></h1><h2 id="vue-前端代码" tabindex="-1">Vue 前端代码 <a class="header-anchor" href="#vue-前端代码" aria-label="Permalink to &quot;Vue 前端代码&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">axios</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">axios</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onUpload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">formData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">FormData</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">formData</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fileName</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">.</span><span style="color:#BD976A;">files</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//fileName:后端接收的参数名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ formData ]-6</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">formData</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">axios</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">http://localhost:3000/upload/postFile</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">formData</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">headers</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">multipart/form-data</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ res ]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ err ]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">file</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">@change</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">onUpload</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">axios</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">axios</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onUpload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">formData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">FormData</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">formData</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fileName</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">.</span><span style="color:#B07D48;">files</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//fileName:后端接收的参数名</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ formData ]-6</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">formData</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">axios</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">http://localhost:3000/upload/postFile</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">formData</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">headers</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">multipart/form-data</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ res ]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ err ]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">file</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">@change</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">onUpload</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="express-后端代码" tabindex="-1">Express 后端代码 <a class="header-anchor" href="#express-后端代码" aria-label="Permalink to &quot;Express 后端代码&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">multer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">multer</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">Router</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/upload</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">multer</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">storage</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">multer</span><span style="color:#666666;">.</span><span style="color:#80A665;">diskStorage</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//设置文件存储位置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">destination</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cb</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">date</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">year</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">date</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFullYear</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">month</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">date</span><span style="color:#666666;">.</span><span style="color:#80A665;">getMonth</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">().</span><span style="color:#80A665;">padStart</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">day</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">date</span><span style="color:#666666;">.</span><span style="color:#80A665;">getDate</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dir</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./public/uploads/</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">year</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">month</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">day</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//判断目录是否存在，没有则创建</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">existsSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">mkdirSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">recursive</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//dir就是上传文件存放的目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">cb</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dir</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//设置文件名称</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">filename</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cb</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">// 获取原来的文件名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">originalname</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//获取文件前缀</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prefix</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldName</span><span style="color:#666666;">.</span><span style="color:#80A665;">startsWith</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldName</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">prefix</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">-</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Date</span><span style="color:#666666;">.</span><span style="color:#80A665;">now</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">extname</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">originalname</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//fileName就是上传文件的文件名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">cb</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileName</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">//访问地址为:localhost:3000/upload/index,操作界面,使用 Vue 时可不需要这个接口</span></span>
+<span class="line"><span style="color:#BD976A;">router</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/index</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//接口地址为:localhost:3000/upload/postFile ,input的name属性值为imgFile和upload.single(&quot;imgFile&quot;)对应</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">  &lt;form action=&quot;http://localhost:3000/upload/postFile&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  &lt;input id=&quot;postFile&quot; type=&quot;file&quot; name=&quot;fileName&quot; multiple&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  &lt;button type=&quot;submit&quot;&gt;上传&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;/form&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#BD976A;">router</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/postFile</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upload</span><span style="color:#666666;">.</span><span style="color:#80A665;">single</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fileName</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">json</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">file</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">server is running at http://localhost:3000</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">multer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">multer</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">Router</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/upload</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">multer</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">storage</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">multer</span><span style="color:#999999;">.</span><span style="color:#59873A;">diskStorage</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//设置文件存储位置</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">destination</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cb</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">date</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">year</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">date</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFullYear</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">month</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">date</span><span style="color:#999999;">.</span><span style="color:#59873A;">getMonth</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">().</span><span style="color:#59873A;">padStart</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">day</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">date</span><span style="color:#999999;">.</span><span style="color:#59873A;">getDate</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dir</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./public/uploads/</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">year</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">month</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">day</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//判断目录是否存在，没有则创建</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">existsSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">mkdirSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">recursive</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//dir就是上传文件存放的目录</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">cb</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dir</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//设置文件名称</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">filename</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cb</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">// 获取原来的文件名</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldName</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">originalname</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//获取文件前缀</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prefix</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldName</span><span style="color:#999999;">.</span><span style="color:#59873A;">startsWith</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldName</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldName</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileName</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">prefix</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">-</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Date</span><span style="color:#999999;">.</span><span style="color:#59873A;">now</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">extname</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">originalname</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//fileName就是上传文件的文件名</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">cb</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileName</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//访问地址为:localhost:3000/upload/index,操作界面,使用 Vue 时可不需要这个接口</span></span>
+<span class="line"><span style="color:#B07D48;">router</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/index</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//接口地址为:localhost:3000/upload/postFile ,input的name属性值为imgFile和upload.single(&quot;imgFile&quot;)对应</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">  &lt;form action=&quot;http://localhost:3000/upload/postFile&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  &lt;input id=&quot;postFile&quot; type=&quot;file&quot; name=&quot;fileName&quot; multiple&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  &lt;button type=&quot;submit&quot;&gt;上传&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;/form&gt;</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#B07D48;">router</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/postFile</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upload</span><span style="color:#999999;">.</span><span style="color:#59873A;">single</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fileName</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">json</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">file</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">server is running at http://localhost:3000</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><p><strong>可以借助接口调试工具测试或直接访问：<code>http://localhost:3000/upload/index</code></strong></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302131417657.png" alt="image-20230213141712478"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302131418470.png" alt="image-20230213141820443"></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/BackEnd/NodeJS/Node简单上传文件.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Node学习笔记</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Docker学习笔记</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.html"
new file mode 100644
index 00000000..b64a5514
--- /dev/null
+++ "b/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.html"
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/BackEnd_Server_Docker学习笔记.md.d29feca6.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>NodeJS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/MongoDB%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>MongoDB笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node大文件上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node简单上传文件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Server</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Docker学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nginx学习笔记</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_BackEnd_Server_Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-6b87e69f><div><h2 id="一、解决痛点" tabindex="-1">一、解决痛点 <a class="header-anchor" href="#一、解决痛点" aria-label="Permalink to &quot;一、解决痛点&quot;">​</a></h2><ol><li>环境不一致</li><li>版本不一样</li><li>配置不一致，配置费力费时</li></ol><blockquote><p>把源码+配置+环境+版本打包成镜像，装载在Dokcer容器引擎上，达到跨平台无缝接轨运作。 一次镜像，处处运行，从搬家到搬楼。</p></blockquote><h2 id="二、优点和应用" tabindex="-1">二、优点和应用 <a class="header-anchor" href="#二、优点和应用" aria-label="Permalink to &quot;二、优点和应用&quot;">​</a></h2><ol><li>便捷升级和快速扩容</li><li>更简单的系统运维</li><li>镜像小、更高效的计算资源</li><li>更快的应用交付和平缓迁移</li><li>利用宿主机内核，不需要加载操作系统OS内核</li></ol><h2 id="三、基本组成" tabindex="-1">三、基本组成 <a class="header-anchor" href="#三、基本组成" aria-label="Permalink to &quot;三、基本组成&quot;">​</a></h2><ol><li>镜像：一个只读的模板，用于创建容器，一个镜像可以创建多个容器。</li><li>容器：镜像创建出来的虚拟化运行环境容器实例（简易的Linux环境）。</li><li>仓库：集中存放镜像的场所，分为公开库和私有库。</li></ol><h2 id="四、工作原理" tabindex="-1">四、工作原理 <a class="header-anchor" href="#四、工作原理" aria-label="Permalink to &quot;四、工作原理&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032203456.png" alt=""><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032204209.png" alt=""></p><h2 id="五、centos安装docker" tabindex="-1">五、CentOS安装Docker <a class="header-anchor" href="#五、centos安装docker" aria-label="Permalink to &quot;五、CentOS安装Docker&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">sudo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">yum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">yum-utils</span></span>
+<span class="line"><span style="color:#80A665;">yum-config-manager</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--add-repo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo</span></span>
+<span class="line"><span style="color:#80A665;">sudo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">yum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker-ce</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker-ce-cli</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">containerd.io</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker-compose-plugin</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">version</span></span>
+<span class="line"><span style="color:#80A665;">systemctl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#启动</span></span>
+<span class="line"><span style="color:#80A665;">ps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-ef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">grep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">hello-world</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#测试</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">sudo</span><span style="color:#393A34;"> </span><span style="color:#B56959;">yum</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-y</span><span style="color:#393A34;"> </span><span style="color:#B56959;">yum-utils</span></span>
+<span class="line"><span style="color:#59873A;">yum-config-manager</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--add-repo</span><span style="color:#393A34;"> </span><span style="color:#B56959;">http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo</span></span>
+<span class="line"><span style="color:#59873A;">sudo</span><span style="color:#393A34;"> </span><span style="color:#B56959;">yum</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker-ce</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker-ce-cli</span><span style="color:#393A34;"> </span><span style="color:#B56959;">containerd.io</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker-compose-plugin</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">version</span></span>
+<span class="line"><span style="color:#59873A;">systemctl</span><span style="color:#393A34;"> </span><span style="color:#B56959;">start</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#启动</span></span>
+<span class="line"><span style="color:#59873A;">ps</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-ef</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">grep</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#B56959;">hello-world</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#测试</span></span></code></pre></div><h2 id="六、阿里云镜像加速" tabindex="-1">六、阿里云镜像加速 <a class="header-anchor" href="#六、阿里云镜像加速" aria-label="Permalink to &quot;六、阿里云镜像加速&quot;">​</a></h2><p><a href="https://blog.csdn.net/weixin_45764765/article/details/128367219" target="_blank" rel="noreferrer">参考教程</a></p><h2 id="七、常用命令" tabindex="-1">七、常用命令 <a class="header-anchor" href="#七、常用命令" aria-label="Permalink to &quot;七、常用命令&quot;">​</a></h2><h3 id="_1-docker" tabindex="-1">1. Docker <a class="header-anchor" href="#_1-docker" aria-label="Permalink to &quot;1. Docker&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">systemctl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">enable</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#开机启动</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">system</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">df</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#负载查看</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">systemctl</span><span style="color:#393A34;"> </span><span style="color:#B56959;">enable</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#开机启动</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">system</span><span style="color:#393A34;"> </span><span style="color:#B56959;">df</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#负载查看</span></span></code></pre></div><h3 id="_2-镜像" tabindex="-1">2. 镜像 <a class="header-anchor" href="#_2-镜像" aria-label="Permalink to &quot;2. 镜像&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">images</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#展示本地镜像 -a 所有，-q只显示ID</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">mongo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#搜索镜像</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">redis</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--limit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#展示Stars排名前五条</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">镜像名[:TAG]</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#下载镜像，没有版本号默认最新</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rmi</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">hello-world</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#强制删除镜像</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">images</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#展示本地镜像 -a 所有，-q只显示ID</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">search</span><span style="color:#393A34;"> </span><span style="color:#B56959;">mongo</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#搜索镜像</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">search</span><span style="color:#393A34;"> </span><span style="color:#B56959;">redis</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--limit</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#展示Stars排名前五条</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull</span><span style="color:#393A34;"> </span><span style="color:#B56959;">镜像名[:TAG]</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#下载镜像，没有版本号默认最新</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rmi</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-f</span><span style="color:#393A34;"> </span><span style="color:#B56959;">hello-world</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#强制删除镜像</span></span></code></pre></div><blockquote><p>虚悬镜像：构建或删除过程中产生的仓库名和标签都为none的镜像，没啥用建议删除 <code>docker image ls -f dangling=true</code> 删除：<code>docker image prune</code></p></blockquote><p><strong>生成新镜像</strong></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">agt-get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">update</span></span>
+<span class="line"><span style="color:#80A665;">apt-get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">vim</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">commit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-m=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vim is ok</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-a=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fxj</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">myubt:1.1</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">agt-get</span><span style="color:#393A34;"> </span><span style="color:#B56959;">update</span></span>
+<span class="line"><span style="color:#59873A;">apt-get</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-y</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#B56959;">vim</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">commit</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-m=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vim is ok</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-a=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fxj</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#B56959;">myubt:1.1</span></span></code></pre></div><p><strong>本地镜像推送到阿里云</strong></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#发布和拉取</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">login</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--username=yunzhishangfxj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">registry.cn-hangzhou.aliyuncs.com</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> [ImageId] registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:</span><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">镜像版本号</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:[镜像版本号]</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:1.1</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#记得带版本</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#发布和拉取</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">login</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--username=yunzhishangfxj</span><span style="color:#393A34;"> </span><span style="color:#B56959;">registry.cn-hangzhou.aliyuncs.com</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> [ImageId] registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:</span><span style="color:#999999;">[</span><span style="color:#393A34;">镜像版本号</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span><span style="color:#393A34;"> </span><span style="color:#B56959;">registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:[镜像版本号]</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;"> </span><span style="color:#B56959;">registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:1.1</span><span style="color:#393A34;">  </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#记得带版本</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032206243.png" alt=""></p><h3 id="_3-容器" tabindex="-1">3. 容器 <a class="header-anchor" href="#_3-容器" aria-label="Permalink to &quot;3. 容器&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#列出正在运行容器 -a -s</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ub01</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">ubuntu</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">#-p: 外部主机端口:docker容器端口 -P:随机分配主机端口映射到内部容器端口</span></span>
+<span class="line"><span style="color:#758575DD;">#-i:交互式 -t:输出伪终端 -d:后台运行 --name=&quot;容器名&quot; /bin/bash:指定命令解释器</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">exit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#退出，ctrl+q+p:退出但不停止</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">exec</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#重新进容器，exit退出不会停止容器</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id或容器名</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">restart</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">stop</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">kill</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#强制停止</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id或容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#删除已停止容器 、未停止 -f 强制删除</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">$(</span><span style="color:#80A665;">docker</span><span style="color:#C98A7D;"> ps </span><span style="color:#C99076;">-a</span><span style="color:#C98A7D;"> </span><span style="color:#C99076;">-q</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-q</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">xargs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#一次性删除多个再运行的</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ps</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#列出正在运行容器 -a -s</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ub01</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">  </span><span style="color:#B56959;">ubuntu</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">#-p: 外部主机端口:docker容器端口 -P:随机分配主机端口映射到内部容器端口</span></span>
+<span class="line"><span style="color:#A0ADA0;">#-i:交互式 -t:输出伪终端 -d:后台运行 --name=&quot;容器名&quot; /bin/bash:指定命令解释器</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">exit</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#退出，ctrl+q+p:退出但不停止</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">exec</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#重新进容器，exit退出不会停止容器</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">start</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id或容器名</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">restart</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">stop</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">kill</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#强制停止</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id或容器名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#删除已停止容器 、未停止 -f 强制删除</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-f</span><span style="color:#393A34;"> </span><span style="color:#999999;">$(</span><span style="color:#59873A;">docker</span><span style="color:#B56959;"> ps </span><span style="color:#A65E2B;">-a</span><span style="color:#B56959;"> </span><span style="color:#A65E2B;">-q</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ps</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-a</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-q</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">xargs</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#一次性删除多个再运行的</span></span></code></pre></div><h4 id="启动守护式" tabindex="-1">启动守护式 <a class="header-anchor" href="#启动守护式" aria-label="Permalink to &quot;启动守护式&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#前台交互启动</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#后台守护启动</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#前台交互启动</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#后台守护启动</span></span></code></pre></div><h4 id="查看容器日志" tabindex="-1">查看容器日志 <a class="header-anchor" href="#查看容器日志" aria-label="Permalink to &quot;查看容器日志&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">logs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看容器日志</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">inspect</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看容器内部细节</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">logs</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看容器日志</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">inspect</span><span style="color:#393A34;">  </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看容器内部细节</span></span></code></pre></div><h4 id="容器备份到主机" tabindex="-1">容器备份到主机 <a class="header-anchor" href="#容器备份到主机" aria-label="Permalink to &quot;容器备份到主机&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">cp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id:容器文件路径</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">目的主机路径</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#备份文件</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">xxx.tar</span><span style="color:#DBD7CAEE;">	 </span><span style="color:#758575DD;">#备份整个容器</span></span>
+<span class="line"><span style="color:#80A665;">cat</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ub.tar</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">恢复后的镜像名</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#从tar包中恢复成镜像</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">镜像id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#重新恢复容器</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">cp</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id:容器文件路径</span><span style="color:#393A34;"> </span><span style="color:#B56959;">目的主机路径</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#备份文件</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">export</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B56959;">xxx.tar</span><span style="color:#393A34;">	 </span><span style="color:#A0ADA0;">#备份整个容器</span></span>
+<span class="line"><span style="color:#59873A;">cat</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ub.tar</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">import</span><span style="color:#393A34;"> </span><span style="color:#B56959;">-</span><span style="color:#393A34;"> </span><span style="color:#B56959;">恢复后的镜像名</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#从tar包中恢复成镜像</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;">  </span><span style="color:#B56959;">镜像id</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#重新恢复容器</span></span></code></pre></div><h4 id="容器卷" tabindex="-1">容器卷 <a class="header-anchor" href="#容器卷" aria-label="Permalink to &quot;容器卷&quot;">​</a></h4><h2 id="八、dockerfile编写" tabindex="-1">八、<a href="https://docs.docker.com/engine/reference/builder/#from" target="_blank" rel="noreferrer">Dockerfile</a>编写 <a class="header-anchor" href="#八、dockerfile编写" aria-label="Permalink to &quot;八、[Dockerfile](https://docs.docker.com/engine/reference/builder/#from)编写&quot;">​</a></h2><div class="language-dockerfile vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">dockerfile</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#基础镜像，基于什么镜像什么版本作为模版 </span></span>
+<span class="line"><span style="color:#4D9375;">From</span><span style="color:#DBD7CAEE;"> xxx:1.1 </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#构建参数，运行时无效，可以构建时候临时修改变量（docker build --build-arg B=10）</span></span>
+<span class="line"><span style="color:#4D9375;">ARG</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#定义运行时环境变量，运行时一直生效后续可以引用， ARG变量可以传递给ENV</span></span>
+<span class="line"><span style="color:#4D9375;">ENV</span><span style="color:#DBD7CAEE;"> NGINX_HOME /usr/local/nginx</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定进入容器后的默认工作目录（落脚点）</span></span>
+<span class="line"><span style="color:#4D9375;">WORKDIR</span><span style="color:#DBD7CAEE;"> $NGINX_HOME</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#将宿主机的文件拷贝到镜像</span></span>
+<span class="line"><span style="color:#4D9375;">COPY</span><span style="color:#DBD7CAEE;"> &lt;src&gt;  &lt;dest&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#将主机目录下的文件拷贝到镜像，且会自动处理URL和解压tar压缩包</span></span>
+<span class="line"><span style="color:#4D9375;">ADD</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#Dockerfile构建时运行(docker build)， </span></span>
+<span class="line"><span style="color:#4D9375;">RUN</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#容器启动后(docker run)执行的脚本，多个命令时只会生效最后一个???</span></span>
+<span class="line"><span style="color:#758575DD;">#会被docker run之后的参数替换(/bin/bash)</span></span>
+<span class="line"><span style="color:#4D9375;">CMD</span><span style="color:#DBD7CAEE;">  [</span><span style="color:#C98A7D;">&quot;/etc/nginx/nginx.conf&quot;</span><span style="color:#DBD7CAEE;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#类似CMD,但是不会(docker run)后面命令覆盖，而且可以接收CMD传的参数</span></span>
+<span class="line"><span style="color:#4D9375;">ENTRYPOINT</span><span style="color:#DBD7CAEE;"> [</span><span style="color:#C98A7D;">&quot;nginx&quot;</span><span style="color:#DBD7CAEE;">,</span><span style="color:#C98A7D;">&quot;-c&quot;</span><span style="color:#DBD7CAEE;">] ==&gt; nginx -c /etc/nginx/nginx.conf</span></span>
+<span class="line"><span style="color:#758575DD;">#docker run nginx:test -c /etc/nginx/new.conf ==&gt; nginx -c /etc/nginx/new.conf</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">一般语句为：</span></span>
+<span class="line"><span style="color:#4D9375;">FROM</span><span style="color:#DBD7CAEE;"> WORKDIR COPY-ADD RUN CMD-ENTRYPOINT</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#暴露镜像的指定端口</span></span>
+<span class="line"><span style="color:#4D9375;">EXPOSE</span><span style="color:#DBD7CAEE;"> 9999</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定容器卷</span></span>
+<span class="line"><span style="color:#4D9375;">VOLUME</span><span style="color:#DBD7CAEE;"> [</span><span style="color:#C98A7D;">&quot;/var/www&quot;</span><span style="color:#DBD7CAEE;">, </span><span style="color:#C98A7D;">&quot;/var/log/apache2&quot;</span><span style="color:#DBD7CAEE;">, </span><span style="color:#C98A7D;">&quot;/etc/apache2&quot;</span><span style="color:#DBD7CAEE;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定元数据，标识容器便于查找</span></span>
+<span class="line"><span style="color:#4D9375;">LABEL</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#当前镜像构建的时候不会执行，基于当前镜像的镜像去构建的时候才会在FROM后执行</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">ONBUILD </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定容器使用什么信号，一般指定信号名</span></span>
+<span class="line"><span style="color:#4D9375;">STOPSIGNAL</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#检查容易的健康状态</span></span>
+<span class="line"><span style="color:#4D9375;">HEALTHCHECK</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定命令解释器 linux为/bin/sh，windows为cmd</span></span>
+<span class="line"><span style="color:#4D9375;">SHELL</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#用于指定RUN CMD等指令运行时的用户身份，不指定是root(用户名:用户组 或 USER 用户id:组id)</span></span>
+<span class="line"><span style="color:#4D9375;">USER</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#基础镜像，基于什么镜像什么版本作为模版 </span></span>
+<span class="line"><span style="color:#1E754F;">From</span><span style="color:#393A34;"> xxx:1.1 </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#构建参数，运行时无效，可以构建时候临时修改变量（docker build --build-arg B=10）</span></span>
+<span class="line"><span style="color:#1E754F;">ARG</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#定义运行时环境变量，运行时一直生效后续可以引用， ARG变量可以传递给ENV</span></span>
+<span class="line"><span style="color:#1E754F;">ENV</span><span style="color:#393A34;"> NGINX_HOME /usr/local/nginx</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定进入容器后的默认工作目录（落脚点）</span></span>
+<span class="line"><span style="color:#1E754F;">WORKDIR</span><span style="color:#393A34;"> $NGINX_HOME</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#将宿主机的文件拷贝到镜像</span></span>
+<span class="line"><span style="color:#1E754F;">COPY</span><span style="color:#393A34;"> &lt;src&gt;  &lt;dest&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#将主机目录下的文件拷贝到镜像，且会自动处理URL和解压tar压缩包</span></span>
+<span class="line"><span style="color:#1E754F;">ADD</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#Dockerfile构建时运行(docker build)， </span></span>
+<span class="line"><span style="color:#1E754F;">RUN</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#容器启动后(docker run)执行的脚本，多个命令时只会生效最后一个???</span></span>
+<span class="line"><span style="color:#A0ADA0;">#会被docker run之后的参数替换(/bin/bash)</span></span>
+<span class="line"><span style="color:#1E754F;">CMD</span><span style="color:#393A34;">  [</span><span style="color:#B56959;">&quot;/etc/nginx/nginx.conf&quot;</span><span style="color:#393A34;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#类似CMD,但是不会(docker run)后面命令覆盖，而且可以接收CMD传的参数</span></span>
+<span class="line"><span style="color:#1E754F;">ENTRYPOINT</span><span style="color:#393A34;"> [</span><span style="color:#B56959;">&quot;nginx&quot;</span><span style="color:#393A34;">,</span><span style="color:#B56959;">&quot;-c&quot;</span><span style="color:#393A34;">] ==&gt; nginx -c /etc/nginx/nginx.conf</span></span>
+<span class="line"><span style="color:#A0ADA0;">#docker run nginx:test -c /etc/nginx/new.conf ==&gt; nginx -c /etc/nginx/new.conf</span></span>
+<span class="line"><span style="color:#393A34;">一般语句为：</span></span>
+<span class="line"><span style="color:#1E754F;">FROM</span><span style="color:#393A34;"> WORKDIR COPY-ADD RUN CMD-ENTRYPOINT</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#暴露镜像的指定端口</span></span>
+<span class="line"><span style="color:#1E754F;">EXPOSE</span><span style="color:#393A34;"> 9999</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定容器卷</span></span>
+<span class="line"><span style="color:#1E754F;">VOLUME</span><span style="color:#393A34;"> [</span><span style="color:#B56959;">&quot;/var/www&quot;</span><span style="color:#393A34;">, </span><span style="color:#B56959;">&quot;/var/log/apache2&quot;</span><span style="color:#393A34;">, </span><span style="color:#B56959;">&quot;/etc/apache2&quot;</span><span style="color:#393A34;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定元数据，标识容器便于查找</span></span>
+<span class="line"><span style="color:#1E754F;">LABEL</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#当前镜像构建的时候不会执行，基于当前镜像的镜像去构建的时候才会在FROM后执行</span></span>
+<span class="line"><span style="color:#393A34;">ONBUILD </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定容器使用什么信号，一般指定信号名</span></span>
+<span class="line"><span style="color:#1E754F;">STOPSIGNAL</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#检查容易的健康状态</span></span>
+<span class="line"><span style="color:#1E754F;">HEALTHCHECK</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定命令解释器 linux为/bin/sh，windows为cmd</span></span>
+<span class="line"><span style="color:#1E754F;">SHELL</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#用于指定RUN CMD等指令运行时的用户身份，不指定是root(用户名:用户组 或 USER 用户id:组id)</span></span>
+<span class="line"><span style="color:#1E754F;">USER</span></span></code></pre></div><h2 id="九、docker网络" tabindex="-1">九、Docker网络 <a class="header-anchor" href="#九、docker网络" aria-label="Permalink to &quot;九、Docker网络&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ls</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看网络</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">inspect</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">网络名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看网络源数据</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">网络名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#删除网络</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">create</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">网络名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#新建网络</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">inspect</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">bridge</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">grep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看网卡信息</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;"># --network 不指定默认就是网桥模式</span></span>
+<span class="line"><span style="color:#758575DD;">#host主机模式(不能指定端口，共享宿主机的ip，没有自己的ip，http://宿主机ip:端口)</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">host</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">镜像名</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">none</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">镜像名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#只有lo网卡</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ls</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看网络</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">inspect</span><span style="color:#393A34;"> </span><span style="color:#B56959;">网络名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看网络源数据</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">网络名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#删除网络</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">create</span><span style="color:#393A34;"> </span><span style="color:#B56959;">网络名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#新建网络</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">inspect</span><span style="color:#393A34;"> </span><span style="color:#B56959;">bridge</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">grep</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker0</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看网卡信息</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;"># --network 不指定默认就是网桥模式</span></span>
+<span class="line"><span style="color:#A0ADA0;">#host主机模式(不能指定端口，共享宿主机的ip，没有自己的ip，http://宿主机ip:端口)</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">host</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器名</span><span style="color:#393A34;"> </span><span style="color:#B56959;">镜像名</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">none</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器名</span><span style="color:#393A34;"> </span><span style="color:#B56959;">镜像名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#只有lo网卡</span></span></code></pre></div><h4 id="共用网卡" tabindex="-1">共用网卡 <a class="header-anchor" href="#共用网卡" aria-label="Permalink to &quot;共用网卡&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">container:另一个容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">镜像名</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#758575DD;">#共用的容器关闭，这个容器网卡也没有啦</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">container:另一个容器名</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器名</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span><span style="color:#B56959;">镜像名</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#A0ADA0;">#共用的容器关闭，这个容器网卡也没有啦</span></span></code></pre></div><h4 id="自定义网络" tabindex="-1">自定义网络 <a class="header-anchor" href="#自定义网络" aria-label="Permalink to &quot;自定义网络&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#启动两个网桥模式容器</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8081</span><span style="color:#C98A7D;">:8080</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat81</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8082</span><span style="color:#C98A7D;">:8080</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat82</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#两个ip可以相互ping通，痛点：按域名ping不通</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#启动两个网桥模式容器</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8081</span><span style="color:#B56959;">:8080</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat81</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8082</span><span style="color:#B56959;">:8080</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat82</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#两个ip可以相互ping通，痛点：按域名ping不通</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8081</span><span style="color:#C98A7D;">:8080</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">my_network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat81</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8082</span><span style="color:#C98A7D;">:8080</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">my_network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat82</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat</span></span>
+<span class="line"><span style="color:#758575DD;">#ip、域名互ping都能通（维护好主机和ip的关系）</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8081</span><span style="color:#B56959;">:8080</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">my_network</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat81</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8082</span><span style="color:#B56959;">:8080</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">my_network</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat82</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat</span></span>
+<span class="line"><span style="color:#A0ADA0;">#ip、域名互ping都能通（维护好主机和ip的关系）</span></span></code></pre></div><h2 id="十、容器编排" tabindex="-1">十、<a href="https://docs.docker.com/compose/compose-file/" target="_blank" rel="noreferrer">容器编排</a> <a class="header-anchor" href="#十、容器编排" aria-label="Permalink to &quot;十、[容器编排](https://docs.docker.com/compose/compose-file/)&quot;">​</a></h2><blockquote><p>意义：集中快速管理多个容器</p></blockquote><h4 id="_1-安装compose" tabindex="-1">1. <a href="https://docs.docker.com/compose/install/" target="_blank" rel="noreferrer">安装Compose</a> <a class="header-anchor" href="#_1-安装compose" aria-label="Permalink to &quot;1. [安装Compose](https://docs.docker.com/compose/install/)&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">curl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-SL</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-o</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/usr/local/bin/docker-compose</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">curl</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-SL</span><span style="color:#393A34;"> </span><span style="color:#B56959;">https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-o</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/usr/local/bin/docker-compose</span></span></code></pre></div><h4 id="_2-常用命令" tabindex="-1">2. <a href="https://cloud.tencent.com/developer/article/1499032" target="_blank" rel="noreferrer">常用命令</a> <a class="header-anchor" href="#_2-常用命令" aria-label="Permalink to &quot;2. [常用命令](https://cloud.tencent.com/developer/article/1499032)&quot;">​</a></h4><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032205681.png" alt=""></p><h4 id="_3-安装-portainer" tabindex="-1">3. <a href="https://cloud.tencent.com/developer/article/2047779" target="_blank" rel="noreferrer">安装 Portainer</a> <a class="header-anchor" href="#_3-安装-portainer" aria-label="Permalink to &quot;3. [安装 Portainer](https://cloud.tencent.com/developer/article/2047779)&quot;">​</a></h4></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/BackEnd/Server/Docker学习笔记.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Node简单上传文件</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/BackEnd/Server/Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Nginx学习笔记</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.html"
new file mode 100644
index 00000000..89515e20
--- /dev/null
+++ "b/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.html"
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/BackEnd_Server_Nginx学习笔记.md.9d658cc4.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>NodeJS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/MongoDB%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>MongoDB笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node大文件上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Node简单上传文件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Server</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Docker学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/BackEnd/Server/Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nginx学习笔记</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_BackEnd_Server_Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-6b87e69f><div><h2 id="一、nginx安装" tabindex="-1">一、Nginx安装 <a class="header-anchor" href="#一、nginx安装" aria-label="Permalink to &quot;一、Nginx安装&quot;">​</a></h2><h3 id="_1-安装命令" tabindex="-1">1.安装命令 <a class="header-anchor" href="#_1-安装命令" aria-label="Permalink to &quot;1.安装命令&quot;">​</a></h3><table><thead><tr><th>Ubuntu</th><th>apt install nginx</th></tr></thead><tbody><tr><td>CentOS(Red Hat系列)</td><td>yum install nginx</td></tr></tbody></table><h3 id="_2-linux目录结构" tabindex="-1">2.Linux目录结构 <a class="header-anchor" href="#_2-linux目录结构" aria-label="Permalink to &quot;2.Linux目录结构&quot;">​</a></h3><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032207741.png" alt=""></p><h3 id="_3-基础命令" tabindex="-1">3.基础命令 <a class="header-anchor" href="#_3-基础命令" aria-label="Permalink to &quot;3.基础命令&quot;">​</a></h3><table><thead><tr><th>nginx -v/nginx -V</th><th>查看nginx版本等信息</th></tr></thead><tbody><tr><td>systemctl start/stop nginx</td><td>启动/停止nginx</td></tr><tr><td>systemctl status nginx</td><td>查看nginx运行状态</td></tr><tr><td>ps -ef | grep nginx</td><td>查看nginx进程</td></tr><tr><td>kill -QUIT 进程号</td><td></td></tr><tr><td>kill -TERM 进程号</td><td>从容停止</td></tr><tr><td>kill -TERM 进程号</td><td></td></tr><tr><td>kill -INT 进程号</td><td>快速停止</td></tr><tr><td>pkill -9 nginx</td><td>强制停止</td></tr></tbody></table><h2 id="编写配置" tabindex="-1">编写配置 <a class="header-anchor" href="#编写配置" aria-label="Permalink to &quot;编写配置&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">nginx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-t</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">#检查配置文件有没有问题</span></span>
+<span class="line"><span style="color:#80A665;">grep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-Ei</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">\{|\}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D;">nginx.conf</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#检查配置文件括号配对问题</span></span>
+<span class="line"><span style="color:#80A665;">nginx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">reload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#重载配置</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">nginx</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-t</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">#检查配置文件有没有问题</span></span>
+<span class="line"><span style="color:#59873A;">grep</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-Ei</span><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">\{|\}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">   </span><span style="color:#B56959;">nginx.conf</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#检查配置文件括号配对问题</span></span>
+<span class="line"><span style="color:#59873A;">nginx</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-s</span><span style="color:#393A34;"> </span><span style="color:#B56959;">reload</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#重载配置</span></span></code></pre></div><h2 id="日志分析器" tabindex="-1">日志分析器 <a class="header-anchor" href="#日志分析器" aria-label="Permalink to &quot;日志分析器&quot;">​</a></h2><h2 id="netstat命令" tabindex="-1"><a href="https://linux.cn/article-2434-1.html" target="_blank" rel="noreferrer">netstat命令</a> <a class="header-anchor" href="#netstat命令" aria-label="Permalink to &quot;[netstat命令](https://linux.cn/article-2434-1.html)&quot;">​</a></h2><h2 id="curl命令" tabindex="-1"><a href="https://blog.csdn.net/u013514928/article/details/102810250" target="_blank" rel="noreferrer">curl命令</a> <a class="header-anchor" href="#curl命令" aria-label="Permalink to &quot;[curl命令](https://blog.csdn.net/u013514928/article/details/102810250)&quot;">​</a></h2><h2 id="centos7联网" tabindex="-1">CentOS7联网 <a class="header-anchor" href="#centos7联网" aria-label="Permalink to &quot;CentOS7联网&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ip</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看网卡</span></span>
+<span class="line"><span style="color:#B8A965;">cd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/etc/sysconfig/network-scripts</span></span>
+<span class="line"><span style="color:#80A665;">vi</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ifcfg-ens160</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#把ONBOOT=no ===&gt; 改为yes</span></span>
+<span class="line"><span style="color:#80A665;">systemctl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">restart</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#重启网络</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ip</span><span style="color:#393A34;"> </span><span style="color:#B56959;">a</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看网卡</span></span>
+<span class="line"><span style="color:#998418;">cd</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/etc/sysconfig/network-scripts</span></span>
+<span class="line"><span style="color:#59873A;">vi</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ifcfg-ens160</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#把ONBOOT=no ===&gt; 改为yes</span></span>
+<span class="line"><span style="color:#59873A;">systemctl</span><span style="color:#393A34;"> </span><span style="color:#B56959;">restart</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#重启网络</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/BackEnd/Server/Nginx学习笔记.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Docker学习笔记</span></a></div><div class="pager" data-v-ef5dee53><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html"
new file mode 100644
index 00000000..84ba115f
--- /dev/null
+++ "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html"
@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Angular基础总结一 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Framework_Angular_Angular基础总结一.md.25af9886.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Angular</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结三</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结二</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>React</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>React基础总结一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vite原理学习</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue3补漏笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页与搜索条件记录并回显优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>列表最后一条数据删除处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Framework_Angular_Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-6b87e69f><div><h1 id="angular基础总结一" tabindex="-1">Angular基础总结一 <a class="header-anchor" href="#angular基础总结一" aria-label="Permalink to &quot;Angular基础总结一&quot;">​</a></h1><h2 id="一、ngmodule" tabindex="-1">一、NgModule <a class="header-anchor" href="#一、ngmodule" aria-label="Permalink to &quot;一、NgModule&quot;">​</a></h2><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>被@NgModule所装饰的类被称为angular module</p></div><h4 id="ngmodule元数据" tabindex="-1">@NgModule元数据 <a class="header-anchor" href="#ngmodule元数据" aria-label="Permalink to &quot;@NgModule元数据&quot;">​</a></h4><ul><li><strong>declarations</strong> —— 该模块的依赖项（该模块用到的组件、指令、管道）。</li><li><strong>imports</strong> —— 导入其他的ngModule。</li><li><strong>providers</strong> —— 提供各种服务。</li><li><strong>bootstrap</strong> —— 根组件，Angular 创建它并插入 index.html 宿主页面</li></ul><h4 id="declarations-数组" tabindex="-1">declarations 数组 <a class="header-anchor" href="#declarations-数组" aria-label="Permalink to &quot;declarations 数组&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">模块中使用的组件必须先在declarations</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">数组中声名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">一个组件只能被一个模块声名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">3</span><span style="color:#666666;">.</span><span style="color:#BD976A;">在declarations中的组件默认只能在当前模块中使用</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">在其他模块使用必须exports导出</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">模块中使用的组件必须先在declarations</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">数组中声名</span></span>
+<span class="line"><span style="color:#393A34;">2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">一个组件只能被一个模块声名</span></span>
+<span class="line"><span style="color:#393A34;">3</span><span style="color:#999999;">.</span><span style="color:#B07D48;">在declarations中的组件默认只能在当前模块中使用</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">在其他模块使用必须exports导出</span></span></code></pre></div><h4 id="imports-数组" tabindex="-1">imports 数组 <a class="header-anchor" href="#imports-数组" aria-label="Permalink to &quot;imports 数组&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">只会出现在</span><span style="color:#DBD7CAEE;">@</span><span style="color:#BD976A;">NgModule装饰器中</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">模块想要正常工作</span><span style="color:#DBD7CAEE;">，</span><span style="color:#80A665;">除了本身的依赖项</span><span style="color:#666666;">(</span><span style="color:#BD976A;">declarations</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">还可能需要其他模块导出的依赖项</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">3</span><span style="color:#666666;">.</span><span style="color:#BD976A;">只要是angular</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">module</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">都可以导入imports数组中</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">比如ng内置</span><span style="color:#DBD7CAEE;">、</span><span style="color:#BD976A;">第三方</span><span style="color:#DBD7CAEE;">、</span><span style="color:#BD976A;">自定义的模块</span><span style="color:#DBD7CAEE;">。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">只会出现在</span><span style="color:#393A34;">@</span><span style="color:#B07D48;">NgModule装饰器中</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#393A34;">2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">模块想要正常工作</span><span style="color:#393A34;">，</span><span style="color:#59873A;">除了本身的依赖项</span><span style="color:#999999;">(</span><span style="color:#B07D48;">declarations</span><span style="color:#999999;">)</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">还可能需要其他模块导出的依赖项</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#393A34;">3</span><span style="color:#999999;">.</span><span style="color:#B07D48;">只要是angular</span><span style="color:#393A34;"> </span><span style="color:#998418;">module</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">都可以导入imports数组中</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">比如ng内置</span><span style="color:#393A34;">、</span><span style="color:#B07D48;">第三方</span><span style="color:#393A34;">、</span><span style="color:#B07D48;">自定义的模块</span><span style="color:#393A34;">。</span></span></code></pre></div><h4 id="providers-数组" tabindex="-1">providers 数组 <a class="header-anchor" href="#providers-数组" aria-label="Permalink to &quot;providers 数组&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">该数组为当前模块提供一系列服务</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">该数组为当前模块提供一系列服务</span></span></code></pre></div><h4 id="bootstrap-数组" tabindex="-1">bootstrap 数组 <a class="header-anchor" href="#bootstrap-数组" aria-label="Permalink to &quot;bootstrap 数组&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">应用是通过引导根模块</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AppModule</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">来启动的</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">引导过程还会创建</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bootstrap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">数组中列出的组件</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">并把它们逐个插入到浏览器的</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">DOM</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">中</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#BD976A;">该数组中的每个组件</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">都作为组件树的根</span><span style="color:#DBD7CAEE;">（</span><span style="color:#BD976A;">根组件</span><span style="color:#DBD7CAEE;">），</span><span style="color:#80A665;">后续所有组件都是基于根组件的</span><span style="color:#666666;">(</span><span style="color:#BD976A;">如图</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#BD976A;">虽然也可以在宿主页面中放多个组件</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">但是大多数应用只有一个组件树</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">并且只从一个根组件开始引导</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#BD976A;">这个根组件通常叫做</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AppComponent</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">并且位于根模块的</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bootstrap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">数组中</span><span style="color:#DBD7CAEE;">。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">应用是通过引导根模块</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AppModule</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">来启动的</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">引导过程还会创建</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bootstrap</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">数组中列出的组件</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">并把它们逐个插入到浏览器的</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">DOM</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">中</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#B07D48;">该数组中的每个组件</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">都作为组件树的根</span><span style="color:#393A34;">（</span><span style="color:#B07D48;">根组件</span><span style="color:#393A34;">），</span><span style="color:#59873A;">后续所有组件都是基于根组件的</span><span style="color:#999999;">(</span><span style="color:#B07D48;">如图</span><span style="color:#999999;">)</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#B07D48;">虽然也可以在宿主页面中放多个组件</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">但是大多数应用只有一个组件树</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">并且只从一个根组件开始引导</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#B07D48;">这个根组件通常叫做</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AppComponent</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">并且位于根模块的</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bootstrap</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">数组中</span><span style="color:#393A34;">。</span></span></code></pre></div><details class="details custom-block"><summary>结构图</summary><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211101223938.png"></details><h2 id="二、模板基础语法" tabindex="-1">二、模板基础语法 <a class="header-anchor" href="#二、模板基础语法" aria-label="Permalink to &quot;二、模板基础语法&quot;">​</a></h2><h4 id="_1-模板表达式" tabindex="-1">1. 模板表达式 <a class="header-anchor" href="#_1-模板表达式" aria-label="Permalink to &quot;1. 模板表达式&quot;">​</a></h4><blockquote><p><strong>模版中还可以写些简单的逻辑，比如判断或运算</strong></p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;h1&gt;{{title}}&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;p&gt; sum : {{1 + 1}}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;p&gt;price: {{price * 0.7}}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;p&gt;与方法结合: {{price * 0.7 + getVal()}}.&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,    </span><span style="color:#758575DD;">//内联模板</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">h1 { color: yellow }</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">]    </span><span style="color:#758575DD;">//内联样式</span></span>
+<span class="line"><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">title</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">my-angular-title</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">price</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">getVal</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">number</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">33</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;h1&gt;{{title}}&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;p&gt; sum : {{1 + 1}}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;p&gt;price: {{price * 0.7}}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;p&gt;与方法结合: {{price * 0.7 + getVal()}}.&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B5695999;">`</span><span style="color:#999999;">,    </span><span style="color:#A0ADA0;">//内联模板</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">h1 { color: yellow }</span><span style="color:#B5695999;">`</span><span style="color:#999999;">]    </span><span style="color:#A0ADA0;">//内联样式</span></span>
+<span class="line"><span style="color:#999999;">})</span><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">title</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">my-angular-title</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">price</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">getVal</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">number</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">33</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><b>模板表达式遵循原则：</b></p><ul><li>非常简单</li><li>执行迅速</li><li>没有可见的副作用(即模版中的逻辑不能改变组件的变量)</li></ul></div><h4 id="_2-模板来源" tabindex="-1">2. 模板来源 <a class="header-anchor" href="#_2-模板来源" aria-label="Permalink to &quot;2. 模板来源&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.scss</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">] </span><span style="color:#758575DD;">//注意： styleUrls</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.scss</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">] </span><span style="color:#A0ADA0;">//注意： styleUrls</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_3-属性绑定" tabindex="-1">3. 属性绑定 <a class="header-anchor" href="#_3-属性绑定" aria-label="Permalink to &quot;3. 属性绑定&quot;">​</a></h4><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">../assets/images/zorro.jpg</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">madao</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span><span style="color:#758575DD;">&lt;!-- 静态绑定--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[src]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zorroSrc</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zorro</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;">     </span><span style="color:#758575DD;">&lt;!-- 简写形式--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bind-src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zorroSrc</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zorro</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">&lt;!-- 完整形式--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[disabled]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">isDisabled</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">click</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">button</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- zorroSrc、zorro、isDisabled均为变量 --&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">../assets/images/zorro.jpg</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">madao</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span><span style="color:#A0ADA0;">&lt;!-- 静态绑定--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[src]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zorroSrc</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zorro</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;">     </span><span style="color:#A0ADA0;">&lt;!-- 简写形式--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bind-src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zorroSrc</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zorro</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">&lt;!-- 完整形式--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[disabled]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">isDisabled</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">click</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">button</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- zorroSrc、zorro、isDisabled均为变量 --&gt;</span></span></code></pre></div><h4 id="_4-自定义属性绑定" tabindex="-1">4. 自定义属性绑定 <a class="header-anchor" href="#_4-自定义属性绑定" aria-label="Permalink to &quot;4. 自定义属性绑定&quot;">​</a></h4><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[attr.data-title]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">customTitle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一行文字</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[attr.title]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">customTitle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">测试自定义标题属性</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[attr.data-title]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">customTitle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一行文字</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[attr.title]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">customTitle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">测试自定义标题属性</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h4 id="_5-插值表达式属性绑定" tabindex="-1">5. 插值表达式属性绑定 <a class="header-anchor" href="#_5-插值表达式属性绑定" aria-label="Permalink to &quot;5. 插值表达式属性绑定&quot;">​</a></h4><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{{ picUrl }}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{{ picInfo }}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">&lt;!-- 不常用 --&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{{ picUrl }}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{{ picInfo }}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">&lt;!-- 不常用 --&gt;</span></span></code></pre></div><h4 id="_6-单个class样式绑定" tabindex="-1">6. 单个class样式绑定 <a class="header-anchor" href="#_6-单个class样式绑定" aria-label="Permalink to &quot;6. 单个class样式绑定&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-primary]=&quot;theme === &#39;primary&#39;&quot;&gt;Primary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-secondary]=&quot;true&quot;&gt;secondary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-success]=&quot;isSuccess&quot;&gt;success&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;&#39;啦啦啦&#39;&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;0&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;undefined&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">theme</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">primary</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">isSuccess</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-primary]=&quot;theme === &#39;primary&#39;&quot;&gt;Primary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-secondary]=&quot;true&quot;&gt;secondary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-success]=&quot;isSuccess&quot;&gt;success&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;&#39;啦啦啦&#39;&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;0&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;undefined&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">theme</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">primary</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">isSuccess</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_7-绑定多个class" tabindex="-1">7. 绑定多个class <a class="header-anchor" href="#_7-绑定多个class" aria-label="Permalink to &quot;7. 绑定多个class&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls&quot;&gt;btnCls&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls2&quot;&gt;btnCls2&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls3&quot;&gt;btnCls3&lt;/button&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!-- 也可以用内置指令ngClass --&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls&quot;&gt;btnCls&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls2&quot;&gt;btnCls2&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls3&quot;&gt;btnCls3&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">btnCls</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">btn btn-primary</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">btnCls2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">btn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">btn-success</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">btnCls3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#B8A965;">btn</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">btn-info</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#666666;">    };</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls&quot;&gt;btnCls&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls2&quot;&gt;btnCls2&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls3&quot;&gt;btnCls3&lt;/button&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">      &lt;!-- 也可以用内置指令ngClass --&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls&quot;&gt;btnCls&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls2&quot;&gt;btnCls2&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls3&quot;&gt;btnCls3&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">btnCls</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">btn btn-primary</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">btnCls2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">btn</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">btn-success</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">btnCls3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#998418;">btn</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">btn-info</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#999999;">    };</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_8-绑定单个style" tabindex="-1">8. 绑定单个style <a class="header-anchor" href="#_8-绑定单个style" aria-label="Permalink to &quot;8. 绑定单个style&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style.color]=&quot;&#39;##f60&#39;&quot;&gt;一段文字&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style.height]=&quot;&#39;50px&#39;&quot; [style.border]=&quot;&#39;1px solid&#39;&quot;&gt;设置高度&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style.height.px]=&quot;50&quot; [style.border]=&quot;&#39;1px solid&#39;&quot;&gt;设置高度&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style.color]=&quot;&#39;##f60&#39;&quot;&gt;一段文字&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style.height]=&quot;&#39;50px&#39;&quot; [style.border]=&quot;&#39;1px solid&#39;&quot;&gt;设置高度&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style.height.px]=&quot;50&quot; [style.border]=&quot;&#39;1px solid&#39;&quot;&gt;设置高度&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span></code></pre></div><h4 id="_9-绑定多个style" tabindex="-1">9. 绑定多个style <a class="header-anchor" href="#_9-绑定多个style" aria-label="Permalink to &quot;9. 绑定多个style&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style]=&quot;style1&quot;&gt;style1&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style]=&quot;style2&quot;&gt;style2&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style]=&quot;style3&quot;&gt;style3&lt;/p&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!-- 内置指令ngStyle绑定, 不推荐 --&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!--  &lt;p [ngStyle]=&quot;style1&quot;&gt;style1&lt;/p&gt;--&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!--  &lt;p [ngStyle]=&quot;style2&quot;&gt;style2&lt;/p&gt;--&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!-- ngStyle只接收对象 --&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [ngStyle]=&quot;style3&quot;&gt;style3&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">style1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">width: 200px;height: 50px;text-align: center;border: 1px solid;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">style2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">width</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">200px</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">height</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">50px</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text-align</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">border</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1px solid</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 有问题</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">style3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">200px</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">50px</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text-align</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1px solid</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  };</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style]=&quot;style1&quot;&gt;style1&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style]=&quot;style2&quot;&gt;style2&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style]=&quot;style3&quot;&gt;style3&lt;/p&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">      &lt;!-- 内置指令ngStyle绑定, 不推荐 --&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;!--  &lt;p [ngStyle]=&quot;style1&quot;&gt;style1&lt;/p&gt;--&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;!--  &lt;p [ngStyle]=&quot;style2&quot;&gt;style2&lt;/p&gt;--&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">      &lt;!-- ngStyle只接收对象 --&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [ngStyle]=&quot;style3&quot;&gt;style3&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">style1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">width: 200px;height: 50px;text-align: center;border: 1px solid;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">style2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">width</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">200px</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">height</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">50px</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text-align</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">border</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1px solid</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 有问题</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">style3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">200px</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">50px</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text-align</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1px solid</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  };</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><b>样式优先级</b></p><p>1.某个类或样式绑定越具体，它的优先级就越高</p><p>2.绑定总是优先于静态属性</p></div><h4 id="_10-绑定事件" tabindex="-1">10. 绑定事件 <a class="header-anchor" href="#_10-绑定事件" aria-label="Permalink to &quot;10. 绑定事件&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button (click)=&quot;onClick()&quot;&gt;CLICK&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;button  (click)=&quot;onClick1($event)&quot;&gt;Primary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">onClick</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">onClick</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">onClick1</span><span style="color:#666666;">(</span><span style="color:#BD976A;">event</span><span style="color:#666666;">: </span><span style="color:#5DA994;">MouseEvent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">onClick1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">event</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button (click)=&quot;onClick()&quot;&gt;CLICK&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;button  (click)=&quot;onClick1($event)&quot;&gt;Primary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">onClick</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">onClick</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">onClick1</span><span style="color:#999999;">(</span><span style="color:#B07D48;">event</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">MouseEvent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">onClick1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">event</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_11-输入与输出属性" tabindex="-1">11. 输入与输出属性 <a class="header-anchor" href="#_11-输入与输出属性" aria-label="Permalink to &quot;11. 输入与输出属性&quot;">​</a></h4><blockquote><p>输入属性：用于父组件传值给子组件（父传子）<code> @Input()</code></p><p>输出属性：用于子组件传值给父组件（子传父）<code>@Output()</code></p></blockquote><h4 id="输入属性-input" tabindex="-1">输入属性<code>@Input</code> <a class="header-anchor" href="#输入属性-input" aria-label="Permalink to &quot;输入属性`@Input`&quot;">​</a></h4><p>📝父组件</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;app-mycpn [item]=&quot;currentItem&quot;&gt;&lt;/app-mycpn&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;!-- &lt;app-mycpn item=&quot;我是传入的字符串&quot;&gt;&lt;/app-mycpn&gt;--&gt; &lt;!--静态属性可不用[]包裹 --&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">currentItem</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Television</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;app-mycpn [item]=&quot;currentItem&quot;&gt;&lt;/app-mycpn&gt;</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;!-- &lt;app-mycpn item=&quot;我是传入的字符串&quot;&gt;&lt;/app-mycpn&gt;--&gt; &lt;!--静态属性可不用[]包裹 --&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">currentItem</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Television</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝子组件</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-mycpn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">               Today&#39;s item: {{item}}</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;/p&gt;</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">MycpnComponent</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">   </span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">//@Input(&#39;aliasItem&#39;) item: string; 提供别名，item变量只可以在本组件使用</span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">//相当于对父组件传入的aliasItem变量进行重命名</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-mycpn</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">               Today&#39;s item: {{item}}</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;/p&gt;</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">MycpnComponent</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span><span style="color:#393A34;">   </span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//@Input(&#39;aliasItem&#39;) item: string; 提供别名，item变量只可以在本组件使用</span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//相当于对父组件传入的aliasItem变量进行重命名</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="输出属性-output" tabindex="-1">输出属性<code>@Output()</code> <a class="header-anchor" href="#输出属性-output" aria-label="Permalink to &quot;输出属性`@Output()`&quot;">​</a></h4><p>📝父组件</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;app-mycpn  (newItemEvent)=&quot;addItem($event)&quot;&gt;&lt;/app-mycpn&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">items</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">item1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">item2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">item3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">item4</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">addItem</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newItem</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">items</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newItem</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;app-mycpn  (newItemEvent)=&quot;addItem($event)&quot;&gt;&lt;/app-mycpn&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">items</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">item1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">item2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">item3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">item4</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">addItem</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newItem</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">items</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newItem</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝子组件</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-mycpn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;label&gt;Add an item: &lt;input ##newItem&gt;&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;button (click)=&quot;addNewItem(newItem.value)&quot;&gt;Add to parent&#39;s list&lt;/button&gt;</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">MycpnComponent</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newItemEvent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// @Output(&#39;newItem&#39;) newItemEvent = new EventEmitter&lt;string&gt;();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">addNewItem</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">newItemEvent</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-mycpn</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;label&gt;Add an item: &lt;input ##newItem&gt;&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;button (click)=&quot;addNewItem(newItem.value)&quot;&gt;Add to parent&#39;s list&lt;/button&gt;</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">MycpnComponent</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newItemEvent</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// @Output(&#39;newItem&#39;) newItemEvent = new EventEmitter&lt;string&gt;();</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">addNewItem</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">newItemEvent</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>还可以元数据中声名输入、输出属性。<a href="https://angular.cn/guide/styleguide##decorate-input-and-output-properties" target="_blank" rel="noreferrer">（不推荐）</a></p></blockquote><h2 id="三、组件样式" tabindex="-1">三、组件样式 <a class="header-anchor" href="#三、组件样式" aria-label="Permalink to &quot;三、组件样式&quot;">​</a></h2><h4 id="宿主选择器" tabindex="-1">宿主选择器 <a class="header-anchor" href="#宿主选择器" aria-label="Permalink to &quot;宿主选择器&quot;">​</a></h4><blockquote><p><code>:host</code>选择是是把宿主元素作为目标的唯一方式</p></blockquote><div class="language-md vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">它选中的是组件模板标签，比如&lt;app-child&gt;&lt;/app-child&gt;，相当于在父组件的style中使用标签选择器选择 app-child {}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">它选中的是组件模板标签，比如&lt;app-child&gt;&lt;/app-child&gt;，相当于在父组件的style中使用标签选择器选择 app-child {}</span></span></code></pre></div><p>当宿主标签上有 <code>active</code> 类名时生效</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">:</span><span style="color:#BD976A;">host</span><span style="color:#DBD7CAEE;">(</span><span style="color:#666666;">.</span><span style="color:#BD976A;">active</span><span style="color:#DBD7CAEE;">) </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> #</span><span style="color:#666666;">#</span><span style="color:#C99076;">ccc</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">:</span><span style="color:#B07D48;">host</span><span style="color:#393A34;">(</span><span style="color:#999999;">.</span><span style="color:#B07D48;">active</span><span style="color:#393A34;">) </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> #</span><span style="color:#999999;">#</span><span style="color:#A65E2B;">ccc</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="祖先选择器" tabindex="-1">祖先选择器 <a class="header-anchor" href="#祖先选择器" aria-label="Permalink to &quot;祖先选择器&quot;">​</a></h4><blockquote><p>当某个祖先元素有 CSS 类 light 时，才会把 background-color 样式应用到组件内部的所有 .title 元素中，找到根元素(html标签)为止</p></blockquote><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">:host-context(</span><span style="color:#666666;">.</span><span style="color:#BD976A;">light</span><span style="color:#DBD7CAEE;">) </span><span style="color:#666666;">.</span><span style="color:#BD976A;">title</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> #</span><span style="color:#666666;">#</span><span style="color:#C99076;">bfa</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">:host-context(</span><span style="color:#999999;">.</span><span style="color:#B07D48;">light</span><span style="color:#393A34;">) </span><span style="color:#999999;">.</span><span style="color:#B07D48;">title</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> #</span><span style="color:#999999;">#</span><span style="color:#A65E2B;">bfa</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="样式模块化" tabindex="-1">样式模块化 <a class="header-anchor" href="#样式模块化" aria-label="Permalink to &quot;样式模块化&quot;">​</a></h4><blockquote><p>在 @Component 的元数据中指定的样式只会对该组件的模板生效</p><p>组件的样式不会影响到子组件中的模板</p><p>组件的样式不会影响到投影内容</p></blockquote><h4 id="视图封装模式" tabindex="-1">视图封装模式 <a class="header-anchor" href="#视图封装模式" aria-label="Permalink to &quot;视图封装模式&quot;">​</a></h4><blockquote><p>ShadowDom -- <strong>不进不出</strong>，没有样式能进来，组件样式出不去, 就自己玩</p><p>Emulated --<strong>只进不出</strong>， 默认选项，全局样式能进来，组件样式出不去</p><p>None -- <strong>能进能出</strong>，此时组件的样式是全局生效的，注意与其他组件发生样式冲突，（对父组件样式也能生效）</p></blockquote></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Framework/Angular/Angular基础总结一.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><!----></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Angular基础总结三</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.html" "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.html"
new file mode 100644
index 00000000..690986cb
--- /dev/null
+++ "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.html"
@@ -0,0 +1,891 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Framework_Angular_Angular基础总结三.md.574a1956.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Angular</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结三</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结二</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>React</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>React基础总结一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vite原理学习</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue3补漏笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页与搜索条件记录并回显优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>列表最后一条数据删除处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Framework_Angular_Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-6b87e69f><div><h2 id="组件投影" tabindex="-1">组件投影 <a class="header-anchor" href="#组件投影" aria-label="Permalink to &quot;组件投影&quot;">​</a></h2><p>📝shadow.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">    shadow works!</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">select</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.head</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">select</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[attr-content]</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">select</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">section</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">    shadow works!</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-content</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">select</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.head</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-content</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">select</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[attr-content]</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-content</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">select</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">section</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝app.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">&lt;!-- 组件投影 --&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-shadow</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">head</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">头部投影内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">section</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">标签选择器投影内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">section</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr-content</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">自定义属性选择器投影内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">app-shadow</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">&lt;!-- 组件投影 --&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-shadow</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">head</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">头部投影内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">section</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">标签选择器投影内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">section</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr-content</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">自定义属性选择器投影内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">app-shadow</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>🎖️结果展示</p><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106153131.png"><h2 id="viewchild" tabindex="-1">ViewChild <a class="header-anchor" href="#viewchild" aria-label="Permalink to &quot;ViewChild&quot;">​</a></h2><p>📝parent.component.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ElementRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewChild</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ChildComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./child/child.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-parent</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./parent.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./parent.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ParentComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// @ViewChild(&#39;box&#39;,{static:true}) private box:ElementRef //获取dom</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// @ViewChild(ChildComponent,{static:true}) private instance:ChildComponent  //获取子组件方式一</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChild</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">childcomponent</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span><span style="color:#B8A965;">static</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">childInstance</span><span style="color:#666666;">:</span><span style="color:#5DA994;">ChildComponent</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//获取子组件实例方式二</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//执行秩序（1）</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;constructor&#39;,this.box);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;constructor&#39;,this.instance?.childdata);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;constructor&#39;,this.childInstance?.childdata);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">constructor</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childInstance</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//（2）</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;ngOnInit&#39;,this.box.nativeElement);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;ngOnInit&#39;,this.instance.childdata);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngOnInit</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childInstance</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;ngOnInit&#39;,this.childInstance.childdata);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//（3）在变更检测后执行，能保证获取到元素</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  console.log(&#39;ngAfterViewInit&#39;,this.box.nativeElement);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  console.log(&#39;ngAfterViewInit&#39;,this.instance.childdata);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterViewInit</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childInstance</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childdata</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ElementRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewChild</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ChildComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./child/child.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-parent</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./parent.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./parent.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ParentComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// @ViewChild(&#39;box&#39;,{static:true}) private box:ElementRef //获取dom</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// @ViewChild(ChildComponent,{static:true}) private instance:ChildComponent  //获取子组件方式一</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChild</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">childcomponent</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span><span style="color:#998418;">static</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">childInstance</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">ChildComponent</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//获取子组件实例方式二</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//执行秩序（1）</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;constructor&#39;,this.box);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;constructor&#39;,this.instance?.childdata);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;constructor&#39;,this.childInstance?.childdata);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">constructor</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childInstance</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//（2）</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;ngOnInit&#39;,this.box.nativeElement);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;ngOnInit&#39;,this.instance.childdata);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngOnInit</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childInstance</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;ngOnInit&#39;,this.childInstance.childdata);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//（3）在变更检测后执行，能保证获取到元素</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  console.log(&#39;ngAfterViewInit&#39;,this.box.nativeElement);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  console.log(&#39;ngAfterViewInit&#39;,this.instance.childdata);</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterViewInit</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childInstance</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childdata</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="viewchildren" tabindex="-1">ViewChildren <a class="header-anchor" href="#viewchildren" aria-label="Permalink to &quot;ViewChildren&quot;">​</a></h2><p>📝parent.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">&lt;!-- ViewChildren批量获取元素和组件 --&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">boxs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#boxs</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">mybox</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">boxs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#boxs</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">mybox</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">boxs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#boxs</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">mybox</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">&lt;!-- ViewChildren批量获取元素和组件 --&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">boxs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#boxs</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">mybox</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">boxs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#boxs</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">mybox</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">boxs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#boxs</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">mybox</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝parent.component.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">QueryList</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewChild</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewChildren</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ChildComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./child/child.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-parent</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./parent.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./parent.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ParentComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// ViewChildren批量获取元素和组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChildren</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ChildComponent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">childs</span><span style="color:#666666;">:</span><span style="color:#5DA994;">QueryList</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">ChildComponent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChildren</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">boxs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">childs1</span><span style="color:#666666;">:</span><span style="color:#5DA994;">QueryList</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">ChildComponent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//（3）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childs</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childs1</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//输出QueryList数组 </span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//QueryList中监听子组件变化的回调函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childs1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">.</span><span style="color:#80A665;">subscribe</span><span style="color:#666666;">((</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">QueryList</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewChild</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewChildren</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ChildComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./child/child.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-parent</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./parent.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./parent.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ParentComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// ViewChildren批量获取元素和组件</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChildren</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ChildComponent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">childs</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">QueryList</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">ChildComponent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChildren</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">boxs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">childs1</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">QueryList</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">ChildComponent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//（3）</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childs</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childs1</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//输出QueryList数组 </span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//QueryList中监听子组件变化的回调函数</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childs1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">.</span><span style="color:#59873A;">subscribe</span><span style="color:#999999;">((</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="contentchild" tabindex="-1">ContentChild <a class="header-anchor" href="#contentchild" aria-label="Permalink to &quot;ContentChild&quot;">​</a></h2><blockquote><p>获取投影中的dom元素、指令、组件</p></blockquote><p>📝content-parent.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-child</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">head</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#head</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">head</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">main</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">main</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">footer</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">footer</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">app-content-child</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-child</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">head</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#head</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">head</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">main</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">main</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">footer</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">footer</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">app-content-child</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝content-child.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">content-child works!</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">content-child works!</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝content-child.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ContentChild</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ElementRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ContentBoxComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../content-box/content-box.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-content-child</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./content-child.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./content-child.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ContentChildComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChild</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">head</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span><span style="color:#B8A965;">static</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#666666;">:</span><span style="color:#5DA994;">ElementRef</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//获取投影中的dom元素</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChild</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ContentBoxComponent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">contentbox</span><span style="color:#666666;">:</span><span style="color:#5DA994;">ElementRef</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//获取组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChild</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">cbox</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span><span style="color:#B8A965;">static</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cbox</span><span style="color:#666666;">:</span><span style="color:#5DA994;">ElementRef</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// 有多个只会获取第一个</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">head</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">contentbox</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cbox</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ContentChild</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ElementRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ContentBoxComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../content-box/content-box.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-content-child</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./content-child.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./content-child.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ContentChildComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChild</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">head</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span><span style="color:#998418;">static</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">ElementRef</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//获取投影中的dom元素</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChild</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ContentBoxComponent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">contentbox</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">ElementRef</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//获取组件</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChild</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">cbox</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span><span style="color:#998418;">static</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cbox</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">ElementRef</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// 有多个只会获取第一个</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">head</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">contentbox</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cbox</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="contentchildren" tabindex="-1">ContentChildren <a class="header-anchor" href="#contentchildren" aria-label="Permalink to &quot;ContentChildren&quot;">​</a></h2><blockquote><p><strong>用法类似ViewChildren, 批量获取投影中到组件或指令。</strong></p><p><strong>默认只批量获取直属组件，获取所有组件需开启：{ descendants: true }</strong></p></blockquote><p>📝content-parent.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">content-parent works!</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-child</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">container</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">app-content-child</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">content-parent works!</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-child</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">container</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">app-content-child</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝content-child.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#BD976A;">ContentChildren</span><span style="color:#666666;">,</span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">QueryList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ContentBoxComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../content-box/content-box.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-content-child</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./content-child.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./content-child.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ContentChildComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//ContentChildren没有{static:true}属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChildren</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ContentBoxComponent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cboxs</span><span style="color:#666666;">:</span><span style="color:#5DA994;">QueryList</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">ContentBoxComponent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChildren</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">cbox</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span><span style="color:#B8A965;">descendants</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cboxss</span><span style="color:#666666;">:</span><span style="color:#5DA994;">QueryList</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">ContentBoxComponent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cboxs</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//只获取直属投影组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cboxss</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//获取全部投影组件   </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#B07D48;">ContentChildren</span><span style="color:#999999;">,</span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">QueryList</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ContentBoxComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../content-box/content-box.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-content-child</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./content-child.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./content-child.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ContentChildComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//ContentChildren没有{static:true}属性</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChildren</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ContentBoxComponent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cboxs</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">QueryList</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">ContentBoxComponent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChildren</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">cbox</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span><span style="color:#998418;">descendants</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cboxss</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">QueryList</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">ContentBoxComponent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cboxs</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//只获取直属投影组件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cboxss</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//获取全部投影组件   </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="自定义管道" tabindex="-1">自定义管道 <a class="header-anchor" href="#自定义管道" aria-label="Permalink to &quot;自定义管道&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Pipe</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PipeTransform</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Pipe</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pipepow</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">PipepowPipe</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">PipeTransform</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">transform</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">exponent</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">):</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">number</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//value:底数    exponent:指数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">pow</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#80A665;">isNaN</span><span style="color:#666666;">(</span><span style="color:#BD976A;">exponent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">exponent</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Pipe</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PipeTransform</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Pipe</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pipepow</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">PipepowPipe</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">PipeTransform</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">transform</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">exponent</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">):</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">number</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//value:底数    exponent:指数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">pow</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#59873A;">isNaN</span><span style="color:#999999;">(</span><span style="color:#B07D48;">exponent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">exponent</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>在相应的Module中导入并使用</p></blockquote><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{8| pipepow}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{8| pipepow:3}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{value | pipepow:2}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Boost factor: </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">factor</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Normal power: </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">power</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{factor | pipepow:power}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{8| pipepow}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{8| pipepow:3}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{value | pipepow:2}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Boost factor: </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">factor</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Normal power: </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">power</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{factor | pipepow:power}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="非纯管道" tabindex="-1">非纯管道 <a class="header-anchor" href="#非纯管道" aria-label="Permalink to &quot;非纯管道&quot;">​</a></h2><blockquote><p>默认的管道都是纯的，Angular 会忽略复合对象中的变化，即管道只会检查原始值或对象引用</p></blockquote><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>可如果数组中的元素变化，增删改，由于引用没有变化，不会执行变更检测，所以不会执行管道的逻辑</p></div><details class="details custom-block"><summary>Pipe2Pipe</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Pipe</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PipeTransform</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Pipe</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pipe2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">pure</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//非纯管道开启方式一</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Pipe2Pipe</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">PipeTransform</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">transform</span><span style="color:#666666;">(</span><span style="color:#BD976A;">allheros</span><span style="color:#666666;">: </span><span style="color:#5DA994;">any</span><span style="color:#666666;">):</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">any</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//赛选会飞的英雄</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">allheros</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">canFly</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Pipe</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PipeTransform</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Pipe</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pipe2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">pure</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//非纯管道开启方式一</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Pipe2Pipe</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">PipeTransform</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">transform</span><span style="color:#999999;">(</span><span style="color:#B07D48;">allheros</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">):</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">any</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//赛选会飞的英雄</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">allheros</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">canFly</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><details class="details custom-block"><summary>AppComponent</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Hero</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">id</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">canFly</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">boolean</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">HEROES</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_0</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">盖伦</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">              },</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">赵信</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">              },</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">嘉文</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">              },</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">易大师</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">              },</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">泰达米尔</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#666666;">              }</span></span>
+<span class="line"><span style="color:#CB7676;">          </span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;input type=&quot;text&quot; #box (keyup.enter)=&quot;addHero(box.value)&quot; placeholder=&quot;hero name&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;button (click)=&quot;reset()&quot;&gt;Reset&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;div *ngFor=&quot;let hero of (heroes | pipe2)&quot;&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       {{hero.name}}</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">heroes</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Hero</span><span style="color:#666666;">[] =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">canFly</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">reset</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#80A665;">addHero</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">trim</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">         </span><span style="color:#758575DD;">// 不改变引用没有用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">heroes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({ </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">flier_</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;"> </span><span style="color:#CB7676;">+</span><span style="color:#666666;"> </span><span style="color:#BD976A;">Date</span><span style="color:#666666;">.</span><span style="color:#80A665;">now</span><span style="color:#666666;">(), </span><span style="color:#BD976A;">name</span><span style="color:#666666;">, </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">canFly</span><span style="color:#666666;"> });</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 开启非纯管道方式二、改变引用，触发变更检测</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// this.heroes = [...this.heroes,{id:&#39;flier&#39;+Date.now(),name,canFly:this.canFly}]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#80A665;">reset</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">heroes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">HEROES</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Hero</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">id</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">canFly</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">boolean</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">HEROES</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_0</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">盖伦</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">              },</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">赵信</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">              },</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">嘉文</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">              },</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">易大师</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">              },</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">泰达米尔</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#999999;">              }</span></span>
+<span class="line"><span style="color:#AB5959;">          </span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;input type=&quot;text&quot; #box (keyup.enter)=&quot;addHero(box.value)&quot; placeholder=&quot;hero name&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;button (click)=&quot;reset()&quot;&gt;Reset&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;div *ngFor=&quot;let hero of (heroes | pipe2)&quot;&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       {{hero.name}}</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">heroes</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Hero</span><span style="color:#999999;">[] =</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">canFly</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">reset</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#59873A;">addHero</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">trim</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">         </span><span style="color:#A0ADA0;">// 不改变引用没有用</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">heroes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({ </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">flier_</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;"> </span><span style="color:#AB5959;">+</span><span style="color:#999999;"> </span><span style="color:#B07D48;">Date</span><span style="color:#999999;">.</span><span style="color:#59873A;">now</span><span style="color:#999999;">(), </span><span style="color:#B07D48;">name</span><span style="color:#999999;">, </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">canFly</span><span style="color:#999999;"> });</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 开启非纯管道方式二、改变引用，触发变更检测</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// this.heroes = [...this.heroes,{id:&#39;flier&#39;+Date.now(),name,canFly:this.canFly}]</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#59873A;">reset</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">heroes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">HEROES</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">();</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h2 id="生命周期" tabindex="-1">生命周期 <a class="header-anchor" href="#生命周期" aria-label="Permalink to &quot;生命周期&quot;">​</a></h2><blockquote><p>生命周期函数：组件创建、组件更新、组件销毁的时候会触发的一系列的方法。</p><p>当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子函数。</p></blockquote><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106200214.png"><details class="details custom-block"><summary>所有生命周期钩子函数执行顺序</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterContentChecked</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterContentInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewChecked</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">DoCheck</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnChanges</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnDestroy</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">SimpleChanges</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">OnChanges</span><span style="color:#666666;">,</span><span style="color:#80A665;">DoCheck</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterContentInit</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">AfterContentChecked</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewChecked</span><span style="color:#666666;">,</span><span style="color:#80A665;">OnDestroy</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(){}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//组件初始化，写简单的逻辑和数据初始化操作，（获取不到最新输入属性值）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnChanges</span><span style="color:#666666;">(</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">: </span><span style="color:#5DA994;">SimpleChanges</span><span style="color:#666666;">):</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">changes </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">changes</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//可最早获取到输入属性最新值，输入属性更新时触发，但组件内部改变输入属性是不会触发的</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngOnInit </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//适合请求数据初始化组件，只调用一次</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngDoCheck</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngDoCheck </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterContentInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//在组件内容初始化之后调用，只调用一次。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterContentInit</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterContentChecked</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//组件每次检查内容时调用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterContentChecked </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//组件相应的视图初始化之后调用，只调用一次。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterViewInit </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewChecked</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//组件每次检查视图时调用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterViewChecked</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnDestroy</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//指令销毁前调用,适合理一些残存的状态操作：</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//取消订阅可观察对象和 DOM 事件、停止 interval 计时器、</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//反注册该指令在全局或应用服务中注册过的所有回调</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngOnDestroy</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterContentChecked</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterContentInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewChecked</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">DoCheck</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnChanges</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnDestroy</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">SimpleChanges</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">OnChanges</span><span style="color:#999999;">,</span><span style="color:#59873A;">DoCheck</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterContentInit</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">AfterContentChecked</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewChecked</span><span style="color:#999999;">,</span><span style="color:#59873A;">OnDestroy</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(){}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//组件初始化，写简单的逻辑和数据初始化操作，（获取不到最新输入属性值）</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnChanges</span><span style="color:#999999;">(</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">SimpleChanges</span><span style="color:#999999;">):</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">changes </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">changes</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//可最早获取到输入属性最新值，输入属性更新时触发，但组件内部改变输入属性是不会触发的</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngOnInit </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//适合请求数据初始化组件，只调用一次</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngDoCheck</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngDoCheck </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterContentInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//在组件内容初始化之后调用，只调用一次。</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterContentInit</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterContentChecked</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//组件每次检查内容时调用</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterContentChecked </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//组件相应的视图初始化之后调用，只调用一次。</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterViewInit </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewChecked</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//组件每次检查视图时调用</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterViewChecked</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnDestroy</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//指令销毁前调用,适合理一些残存的状态操作：</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//取消订阅可观察对象和 DOM 事件、停止 interval 计时器、</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//反注册该指令在全局或应用服务中注册过的所有回调</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngOnDestroy</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106202053.png"><blockquote><p>当组件、父组件发生变更检测后都会调用这三个钩子：</p><p>模板中的DOM事件触发就会进行变更检测（<code>&lt;input (input)=&quot;$event&quot;&gt;</code>）</p><p>ngDoCheck ngAfterContentChecked ngAfterViewChecked</p></blockquote><ul><li><strong>指令与组件共有的钩子</strong><ul><li>ngOnChanges</li><li>ngOnInit</li><li>ngDoCheck</li><li>ngOnDestroy</li></ul></li><li><strong>组件特有的钩子</strong><ul><li>ngAfterContentInit</li><li>ngAfterContentChecked</li><li>ngAfterViewInit</li><li>ngAfterViewChecked</li></ul></li></ul><h2 id="变更检测" tabindex="-1">变更检测 <a class="header-anchor" href="#变更检测" aria-label="Permalink to &quot;变更检测&quot;">​</a></h2><h2 id="默认策略下触发变更检测的时机" tabindex="-1">默认策略下触发变更检测的时机 <a class="header-anchor" href="#默认策略下触发变更检测的时机" aria-label="Permalink to &quot;默认策略下触发变更检测的时机&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">changeDetection</span><span style="color:#666666;">:</span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Default</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">changeDetection</span><span style="color:#999999;">:</span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Default</span></span></code></pre></div><ul><li>事件：页面 click、submit、mouse down……</li><li>XHR：从后端服务器拿到数据</li><li>定时器：setTimeout()、setInterval()</li></ul><blockquote><p>只要某个组件触发了以上中的一个，就会从顶级组件从上至下开始进行变更检测，每个组件都会进行变更检测，</p><p>检测组件中的值是否应该改变</p></blockquote><div class="warning custom-block"><p class="custom-block-title"><b>注意</b></p><p>已经检测完的组件，不允许在被子组件修改，(子组件不能修改检测完的父组件数据)，这就是单向数据流</p></div><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211101223945.png"><h2 id="onpush下触发变更检测时机" tabindex="-1">onPush下触发变更检测时机 <a class="header-anchor" href="#onpush下触发变更检测时机" aria-label="Permalink to &quot;onPush下触发变更检测时机&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">changeDetection</span><span style="color:#666666;">:</span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">.</span><span style="color:#BD976A;">OnPush</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">changeDetection</span><span style="color:#999999;">:</span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">.</span><span style="color:#B07D48;">OnPush</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>onPush策略会把组件从组件树中剥离出去，他和他的子组件都不会检测了；</p><p>定时器会触发变更检测，但是依然会跳过onPush策略组件。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>组件的@Input引用发生变化。</li><li>组件的 DOM 事件，包括它子组件的 DOM 事件，比如 click、submit、mouse down。</li><li>Observable 订阅事件，同时设置 Async pipe。</li><li>手动调用：ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()方法</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">markForCheck</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//把该视图显式标记为已更改（脏的），以便它下一轮再次进行检查。</span></span>
+<span class="line"><span style="color:#80A665;">detectChanges</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。(强行检测)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">markForCheck</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//把该视图显式标记为已更改（脏的），以便它下一轮再次进行检查。</span></span>
+<span class="line"><span style="color:#59873A;">detectChanges</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。(强行检测)</span></span></code></pre></div></div><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106210242.png"><h2 id="动态组件" tabindex="-1">动态组件 <a class="header-anchor" href="#动态组件" aria-label="Permalink to &quot;动态组件&quot;">​</a></h2><blockquote><p>如果说，之前在模版中调用的组件为静态组件（比如：app-xxx）</p><p>那么不用在模版里声明，而是通过ts动态插入到dom中到组件，可以视为动态组件</p></blockquote><p>📝alert.component.ts:</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Output</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EventEmitter</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AlertTheme</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">primary</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">danger</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">warning</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AlertOption</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">content</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">theme</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">AlertTheme</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-alert</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;div [class]=&quot;wrapCls&quot; role=&quot;alert&quot;&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;span class=&quot;content&quot;&gt;{{ options.content }}&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;i class=&quot;close&quot; (click)=&quot;closed.emit()&quot;&gt;×&lt;/i&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    .close {</span></span>
+<span class="line"><span style="color:#C98A7D;">      display: block;</span></span>
+<span class="line"><span style="color:#C98A7D;">      width: 20px;</span></span>
+<span class="line"><span style="color:#C98A7D;">      height: 20px;</span></span>
+<span class="line"><span style="color:#C98A7D;">      position: absolute;</span></span>
+<span class="line"><span style="color:#C98A7D;">      right: 10px;</span></span>
+<span class="line"><span style="color:#C98A7D;">      top: 50%;</span></span>
+<span class="line"><span style="color:#C98A7D;">      margin-top: -10px;</span></span>
+<span class="line"><span style="color:#C98A7D;">      cursor: pointer;</span></span>
+<span class="line"><span style="color:#C98A7D;">    }</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">changeDetection</span><span style="color:#666666;">: </span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">.</span><span style="color:#BD976A;">OnPush</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AlertComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">options</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Required</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">AlertOption</span><span style="color:#666666;">&gt; =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">theme</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">primary</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">closed</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">void</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">wrapCls</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">string</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">alert alert-</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">options</span><span style="color:#666666;">.</span><span style="color:#BD976A;">theme</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;"> fixed-top</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">setOptions</span><span style="color:#666666;">(</span><span style="color:#BD976A;">options</span><span style="color:#666666;">: </span><span style="color:#5DA994;">AlertOption</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">options</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= { ...</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">options</span><span style="color:#666666;">, ...</span><span style="color:#BD976A;">options</span><span style="color:#666666;"> };</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Output</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EventEmitter</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AlertTheme</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">primary</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">danger</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">warning</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AlertOption</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">content</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">theme</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">AlertTheme</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-alert</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;div [class]=&quot;wrapCls&quot; role=&quot;alert&quot;&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;span class=&quot;content&quot;&gt;{{ options.content }}&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;i class=&quot;close&quot; (click)=&quot;closed.emit()&quot;&gt;×&lt;/i&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    .close {</span></span>
+<span class="line"><span style="color:#B56959;">      display: block;</span></span>
+<span class="line"><span style="color:#B56959;">      width: 20px;</span></span>
+<span class="line"><span style="color:#B56959;">      height: 20px;</span></span>
+<span class="line"><span style="color:#B56959;">      position: absolute;</span></span>
+<span class="line"><span style="color:#B56959;">      right: 10px;</span></span>
+<span class="line"><span style="color:#B56959;">      top: 50%;</span></span>
+<span class="line"><span style="color:#B56959;">      margin-top: -10px;</span></span>
+<span class="line"><span style="color:#B56959;">      cursor: pointer;</span></span>
+<span class="line"><span style="color:#B56959;">    }</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">changeDetection</span><span style="color:#999999;">: </span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">.</span><span style="color:#B07D48;">OnPush</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">options</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Required</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">AlertOption</span><span style="color:#999999;">&gt; =</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">theme</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">primary</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">closed</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">void</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">get</span><span style="color:#393A34;"> </span><span style="color:#59873A;">wrapCls</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">string</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">alert alert-</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">options</span><span style="color:#999999;">.</span><span style="color:#B07D48;">theme</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;"> fixed-top</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">setOptions</span><span style="color:#999999;">(</span><span style="color:#B07D48;">options</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">AlertOption</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">options</span><span style="color:#393A34;"> </span><span style="color:#999999;">= { ...</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">options</span><span style="color:#999999;">, ...</span><span style="color:#B07D48;">options</span><span style="color:#999999;"> };</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>调用 <code>alert.component</code></p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">ApplicationRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ComponentFactoryResolver</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ComponentRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EmbeddedViewRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Injector</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">AlertComponent</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../../components/alert/alert.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-show-data</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./show-data.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./show-data.component.scss</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ShowDataComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">container</span><span style="color:#666666;">: </span><span style="color:#5DA994;">AlertComponent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ComponentRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">AlertComponent</span><span style="color:#666666;">&gt;;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfr</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ComponentFactoryResolver</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inject</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Injector</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">appRef</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ApplicationRef</span></span>
+<span class="line"><span style="color:#666666;">  )</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">showAlert</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">getContainer</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 调用组件的某个方法执行逻辑，比如下面这个传参</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#666666;">.</span><span style="color:#80A665;">setOptions</span><span style="color:#666666;">({ </span><span style="color:#B8A965;">content</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">一段提示</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">, </span><span style="color:#B8A965;">theme</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">warning</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;"> });</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getContainer</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AlertComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 创建指定类型的组件工厂（生产指定类型的组件）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const </span><span style="color:#BD976A;">factory</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cfr</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolveComponentFactory</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">AlertComponent</span><span style="color:#666666;">&gt;(</span><span style="color:#BD976A;">AlertComponent</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 根据指定的类型，创建组件的示例</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">factory</span><span style="color:#666666;">.</span><span style="color:#80A665;">create</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inject</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 将组件试图添加到试图树中，以激活变更检测</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">appRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">attachView</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hostView</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 将组件到模版(包括app-alert标签)，添加到body最后</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#80A665;">appendChild</span><span style="color:#666666;">((</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hostView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">EmbeddedViewRef</span><span style="color:#666666;">&lt;{}&gt;).</span><span style="color:#BD976A;">rootNodes</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">HTMLElement</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 监听组件销毁事件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">onDestroy</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">componentRef destory</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 获取组件实例，相当于用@ViewChild获取子组件一样</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const </span><span style="color:#666666;">{</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">instance</span><span style="color:#CB7676;"> </span><span style="color:#666666;">}</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 监听组件到output事件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">instance</span><span style="color:#666666;">.</span><span style="color:#BD976A;">closed</span><span style="color:#666666;">.</span><span style="color:#80A665;">subscribe</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">destroy</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">instance</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">ApplicationRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ComponentFactoryResolver</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ComponentRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EmbeddedViewRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Injector</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">AlertComponent</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../../components/alert/alert.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-show-data</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./show-data.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./show-data.component.scss</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ShowDataComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">container</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ComponentRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#999999;">&gt;;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfr</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ComponentFactoryResolver</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inject</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Injector</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">appRef</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ApplicationRef</span></span>
+<span class="line"><span style="color:#999999;">  )</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">showAlert</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">getContainer</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 调用组件的某个方法执行逻辑，比如下面这个传参</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#999999;">.</span><span style="color:#59873A;">setOptions</span><span style="color:#999999;">({ </span><span style="color:#998418;">content</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">一段提示</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">, </span><span style="color:#998418;">theme</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">warning</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;"> });</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getContainer</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 创建指定类型的组件工厂（生产指定类型的组件）</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const </span><span style="color:#B07D48;">factory</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cfr</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolveComponentFactory</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#999999;">&gt;(</span><span style="color:#B07D48;">AlertComponent</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 根据指定的类型，创建组件的示例</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">factory</span><span style="color:#999999;">.</span><span style="color:#59873A;">create</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inject</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 将组件试图添加到试图树中，以激活变更检测</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">appRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">attachView</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hostView</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 将组件到模版(包括app-alert标签)，添加到body最后</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#59873A;">appendChild</span><span style="color:#999999;">((</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hostView</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">as</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">EmbeddedViewRef</span><span style="color:#999999;">&lt;{}&gt;).</span><span style="color:#B07D48;">rootNodes</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">as</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">HTMLElement</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 监听组件销毁事件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">onDestroy</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">componentRef destory</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 获取组件实例，相当于用@ViewChild获取子组件一样</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const </span><span style="color:#999999;">{</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">instance</span><span style="color:#AB5959;"> </span><span style="color:#999999;">}</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 监听组件到output事件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">instance</span><span style="color:#999999;">.</span><span style="color:#B07D48;">closed</span><span style="color:#999999;">.</span><span style="color:#59873A;">subscribe</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">destroy</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">instance</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>v9和v10，动态组件都不需要entryComponents了，当然写了也没有问题 从v11开始，entryComponents可能被删除 v8及以前，动态组件一定要声明entryComponents</p></blockquote><h2 id="ngtemplateoutlet指令" tabindex="-1">NgTemplateOutlet指令 <a class="header-anchor" href="#ngtemplateoutlet指令" aria-label="Permalink to &quot;NgTemplateOutlet指令&quot;">​</a></h2><blockquote><p>NgTemplateOutlet是一个结构型指令</p></blockquote><p>📝app.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-tmp-outlet</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[render]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">mycontent</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-tmp-outlet</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#mycontent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段父组件传入的内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">&lt;!--使用tem-outlet组件中的数据--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#mycontent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-context</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-val</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段父组件传入的内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">使用outlet中的context:{{context}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">使用outlet中的value:{{val}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-tmp-outlet</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[render]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">mycontent</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-tmp-outlet</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#mycontent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段父组件传入的内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!--使用tem-outlet组件中的数据--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#mycontent</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-context</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-val</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段父组件传入的内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">使用outlet中的context:{{context}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">使用outlet中的value:{{val}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝tmp-outlet.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">tmp-outlet works!</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutlet]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">render || default</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-container</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">&lt;!--传递出去tem-outlet组件中的数据--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutlet]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">render || default</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutletContext]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">myContext</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-container</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- &lt;ng-container *ngTemplateOutlet=&quot;render || default ;context:myContext&quot;&gt;&lt;/ng-container&gt;简写 --&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">&lt;!--ng-template使用效果一样 --&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutlet]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">render || default</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutletContext]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">myContext</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">*ngTemplateOutlet</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">render || default ;context:myContext</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#default</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段组价默认的内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- context在内部ng-template也可以绑定 --&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-context</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-val</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段组价默认的内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> context:{{context}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> value:{{val}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">tmp-outlet works!</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-container</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutlet]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">render || default</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-container</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!--传递出去tem-outlet组件中的数据--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-container</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutlet]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">render || default</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutletContext]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">myContext</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-container</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- &lt;ng-container *ngTemplateOutlet=&quot;render || default ;context:myContext&quot;&gt;&lt;/ng-container&gt;简写 --&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!--ng-template使用效果一样 --&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutlet]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">render || default</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutletContext]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">myContext</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">*ngTemplateOutlet</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">render || default ;context:myContext</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#default</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段组价默认的内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- context在内部ng-template也可以绑定 --&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#default</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-context</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-val</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段组价默认的内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> context:{{context}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> value:{{val}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝tmp-outlet.component.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-tmp-outlet</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./tmp-outlet.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./tmp-outlet.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">TmpOutletComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">render</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">myContext</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">$implicit</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">tmp-outlet组件里的context</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">, </span><span style="color:#B8A965;">value</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">tmp-outlet组件里的value</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-tmp-outlet</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./tmp-outlet.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./tmp-outlet.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">TmpOutletComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">render</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">myContext</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">$implicit</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">tmp-outlet组件里的context</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">, </span><span style="color:#998418;">value</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">tmp-outlet组件里的value</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Framework/Angular/Angular基础总结三.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Angular基础总结一</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Angular基础总结二</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.html" "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.html"
new file mode 100644
index 00000000..f4fb78cc
--- /dev/null
+++ "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.html"
@@ -0,0 +1,783 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Framework_Angular_Angular基础总结二.md.0a8462a7.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Angular</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结三</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结二</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>React</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>React基础总结一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vite原理学习</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue3补漏笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页与搜索条件记录并回显优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>列表最后一条数据删除处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Framework_Angular_Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-6b87e69f><div><h2 id="双向绑定" tabindex="-1">双向绑定 <a class="header-anchor" href="#双向绑定" aria-label="Permalink to &quot;双向绑定&quot;">​</a></h2><h3 id="_1-基本双向绑定" tabindex="-1">1. 基本双向绑定 <a class="header-anchor" href="#_1-基本双向绑定" aria-label="Permalink to &quot;1. 基本双向绑定&quot;">​</a></h3><p><strong>方法一：</strong></p><p>📝父组件：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;app-sbind [size]=&quot;fontSizePx&quot; (change)=&quot; fontSizePx = $event&quot;&gt;&lt;/app-sbind&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">&lt;p [style.font-size.px]=&quot;fontSizePx&quot;&gt;APP 字体大小: {{fontSizePx}}px&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fontSizePx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">&lt;app-sbind [size]=&quot;fontSizePx&quot; (change)=&quot; fontSizePx = $event&quot;&gt;&lt;/app-sbind&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">&lt;p [style.font-size.px]=&quot;fontSizePx&quot;&gt;APP 字体大小: {{fontSizePx}}px&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fontSizePx</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝子组件：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EventEmitter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Output</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-sbind</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;button (click)=&quot;dec()&quot;&gt;-&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;button (click)=&quot;inc()&quot;&gt;+&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p [style.font-size.px]=&quot;size&quot;&gt;sbind 字体大小: {{size}}px&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;/div&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./sbind.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">SbindComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//默认值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">change</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">number</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">dec</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">change</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">inc</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">change</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EventEmitter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Output</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-sbind</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;button (click)=&quot;dec()&quot;&gt;-&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;button (click)=&quot;inc()&quot;&gt;+&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p [style.font-size.px]=&quot;size&quot;&gt;sbind 字体大小: {{size}}px&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;/div&gt;</span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./sbind.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">SbindComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//默认值</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">=</span><span style="color:#2F798A;">16</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">change</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">dec</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">change</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">inc</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">change</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>方法二：</strong>（联合写法）</p><p>📝父组件：<code>app.component.html</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-sbind</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[(size)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fontSizePx</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-sbind</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[style.font-size.px]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fontSizePx</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">APP 字体大小: {{fontSizePx}}px</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-sbind</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[(size)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fontSizePx</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-sbind</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[style.font-size.px]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fontSizePx</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">APP 字体大小: {{fontSizePx}}px</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝父组件：<code>app.component.ts</code></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fontSizePx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fontSizePx</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝子组件：<code>sbind.component.html</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">(click)</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">dec()</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">-</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">button</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">(click)</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inc()</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">+</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">button</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[style.font-size.px]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">size</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> sbind 字体大小: {{size}}px</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">(click)</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">dec()</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">-</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">button</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">(click)</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inc()</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">+</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">button</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[style.font-size.px]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">size</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> sbind 字体大小: {{size}}px</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝子组件：<code>sbind.component.ts</code></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EventEmitter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Output</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-sbind</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./sbind.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./sbind.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">SbindComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//默认值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 双向绑定语法：output变量名=输入属性名+Change</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sizeChange</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">number</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">dec</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//减</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">sizeChange</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">inc</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//加</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">sizeChange</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EventEmitter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Output</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-sbind</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./sbind.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./sbind.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">SbindComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//默认值</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">=</span><span style="color:#2F798A;">16</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 双向绑定语法：output变量名=输入属性名+Change</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sizeChange</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">dec</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//减</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">sizeChange</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">inc</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//加</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">sizeChange</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_2-input双向绑定" tabindex="-1">2. input双向绑定 <a class="header-anchor" href="#_2-input双向绑定" aria-label="Permalink to &quot;2. input双向绑定&quot;">​</a></h3><p><strong>普通写法：</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">value</span><span style="color:#666666;">]=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputVal</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">input</span><span style="color:#666666;">)=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputVal = $event.target.value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;{{</span><span style="color:#BD976A;">inputVal</span><span style="color:#666666;">}}&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//默认值 inputVal=&#39;&#39;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">value</span><span style="color:#999999;">]=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputVal</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">input</span><span style="color:#999999;">)=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputVal = $event.target.value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;{{</span><span style="color:#B07D48;">inputVal</span><span style="color:#999999;">}}&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//默认值 inputVal=&#39;&#39;</span></span></code></pre></div><p><strong>简写形式：</strong></p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><strong>ngMoel 指令来源于FormsModule模块</strong></p><p><code>[(ngMoel)]</code>可拆解为：</p><ol><li><p>名为ngModel的输入属性</p></li><li><p>名为ngModelChange的输出属性</p></li></ol></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;"> =</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngMoel)]</span><span style="color:#666666;"> =</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputVal</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">{{inputVal}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> //默认值 inputVal=&#39;&#39;</span></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- &lt;input type=&quot;text&quot; [ngModel] = &quot;inputVal&quot; (ngModelChange) =&quot;inputVal= $event&quot;&gt;</span></span>
+<span class="line"><span style="color:#758575DD;">&lt;p&gt;{{inputVal}}&lt;/p&gt; 完整写法--&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;"> =</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngMoel)]</span><span style="color:#999999;"> =</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputVal</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">{{inputVal}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> //默认值 inputVal=&#39;&#39;</span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- &lt;input type=&quot;text&quot; [ngModel] = &quot;inputVal&quot; (ngModelChange) =&quot;inputVal= $event&quot;&gt;</span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;p&gt;{{inputVal}}&lt;/p&gt; 完整写法--&gt;</span></span></code></pre></div><h3 id="_3-表单form中双向绑定" tabindex="-1">3. 表单Form中双向绑定 <a class="header-anchor" href="#_3-表单form中双向绑定" aria-label="Permalink to &quot;3. 表单Form中双向绑定&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>表单中使用[(ngModel)]，满足下列两个条件之一：</p><ul><li>给控件加上name属性</li><li>将ngModelOptions.standalone设为true</li></ul></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">form</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> /&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[ngModelOptions]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{ name: &#39;name&#39; }</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> /&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[ngModelOptions]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{ standalone: true }</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> /&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[ngModelOptions]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{  name: &#39;name&#39; ,standalone: true }</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> /&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">form</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">form</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> /&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[ngModelOptions]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{ name: &#39;name&#39; }</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> /&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[ngModelOptions]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{ standalone: true }</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> /&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[ngModelOptions]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{  name: &#39;name&#39; ,standalone: true }</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> /&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">form</span><span style="color:#999999;">&gt;</span></span></code></pre></div><details class="details custom-block"><summary>ngModel拓展</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChild</span><span style="color:#666666;">(</span><span style="color:#BD976A;">NgModel</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">ngModel</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">NgModel</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#80A665;">getVal</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">ngModel</span><span style="color:#666666;">.</span><span style="color:#BD976A;">viewModel</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//获取[(ngModel)]所绑定input的值</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#80A665;">setVal</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">ngModel</span><span style="color:#666666;">.</span><span style="color:#80A665;">viewToModelUpdate</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">newValue</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//赋值（不太好使）</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChild</span><span style="color:#999999;">(</span><span style="color:#B07D48;">NgModel</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">private</span><span style="color:#393A34;"> </span><span style="color:#59873A;">ngModel</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">NgModel</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#59873A;">getVal</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">ngModel</span><span style="color:#999999;">.</span><span style="color:#B07D48;">viewModel</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//获取[(ngModel)]所绑定input的值</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#59873A;">setVal</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">ngModel</span><span style="color:#999999;">.</span><span style="color:#59873A;">viewToModelUpdate</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">newValue</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//赋值（不太好使）</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h2 id="属性型指令" tabindex="-1">属性型指令 <a class="header-anchor" href="#属性型指令" aria-label="Permalink to &quot;属性型指令&quot;">​</a></h2><blockquote><p>指令：<strong>用于改变DOM元素的外观或行为的指令</strong>（组件是一种特殊的指令）</p></blockquote><details class="details custom-block"><summary>组件改为属性型指令</summary><p>📝AppComponent</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app-for</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">dasfsada</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app-for</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">dasfsada</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[app-decr]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//属性选择器</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">   </span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">DecrComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[app-decr]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//属性选择器</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">   </span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">DecrComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h2 id="结构型指令" tabindex="-1">结构型指令 <a class="header-anchor" href="#结构型指令" aria-label="Permalink to &quot;结构型指令&quot;">​</a></h2><h3 id="ngif指令" tabindex="-1"><code>*ngIf</code>指令 <a class="header-anchor" href="#ngif指令" aria-label="Permalink to &quot;`*ngIf`指令&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">*ngIf</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">isShow</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段文字 {{ isShow }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- &lt;p *ngIf=&quot;isShow as s&quot;&gt;一段文字 {{ s }}&lt;/p&gt; 局部变量：只能在标签内部使用--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">isShow:true显示，反之（取决于绑定的值是否为真）</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">*ngIf</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">isShow</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段文字 {{ isShow }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- &lt;p *ngIf=&quot;isShow as s&quot;&gt;一段文字 {{ s }}&lt;/p&gt; 局部变量：只能在标签内部使用--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">isShow:true显示，反之（取决于绑定的值是否为真）</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>会改变DOM结构，原理：移除和插入DOM节点</p></div><details class="details custom-block"><summary>*ngIf 完整写法</summary><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngIf]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">isShow</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-s</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">*ngIf</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">isShow</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段文字 {{ isShow }} {{s}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngIf]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">isShow</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-s</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">*ngIf</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">isShow</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段文字 {{ isShow }} {{s}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span></code></pre></div></details><p><strong>ngIfElese</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-if</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;div *ngIf=&quot;condition; else elseBlock&quot;&gt;condition为真时显示&lt;/div&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;ng-template ##elseBlock&gt; </span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p&gt; condition为假时显示 &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// ##elseBlock:模板的引用</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IfComp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">condition</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-if</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;div *ngIf=&quot;condition; else elseBlock&quot;&gt;condition为真时显示&lt;/div&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">    &lt;ng-template ##elseBlock&gt; </span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p&gt; condition为假时显示 &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// ##elseBlock:模板的引用</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IfComp</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">condition</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>ngIfThen</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-if</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;div *ngIf=&quot;condition; then thenBlock else elseBlock&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;ng-template ##thenBlock&gt; condition为true时显示&lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;ng-template ##elseBlock&gt; condition为false时显示&lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span><span style="color:#758575DD;">//只会显示一个ng-template，第一个div只是用于承载，并不会显示</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IfComp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">condition</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-if</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;div *ngIf=&quot;condition; then thenBlock else elseBlock&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;ng-template ##thenBlock&gt; condition为true时显示&lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;ng-template ##elseBlock&gt; condition为false时显示&lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span><span style="color:#A0ADA0;">//只会显示一个ng-template，第一个div只是用于承载，并不会显示</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IfComp</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">condition</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>TemplateRef拓展</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewChild</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">TemplateRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-if</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;button(click)=&quot;condition = !condition&quot;&gt;toggle block&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p *ngIf=&quot;condition else elseBlocks&quot;&gt;{{ condition }} === true 时显示&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">	&lt;ng-template ##firstTpl&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p&gt;{{ condition }} === false 时显示&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IfComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">elseBlocks</span><span style="color:#666666;">: </span><span style="color:#5DA994;">TemplateRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">any</span><span style="color:#666666;">&gt; =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//获取组件的变量elseBlocks</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChild</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">firstTpl</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">static</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">primaryBlock</span><span style="color:#666666;">: </span><span style="color:#5DA994;">TemplateRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">any</span><span style="color:#666666;">&gt; =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">condition</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngOnInit</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">primaryBlock</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">elseBlocks</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">primaryBlock</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">   </span><span style="color:#758575DD;">//获取到##firstTpl模板引用赋值给elseBlocks变量</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//运行效果和ngIfElese案例一样</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewChild</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">TemplateRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-if</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;button(click)=&quot;condition = !condition&quot;&gt;toggle block&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p *ngIf=&quot;condition else elseBlocks&quot;&gt;{{ condition }} === true 时显示&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">	&lt;ng-template ##firstTpl&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p&gt;{{ condition }} === false 时显示&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IfComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">elseBlocks</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">TemplateRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">any</span><span style="color:#999999;">&gt; =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//获取组件的变量elseBlocks</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChild</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">firstTpl</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">static</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">primaryBlock</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">TemplateRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">any</span><span style="color:#999999;">&gt; =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">condition</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngOnInit</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">primaryBlock</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">elseBlocks</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">primaryBlock</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">   </span><span style="color:#A0ADA0;">//获取到##firstTpl模板引用赋值给elseBlocks变量</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//运行效果和ngIfElese案例一样</span></span></code></pre></div></details><h3 id="ngfor指令" tabindex="-1"><code>*ngFor</code>指令 <a class="header-anchor" href="#ngfor指令" aria-label="Permalink to &quot;`*ngFor`指令&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-for</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;ul&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;li *ngFor=&quot;let item of Persons; </span></span>
+<span class="line"><span style="color:#C98A7D;">			index as i; count as len; let ev = even; let od = odd; let f = first; let l = last;</span></span>
+<span class="line"><span style="color:#C98A7D;">			trackBy: trackByPerson&quot;&gt;{{ item.name }}&lt;/li&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/ul&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ForComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">Persons</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">p1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">张三</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">p2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">李四</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">p3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">王五</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#80A665;">trackByPerson</span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#BD976A;">item</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//追踪id，id值不变不刷新（提升性能）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-for</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;ul&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;li *ngFor=&quot;let item of Persons; </span></span>
+<span class="line"><span style="color:#B56959;">			index as i; count as len; let ev = even; let od = odd; let f = first; let l = last;</span></span>
+<span class="line"><span style="color:#B56959;">			trackBy: trackByPerson&quot;&gt;{{ item.name }}&lt;/li&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/ul&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ForComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">Persons</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">p1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">张三</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  },</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">p2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">李四</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  },</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">p3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">王五</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  },</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#59873A;">trackByPerson</span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#B07D48;">item</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//追踪id，id值不变不刷新（提升性能）</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>ngFor局部变量</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">number</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//可迭代对象中当前条目的索引。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">count</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">number</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//可迭代对象的长度。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">first</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">boolean</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//如果当前条目是可迭代对象中的第一个条目则为 true。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">last</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">boolean</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//如果当前条目是可迭代对象中的最后一个条目则为 true。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">even</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">boolean</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//如果当前条目在可迭代对象中的索引号为偶数则为 true。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">odd</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">boolean</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//如果当前条目在可迭代对象中的索引号为奇数则为 true。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">$implicit</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">T</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//迭代目标（绑定到ngForOf）中每个条目的值。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">ngForOf</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">NgIterable</span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">T</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 async 管道时（userStreams | async）。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">number</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//可迭代对象中当前条目的索引。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">count</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">number</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//可迭代对象的长度。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">first</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">boolean</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//如果当前条目是可迭代对象中的第一个条目则为 true。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">last</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">boolean</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//如果当前条目是可迭代对象中的最后一个条目则为 true。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">even</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">boolean</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//如果当前条目在可迭代对象中的索引号为偶数则为 true。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">odd</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">boolean</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//如果当前条目在可迭代对象中的索引号为奇数则为 true。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">$implicit</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">T</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//迭代目标（绑定到ngForOf）中每个条目的值。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">ngForOf</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">NgIterable</span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">T</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 async 管道时（userStreams | async）。</span></span></code></pre></div></details><details class="details custom-block"><summary>*ngFor展开写法</summary><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">ngFor</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">[ngForOf]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">heros</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">[ngForTrackBy]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">trackByHero</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-item</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-i</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">index</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-od</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">odd</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-ev</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">even</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-len</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">count</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-f</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">first</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-l</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">last</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[class.even]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ev</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[class.odd]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">od</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">index: {{ i }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">count: {{ len }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">name: {{ item.name }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">first: {{ f }} -- last: {{ l }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">hr</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">ngFor</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">[ngForOf]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">heros</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">[ngForTrackBy]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">trackByHero</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-item</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-i</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">index</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-od</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">odd</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-ev</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">even</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-len</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">count</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-f</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">first</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-l</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">last</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[class.even]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ev</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[class.odd]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">od</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">index: {{ i }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">count: {{ len }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">name: {{ item.name }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">first: {{ f }} -- last: {{ l }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">hr</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span></code></pre></div></details><h3 id="ngswitch-指令" tabindex="-1"><code>[ngSwitch]</code>指令 <a class="header-anchor" href="#ngswitch-指令" aria-label="Permalink to &quot;`[ngSwitch]`指令&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>[ngSwitch]</code> 为属性型指令</p><p><code>*ngSwitchCase</code>为结构型指令</p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-switch</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;apple&quot; id=&quot;apple&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;label for=&quot;apple&quot;&gt;🍎&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;pear&quot; id=&quot;pear&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;label for=&quot;pear&quot;&gt;🍐&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;grape&quot; id=&quot;grape&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;label for=&quot;grape&quot;&gt;🍇&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;other&quot; id=&quot;other&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;label for=&quot;other&quot;&gt;other&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">    selected fruit: {{ fruit }}</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;div class=&quot;content&quot; [ngSwitch]=&quot;fruit&quot;&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p *ngSwitchCase=&quot;&#39;apple&#39;&quot;&gt;这是 苹果&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p *ngSwitchCase=&quot;&#39;pear&#39;&quot;&gt; 这是 梨&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p *ngSwitchCase=&quot;&#39;grape&#39;&quot;&gt;这是 葡萄&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p *ngSwitchDefault&gt;啥都不是&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">SwitchComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fruit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-switch</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;apple&quot; id=&quot;apple&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;label for=&quot;apple&quot;&gt;🍎&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;pear&quot; id=&quot;pear&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;label for=&quot;pear&quot;&gt;🍐&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;grape&quot; id=&quot;grape&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;label for=&quot;grape&quot;&gt;🍇&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;other&quot; id=&quot;other&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;label for=&quot;other&quot;&gt;other&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">    selected fruit: {{ fruit }}</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">    &lt;div class=&quot;content&quot; [ngSwitch]=&quot;fruit&quot;&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p *ngSwitchCase=&quot;&#39;apple&#39;&quot;&gt;这是 苹果&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p *ngSwitchCase=&quot;&#39;pear&#39;&quot;&gt; 这是 梨&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p *ngSwitchCase=&quot;&#39;grape&#39;&quot;&gt;这是 葡萄&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p *ngSwitchDefault&gt;啥都不是&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">SwitchComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fruit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>[ngSwitch]展开写法</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">content</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">ngSwitch</span><span style="color:#666666;">]=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fruit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ngSwitchCase</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">apple</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;</span><span style="color:#BD976A;">这是苹果</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ngSwitchCase</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">pear</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;</span><span style="color:#BD976A;">这是梨</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ngSwitchCase</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">grape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;</span><span style="color:#BD976A;">这是葡萄</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ngSwitchDefault</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;</span><span style="color:#BD976A;">啥都不是</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">content</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">ngSwitch</span><span style="color:#999999;">]=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fruit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ngSwitchCase</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">apple</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;</span><span style="color:#B07D48;">这是苹果</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ngSwitchCase</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">pear</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;</span><span style="color:#B07D48;">这是梨</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ngSwitchCase</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">grape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;</span><span style="color:#B07D48;">这是葡萄</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ngSwitchDefault</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;</span><span style="color:#B07D48;">啥都不是</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div></details><h2 id="自定义指令" tabindex="-1">自定义指令 <a class="header-anchor" href="#自定义指令" aria-label="Permalink to &quot;自定义指令&quot;">​</a></h2><p>使用：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">appHighlight</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">highlightColor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">red</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">appHighlight</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[highlightColor]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">color</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">appHighlight</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">color</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">&lt;!-- 起别名后，输入属性和指令名设为一样--&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">appHighlight</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">highlightColor</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">red</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">appHighlight</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[highlightColor]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">color</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">appHighlight</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">color</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">&lt;!-- 起别名后，输入属性和指令名设为一样--&gt;</span></span></code></pre></div><h3 id="自定义高亮指令-属性型" tabindex="-1">自定义高亮指令（属性型） <a class="header-anchor" href="#自定义高亮指令-属性型" aria-label="Permalink to &quot;自定义高亮指令（属性型）&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Directive</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ElementRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EventEmitter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">HostListener</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Output</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Directive</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[appHighlight]</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">HighlightDirective</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">highlightColor</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">// @Input(&#39;appHighlight&#39;) highlightColor: string;起别名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">colorChange</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//1.获取dom</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">el</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ElementRef</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">appHighlight</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">HostListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mouseenter</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onMouseEnter</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">highlight</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">highlightColor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">yellow</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//内部事件监听</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">HostListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mouseleave</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">$event</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onMouseLeave</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">highlight</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">event</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//传递事件对象</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">highlight</span><span style="color:#666666;">(</span><span style="color:#BD976A;">color</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//2.操作dom (操作dom备用选择)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">nativeElement</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">backgroundColor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">colorChange</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">color</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Directive</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ElementRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EventEmitter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">HostListener</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Output</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Directive</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[appHighlight]</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">HighlightDirective</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">highlightColor</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// @Input(&#39;appHighlight&#39;) highlightColor: string;起别名</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">colorChange</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//1.获取dom</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">el</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ElementRef</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">appHighlight</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">   </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">HostListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mouseenter</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onMouseEnter</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">highlight</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">highlightColor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">yellow</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//内部事件监听</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">HostListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mouseleave</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">$event</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onMouseLeave</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">highlight</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">event</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//传递事件对象</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#59873A;">highlight</span><span style="color:#999999;">(</span><span style="color:#B07D48;">color</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//2.操作dom (操作dom备用选择)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">nativeElement</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">backgroundColor</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">colorChange</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">color</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title"><b>相对于原生事件监听 addEventListener()  的优点 ：</b></p><ol><li><p>会自动销毁，不会导致内存泄漏</p></li><li><p>不用必须确保每个DOM API都能用</p></li></ol></div><h3 id="自定义unless指令-结构型" tabindex="-1">自定义unless指令（结构型） <a class="header-anchor" href="#自定义unless指令-结构型" aria-label="Permalink to &quot;自定义unless指令（结构型）&quot;">​</a></h3><details class="details custom-block"><summary>定义</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Directive</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnChanges</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">SimpleChanges</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">TemplateRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewContainerRef</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">UnlessContext</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">unknown</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">$implicit</span><span style="color:#666666;">: </span><span style="color:#5DA994;">T</span><span style="color:#666666;"> =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">appUnless</span><span style="color:#666666;">: </span><span style="color:#5DA994;">T</span><span style="color:#666666;"> =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">: </span><span style="color:#5DA994;">T</span><span style="color:#666666;"> =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Directive</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[appUnless]</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">UnlessDirective</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnChanges</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">appUnless</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unless</span><span style="color:#666666;">: </span><span style="color:#5DA994;">boolean</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hasView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span><span style="color:#758575DD;">//是否已显示</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">context</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">UnlessContext</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">templateRef</span><span style="color:#666666;">: </span><span style="color:#5DA994;">TemplateRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">any</span><span style="color:#666666;">&gt;,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">viewContainer</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ViewContainerRef</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(this.templateRef);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(this.viewContainer);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//监听输入属性变化</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnChanges</span><span style="color:#666666;">(</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">: </span><span style="color:#5DA994;">SimpleChanges</span><span style="color:#666666;">):</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">unless</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$implicit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">.</span><span style="color:#BD976A;">appUnless</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">unless</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">.</span><span style="color:#BD976A;">attr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">aaab</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">unless</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hasView</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">viewContainer</span><span style="color:#666666;">.</span><span style="color:#80A665;">clear</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hasView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hasView</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// 这里使用的构造提供的模版（this.templateRef）</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// 实战中可以通过一个input属性传入模版</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">viewContainer</span><span style="color:#666666;">.</span><span style="color:#80A665;">createEmbeddedView</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">templateRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hasView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Directive</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnChanges</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">SimpleChanges</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">TemplateRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewContainerRef</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">UnlessContext</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">T</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">unknown</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">$implicit</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">T</span><span style="color:#999999;"> =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">appUnless</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">T</span><span style="color:#999999;"> =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">T</span><span style="color:#999999;"> =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Directive</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[appUnless]</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">UnlessDirective</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnChanges</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">appUnless</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unless</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">boolean</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hasView</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">//是否已显示</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">context</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">UnlessContext</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">templateRef</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">TemplateRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">any</span><span style="color:#999999;">&gt;,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">viewContainer</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ViewContainerRef</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(this.templateRef);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(this.viewContainer);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//监听输入属性变化</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnChanges</span><span style="color:#999999;">(</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">SimpleChanges</span><span style="color:#999999;">):</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">unless</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$implicit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">.</span><span style="color:#B07D48;">appUnless</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">unless</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">.</span><span style="color:#B07D48;">attr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">aaab</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">unless</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hasView</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">viewContainer</span><span style="color:#999999;">.</span><span style="color:#59873A;">clear</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hasView</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hasView</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// 这里使用的构造提供的模版（this.templateRef）</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// 实战中可以通过一个input属性传入模版</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">viewContainer</span><span style="color:#999999;">.</span><span style="color:#59873A;">createEmbeddedView</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">templateRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hasView</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><details class="details custom-block"><summary>调用</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;section&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;h3&gt;unless&lt;/h3&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;button  (click)=&quot;showUnless = !showUnless&quot;&gt;toggle unless {{ showUnless }}&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;p *appUnless=&quot;showUnless&quot;&gt;测试unless driective -- {{ showUnless }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;p *appUnless=&quot;showUnless as un&quot;&gt;测试unless driective alias un -- {{ un }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;p *appUnless=&quot;showUnless; let un; let attr=attr;&quot;&gt;别名：  {{ un }} attr: {{ attr }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;/section&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">show</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//false: 显示 	true: 隐藏</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;section&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;h3&gt;unless&lt;/h3&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;button  (click)=&quot;showUnless = !showUnless&quot;&gt;toggle unless {{ showUnless }}&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;p *appUnless=&quot;showUnless&quot;&gt;测试unless driective -- {{ showUnless }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;p *appUnless=&quot;showUnless as un&quot;&gt;测试unless driective alias un -- {{ un }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;p *appUnless=&quot;showUnless; let un; let attr=attr;&quot;&gt;别名：  {{ un }} attr: {{ attr }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;/section&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">show</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//false: 显示 	true: 隐藏</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h2 id="模板元素" tabindex="-1">模板元素 <a class="header-anchor" href="#模板元素" aria-label="Permalink to &quot;模板元素&quot;">​</a></h2><h3 id="ng-template" tabindex="-1"><code>ng-template</code> <a class="header-anchor" href="#ng-template" aria-label="Permalink to &quot;`ng-template`&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">事实上，在渲染视图之前，Angular 会把 </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> 及其内容替换为一个注释。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。</span></span>
+<span class="line"><span style="color:#393A34;">事实上，在渲染视图之前，Angular 会把 </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> 及其内容替换为一个注释。</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>没有使用结构型指令，ng-template中的元素是不可见的</p></div><h3 id="ng-container" tabindex="-1"><code>ng-container</code> <a class="header-anchor" href="#ng-container" aria-label="Permalink to &quot;`ng-container`&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">Angular 的 </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-container</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> 是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-container</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">Angular 的 </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-container</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> 是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-container</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">someCondition</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">statement1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">statement2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">statement3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">someCondition</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">statement1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">statement2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">statement3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="模板引用变量" tabindex="-1">模板引用变量 <a class="header-anchor" href="#模板引用变量" aria-label="Permalink to &quot;模板引用变量&quot;">​</a></h3><blockquote><p>使用井号（##）声明模板引用变量，可以获取DOM 元素、指令、组件、TemplateRef 或 Web Component。</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-tpl-var</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;input ##phone placeholder=&quot;phone number&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;"> 	&lt;input ref-phone placeholder=&quot;phone number&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;button (click)=&quot;callPhone(phone.value)&quot;&gt;Call&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//两种写法</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">TplVarComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">callPhone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">callPhone</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-tpl-var</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;input ##phone placeholder=&quot;phone number&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;"> 	&lt;input ref-phone placeholder=&quot;phone number&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;button (click)=&quot;callPhone(phone.value)&quot;&gt;Call&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//两种写法</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">TplVarComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">callPhone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">callPhone</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>在外部获取组件引用，绑定组件内方法</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button (click)=&quot;sizer.inc()&quot;&gt;app inc&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;app-sbind [(size)]=&quot;size&quot; ##sizer&gt;&lt;/app-sbind&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      size: {{ size }}</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button (click)=&quot;sizer.inc()&quot;&gt;app inc&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;app-sbind [(size)]=&quot;size&quot; ##sizer&gt;&lt;/app-sbind&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      size: {{ size }}</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="操作符" tabindex="-1">操作符 <a class="header-anchor" href="#操作符" aria-label="Permalink to &quot;操作符&quot;">​</a></h2><h3 id="管道" tabindex="-1">管道 <code>|</code> <a class="header-anchor" href="#管道" aria-label="Permalink to &quot;管道 `|`&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>模板变量可以通过一条或多条管道格式化数据，</p><p>默认的管道都是纯的，Angular 会忽略复合对象中的变化，即管道只会检查原始值或对象引用，</p><p>如果数组中的元素变化，增删改，引用没有变化，而不会执行管道的逻辑。</p></div><table><thead><tr><th style="text-align:center;">管道名称</th><th style="text-align:center;">作用</th></tr></thead><tbody><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/DatePipe" target="_blank" rel="noreferrer">DatePipe</a></td><td style="text-align:center;">格式化日期</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/DecimalPipe" target="_blank" rel="noreferrer">DecimalPipe</a></td><td style="text-align:center;">数字转字符串，并可以指定格式</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/KeyValuePipe" target="_blank" rel="noreferrer">KeyValuePipe</a></td><td style="text-align:center;">使ngFor可以循环Object或Map对象</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/JsonPipe" target="_blank" rel="noreferrer">JsonPipe</a></td><td style="text-align:center;">将值转成json格式</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/TitleCasePipe" target="_blank" rel="noreferrer">TitleCasePipe</a></td><td style="text-align:center;">把首字母大写，其它小写</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/SlicePipe" target="_blank" rel="noreferrer">SlicePipe</a></td><td style="text-align:center;">截取Array或String</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/PercentPipe" target="_blank" rel="noreferrer">PercentPipe</a></td><td style="text-align:center;">数字转百分比</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/LowerCasePipe" target="_blank" rel="noreferrer">LowerCasePipe</a></td><td style="text-align:center;">转化为小写</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/UpperCasePipe" target="_blank" rel="noreferrer">UpperCasePipe</a></td><td style="text-align:center;">转化为大写</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/AsyncPipe" target="_blank" rel="noreferrer">AsyncPipe</a></td><td style="text-align:center;">自动订阅模板中的Observable或Promise</td></tr></tbody></table><h3 id="安全链" tabindex="-1">安全链<code>?</code> <a class="header-anchor" href="#安全链" aria-label="Permalink to &quot;安全链`?`&quot;">​</a></h3><blockquote><p>用于可能为空的引用需要使用时，对null、undefined进行保护，保证数据请求前能正常渲染模板</p></blockquote><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">{{person?.name}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">{{person?.name}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h3 id="非空断言" tabindex="-1">非空断言<code>!</code> <a class="header-anchor" href="#非空断言" aria-label="Permalink to &quot;非空断言`!`&quot;">​</a></h3><div class="danger custom-block"><p class="custom-block-title">DANGER</p><p>在ts中，开启--strictNullChecks后，将一个可能是undefined或null的变量赋给一个有确切类型的变量时，会报错。在特定情况下，我们断定变量一定不是undefined或null，就可以使用非空断言操作符。</p></div><blockquote><p><strong>使用非空断言的两个步骤：</strong></p><p>tsconfig.json中设置<code>&quot;strictNullChecks&quot;: true</code></p><p>tslint.json中设置<code> &quot;no-non-null-assertion&quot;: false</code></p></blockquote><h3 id="类型转换函数-any" tabindex="-1">类型转换函数<code>$any()</code> <a class="header-anchor" href="#类型转换函数-any" aria-label="Permalink to &quot;类型转换函数`$any()`&quot;">​</a></h3><blockquote><p>绑定的表达式不能或很难指定类型时使用</p></blockquote><p>假设无法确定item的类型，也就不能确定item是否有bestByDate，这时就会报错。</p><p>可以用$any()把item视为any类型，避免其报错（也可以用这个函数绑定组件中不存在的变量）</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt; {{</span><span style="color:#80A665;">$any</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">).</span><span style="color:#BD976A;">bestByDate</span><span style="color:#666666;">}}&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt; {{</span><span style="color:#59873A;">$any</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">).</span><span style="color:#B07D48;">bestByDate</span><span style="color:#999999;">}}&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Framework/Angular/Angular基础总结二.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Angular基础总结三</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>React基础总结一</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" "b/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html"
new file mode 100644
index 00000000..17f1316c
--- /dev/null
+++ "b/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html"
@@ -0,0 +1,466 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Framework_React_React基础总结一.md.fc5d41af.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Angular</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结三</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结二</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>React</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>React基础总结一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vite原理学习</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue3补漏笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页与搜索条件记录并回显优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>列表最后一条数据删除处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Framework_React_React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-6b87e69f><div><h2 id="一、前置知识" tabindex="-1">一、前置知识 <a class="header-anchor" href="#一、前置知识" aria-label="Permalink to &quot;一、前置知识&quot;">​</a></h2><h3 id="虚拟dom" tabindex="-1">虚拟DOM <a class="header-anchor" href="#虚拟dom" aria-label="Permalink to &quot;虚拟DOM&quot;">​</a></h3><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">VDOM</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 此处一定不要写引号，因为不是字符串 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">h1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">title</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Hello,React</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">h1</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//2.渲染虚拟DOM到页面   准备好一个“容器”&lt;div id=&quot;root&quot;&gt;&lt;/div&gt; </span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(</span><span style="color:#BD976A;">VDOM</span><span style="color:#666666;">,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">VDOM</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 此处一定不要写引号，因为不是字符串 */</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">h1</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">title</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Hello,React</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">h1</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//2.渲染虚拟DOM到页面   准备好一个“容器”&lt;div id=&quot;root&quot;&gt;&lt;/div&gt; </span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(</span><span style="color:#B07D48;">VDOM</span><span style="color:#999999;">,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><p><strong>关于虚拟DOM：</strong></p><p>1.本质是Object类型的对象（一般对象）</p><p>​ 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。</p><p>​ 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上</p><p><strong>JSX语法规则</strong></p><p>​ 1.定义虚拟DOM时，不要写引号。</p><p>​ 2.标签中混入JS表达式时要用 <code>{}</code>。</p><p>​ 3.样式的类名指定不要用class，要用className。</p><p>​ 4.只有一个根标签</p><p>​ 5.标签必须闭合</p><p>​ 6.标签首字母</p><p><strong>注意</strong></p><p>一定注意区分：【js语句(代码)】与【js表达式】</p><blockquote><p>1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方</p></blockquote><pre><code> (1). a
+      (2). a+b
+      (3). demo(1)
+      (4). arr.map() 
+      (5). function test () {}
+</code></pre><blockquote><p>2.语句(代码)：</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">).</span><span style="color:#80A665;">if</span><span style="color:#666666;">(){}</span></span>
+<span class="line"><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">).</span><span style="color:#80A665;">for</span><span style="color:#666666;">(){}</span></span>
+<span class="line"><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">).</span><span style="color:#80A665;">switch</span><span style="color:#666666;">(){</span><span style="color:#4D9375;">case</span><span style="color:#DBD7CAEE;">:</span><span style="color:#BD976A;">xxxx</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">).</span><span style="color:#59873A;">if</span><span style="color:#999999;">(){}</span></span>
+<span class="line"><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">).</span><span style="color:#59873A;">for</span><span style="color:#999999;">(){}</span></span>
+<span class="line"><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">).</span><span style="color:#59873A;">switch</span><span style="color:#999999;">(){</span><span style="color:#1E754F;">case</span><span style="color:#393A34;">:</span><span style="color:#B07D48;">xxxx</span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="二、组件" tabindex="-1">二、组件 <a class="header-anchor" href="#二、组件" aria-label="Permalink to &quot;二、组件&quot;">​</a></h2><h3 id="函数式组件" tabindex="-1">函数式组件 <a class="header-anchor" href="#函数式组件" aria-label="Permalink to &quot;函数式组件&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!--</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">准备好一个</span><span style="color:#DBD7CAEE;">“</span><span style="color:#BD976A;">容器</span><span style="color:#DBD7CAEE;">” </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!--</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">引入react核心库</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/javascript</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">../js/react.development.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!--</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">引入react</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">dom</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">用于支持react操作DOM</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/javascript</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">../js/react-dom.development.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!--</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">引入babel</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">用于将jsx转为js</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/javascript</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">../js/babel.min.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/babel</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		//1.创建函数式组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		function MyComponent()</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">; </span><span style="color:#758575DD;">//此处的this是undefined，因为babel编译后开启了严格模式</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">h2</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">函数式组件</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">h2</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		//2.渲染组件到页面</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		ReactDOM.render(</span><span style="color:#666666;">&lt;</span><span style="color:#B8A965;">MyComponent</span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;">,document.getElementById(&#39;root&#39;))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		/* </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			执行了ReactDOM.render(</span><span style="color:#666666;">&lt;</span><span style="color:#B8A965;">MyComponent</span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;">.......之后，发生了什么？</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					1.React解析组件标签，找到了MyComponent组件。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!--</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">准备好一个</span><span style="color:#393A34;">“</span><span style="color:#B07D48;">容器</span><span style="color:#393A34;">” </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!--</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">引入react核心库</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/javascript</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">../js/react.development.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!--</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">引入react</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">dom</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">用于支持react操作DOM</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/javascript</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">../js/react-dom.development.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!--</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">引入babel</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">用于将jsx转为js</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/javascript</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">../js/babel.min.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/babel</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		//1.创建函数式组件</span></span>
+<span class="line"><span style="color:#393A34;">		function MyComponent()</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#393A34;">; </span><span style="color:#A0ADA0;">//此处的this是undefined，因为babel编译后开启了严格模式</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">h2</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">函数式组件</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">h2</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">		//2.渲染组件到页面</span></span>
+<span class="line"><span style="color:#393A34;">		ReactDOM.render(</span><span style="color:#999999;">&lt;</span><span style="color:#998418;">MyComponent</span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;">,document.getElementById(&#39;root&#39;))</span></span>
+<span class="line"><span style="color:#393A34;">		/* </span></span>
+<span class="line"><span style="color:#393A34;">			执行了ReactDOM.render(</span><span style="color:#999999;">&lt;</span><span style="color:#998418;">MyComponent</span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;">.......之后，发生了什么？</span></span>
+<span class="line"><span style="color:#393A34;">					1.React解析组件标签，找到了MyComponent组件。</span></span>
+<span class="line"><span style="color:#393A34;">					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。</span></span>
+<span class="line"><span style="color:#393A34;">		*/</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h3 id="类式组件" tabindex="-1">类式组件 <a class="header-anchor" href="#类式组件" aria-label="Permalink to &quot;类式组件&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//创建类式组件</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">MyComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">render</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//render在MyComponent的原型对象上，供实例使用。</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//render中的this指向MyComponent组件实例对象。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">render中的this:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">h2</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">类式组件</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">h2</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//渲染组件到页面</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">MyComponent</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//创建类式组件</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">MyComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">render</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//render在MyComponent的原型对象上，供实例使用。</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//render中的this指向MyComponent组件实例对象。</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">render中的this:</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">h2</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">类式组件</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">h2</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//渲染组件到页面</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">MyComponent</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>执行了<code>ReactDOM.render(&lt;MyComponent/&gt;</code>.......之后，发生了什么？</p><p>​ 1.React解析组件标签，找到了MyComponent组件。</p><p>​ 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。</p><p>​ 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。</p></div><h3 id="补充" tabindex="-1">补充 <a class="header-anchor" href="#补充" aria-label="Permalink to &quot;补充&quot;">​</a></h3><p><strong>受控组件</strong>：React 中受控组件的是指表单元素的控制是交给 React ，表单元素的值是完全交由组件的 state 控制。</p><p>​ 受控组件也可以用于描述内部状态由传入 props 控制的 React 自定义组件。</p><p><strong>非受控组件</strong>： 表单元素的状态并不受 React 组件状态的影响，表单元素的值存储于 DOM 元素中。</p><p>​ 如果要 React 组件要获取 DOM 元素的值，需要通过绑定 ref 的方式去获取。</p><h3 id="组实例三大属性" tabindex="-1">组实例三大属性 <a class="header-anchor" href="#组实例三大属性" aria-label="Permalink to &quot;组实例三大属性&quot;">​</a></h3><h4 id="state" tabindex="-1">state <a class="header-anchor" href="#state" aria-label="Permalink to &quot;state&quot;">​</a></h4><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//1.创建组件</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Weather</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">Component</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//初始化状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">state</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">isHot</span><span style="color:#666666;">:</span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span><span style="color:#B8A965;">wind</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">微风</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">render</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">isHot</span><span style="color:#666666;">,</span><span style="color:#BD976A;">wind</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">state</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">h1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onClick</span><span style="color:#666666;">={</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">changeWeather</span><span style="color:#666666;">}&gt;</span><span style="color:#DBD7CAEE;">今天天气很</span><span style="color:#666666;">{</span><span style="color:#BD976A;">isHot</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">炎热</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">凉爽</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">，</span><span style="color:#666666;">{</span><span style="color:#BD976A;">wind</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">h1</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//自定义方法————要用赋值语句的形式+箭头函数 **</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">changeWeather</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">isHot</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">state</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isHot</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">setState</span><span style="color:#666666;">({</span><span style="color:#B8A965;">isHot</span><span style="color:#666666;">:</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">isHot</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//2.渲染组件到页面</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Weather</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//1.创建组件</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Weather</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">Component</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//初始化状态</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">state</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">isHot</span><span style="color:#999999;">:</span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span><span style="color:#998418;">wind</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">微风</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">render</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">isHot</span><span style="color:#999999;">,</span><span style="color:#B07D48;">wind</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">state</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">h1</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onClick</span><span style="color:#999999;">={</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">changeWeather</span><span style="color:#999999;">}&gt;</span><span style="color:#393A34;">今天天气很</span><span style="color:#999999;">{</span><span style="color:#B07D48;">isHot</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">炎热</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">凉爽</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span><span style="color:#393A34;">，</span><span style="color:#999999;">{</span><span style="color:#B07D48;">wind</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">h1</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//自定义方法————要用赋值语句的形式+箭头函数 **</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">changeWeather</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">isHot</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">state</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isHot</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">setState</span><span style="color:#999999;">({</span><span style="color:#998418;">isHot</span><span style="color:#999999;">:</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">isHot</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//2.渲染组件到页面</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Weather</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><h4 id="props" tabindex="-1">props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;props&quot;">​</a></h4><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//创建组件</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">Component</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//props简写形式: 对标签属性进行类型、必要性的限制</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">propTypes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">string</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isRequired</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//限制name必传，且为字符串</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">sex</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">string</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//限制sex为字符串</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">number</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//限制age为数值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">render</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#BD976A;">sex</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">props</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">姓名：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">性别：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">sex</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">年龄：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">age</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">/*Person.propTypes = {</span></span>
+<span class="line"><span style="color:#758575DD;">	name:PropTypes.string.isRequired, //限制name必传，且为字符串</span></span>
+<span class="line"><span style="color:#758575DD;">	sex:PropTypes.string,//限制sex为字符串</span></span>
+<span class="line"><span style="color:#758575DD;">	age:PropTypes.number,//限制age为数值</span></span>
+<span class="line"><span style="color:#758575DD;">	speak:PropTypes.func,//限制speak为函数</span></span>
+<span class="line"><span style="color:#758575DD;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">Person.defaultProps = {//指定默认标签属性值</span></span>
+<span class="line"><span style="color:#758575DD;">	sex:&#39;男&#39;,//sex默认值为男</span></span>
+<span class="line"><span style="color:#758575DD;">	age:18 //age默认值为18</span></span>
+<span class="line"><span style="color:#758575DD;">}*/</span></span>
+<span class="line"><span style="color:#758575DD;">//渲染组件到页面</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">jerry</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">={</span><span style="color:#4C9A91;">19</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">sex</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">男</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">tom</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">={</span><span style="color:#4C9A91;">18</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sex</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">女</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老刘</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span><span style="color:#B8A965;">sex</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">女</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">// ReactDOM.render(&lt;Person name={p.name} age={p.age} sex={p.sex}/&gt;,document.getElementById(&#39;test3&#39;))</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{...</span><span style="color:#BD976A;">p</span><span style="color:#666666;">}/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//创建组件</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">Component</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//props简写形式: 对标签属性进行类型、必要性的限制</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">propTypes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">string</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isRequired</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//限制name必传，且为字符串</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">sex</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">string</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//限制sex为字符串</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">number</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//限制age为数值</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">render</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#B07D48;">sex</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">props</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">姓名：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">性别：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">sex</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">年龄：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">age</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">/*Person.propTypes = {</span></span>
+<span class="line"><span style="color:#A0ADA0;">	name:PropTypes.string.isRequired, //限制name必传，且为字符串</span></span>
+<span class="line"><span style="color:#A0ADA0;">	sex:PropTypes.string,//限制sex为字符串</span></span>
+<span class="line"><span style="color:#A0ADA0;">	age:PropTypes.number,//限制age为数值</span></span>
+<span class="line"><span style="color:#A0ADA0;">	speak:PropTypes.func,//限制speak为函数</span></span>
+<span class="line"><span style="color:#A0ADA0;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">Person.defaultProps = {//指定默认标签属性值</span></span>
+<span class="line"><span style="color:#A0ADA0;">	sex:&#39;男&#39;,//sex默认值为男</span></span>
+<span class="line"><span style="color:#A0ADA0;">	age:18 //age默认值为18</span></span>
+<span class="line"><span style="color:#A0ADA0;">}*/</span></span>
+<span class="line"><span style="color:#A0ADA0;">//渲染组件到页面</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Person</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">jerry</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">={</span><span style="color:#2F798A;">19</span><span style="color:#999999;">}</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">sex</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">男</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Person</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">tom</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">={</span><span style="color:#2F798A;">18</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sex</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">女</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老刘</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span><span style="color:#998418;">sex</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">女</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">// ReactDOM.render(&lt;Person name={p.name} age={p.age} sex={p.sex}/&gt;,document.getElementById(&#39;test3&#39;))</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Person</span><span style="color:#393A34;"> </span><span style="color:#999999;">{...</span><span style="color:#B07D48;">p</span><span style="color:#999999;">}/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><p><strong>函数组件使用props</strong></p><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">props</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#BD976A;">sex</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">props</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">姓名：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">性别：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">sex</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">年龄：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">age</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">Person</span><span style="color:#666666;">.</span><span style="color:#BD976A;">propTypes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">string</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isRequired</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">sex</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">string</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">number</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">Person</span><span style="color:#666666;">.</span><span style="color:#BD976A;">defaultProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">sex</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">男</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">props</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#B07D48;">sex</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">props</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">姓名：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">性别：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">sex</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">年龄：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">age</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">Person</span><span style="color:#999999;">.</span><span style="color:#B07D48;">propTypes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">string</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isRequired</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">sex</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">string</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">number</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">Person</span><span style="color:#999999;">.</span><span style="color:#B07D48;">defaultProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">sex</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">男</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="refs" tabindex="-1">refs <a class="header-anchor" href="#refs" aria-label="Permalink to &quot;refs&quot;">​</a></h4><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Demo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">Component</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">myRef2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">createRef</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//3.createRef形式</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">showData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">input1</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">refs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//1.字符串形式</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">input2</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//2.回调函数形式</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">saveInput</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">input2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">=@=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">c</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">render</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">input1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">/*字符串形式*/</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			  	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">={(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">)=&gt;{</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">input2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#666666;">;</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">c</span><span style="color:#666666;">);}}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">/*回调函数形式*/</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">               	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">={</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">saveInput</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">={</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">myRef</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;{</span><span style="color:#758575DD;">/*createRef形式*/</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Demo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Demo</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">Component</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">myRef2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">createRef</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//3.createRef形式</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">showData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">input1</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">refs</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//1.字符串形式</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">input2</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//2.回调函数形式</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">saveInput</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">input2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">=@=</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">c</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">render</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">input1</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">/*字符串形式*/</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">			  	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">={(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">)=&gt;{</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">input2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#999999;">;</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">c</span><span style="color:#999999;">);}}</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">/*回调函数形式*/</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">               	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">={</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">saveInput</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">={</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">myRef</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;{</span><span style="color:#A0ADA0;">/*createRef形式*/</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Demo</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">1</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><blockquote><p>注意: 回调函数形式执行次数</p></blockquote><h3 id="事件处理" tabindex="-1">事件处理 <a class="header-anchor" href="#事件处理" aria-label="Permalink to &quot;事件处理&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>(1).通过onXxx属性指定事件处理函数(注意大小写)</p><p>​ a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性</p><p>​ b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效</p><p>(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref</p></div><p><strong>高阶函数</strong>：参数或返回值是一个函数满足一个条件则为高阶函数。</p><p>​ 常见的高阶函数有：Promise、setTimeout、arr.map()等等</p><p><strong>函数的柯里化</strong>：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">b</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">c</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//函数柯里化传参</span></span>
+<span class="line"><span style="color:#80A665;">saveFormData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">dataType</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">event</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">setState</span><span style="color:#666666;">({[</span><span style="color:#BD976A;">dataType</span><span style="color:#666666;">]:</span><span style="color:#BD976A;">event</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//&lt;input onChange={this.saveFormData(&#39;username&#39;)} type=&quot;text&quot; name=&quot;username&quot;/&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//箭头函数传参</span></span>
+<span class="line"><span style="color:#80A665;">saveFormData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">dataType</span><span style="color:#666666;">,</span><span style="color:#BD976A;">event</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">setState</span><span style="color:#666666;">({[</span><span style="color:#BD976A;">dataType</span><span style="color:#666666;">]:</span><span style="color:#BD976A;">event</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//&lt;input onChange={event =&gt; this.saveFormData(&#39;username&#39;,event) } type=&quot;text&quot; name=&quot;username&quot;/&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">b</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">c</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//函数柯里化传参</span></span>
+<span class="line"><span style="color:#59873A;">saveFormData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">dataType</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">event</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">setState</span><span style="color:#999999;">({[</span><span style="color:#B07D48;">dataType</span><span style="color:#999999;">]:</span><span style="color:#B07D48;">event</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//&lt;input onChange={this.saveFormData(&#39;username&#39;)} type=&quot;text&quot; name=&quot;username&quot;/&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//箭头函数传参</span></span>
+<span class="line"><span style="color:#59873A;">saveFormData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">dataType</span><span style="color:#999999;">,</span><span style="color:#B07D48;">event</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">setState</span><span style="color:#999999;">({[</span><span style="color:#B07D48;">dataType</span><span style="color:#999999;">]:</span><span style="color:#B07D48;">event</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//&lt;input onChange={event =&gt; this.saveFormData(&#39;username&#39;,event) } type=&quot;text&quot; name=&quot;username&quot;/&gt;</span></span></code></pre></div><h3 id="组件生命周期" tabindex="-1">组件生命周期 <a class="header-anchor" href="#组件生命周期" aria-label="Permalink to &quot;组件生命周期&quot;">​</a></h3><p><strong>旧版(16)</strong></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220421223156627.png" alt="image-20220421223156627"></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/* </span></span>
+<span class="line"><span style="color:#758575DD;">1. 初始化阶段: 由ReactDOM.render()触发---初次渲染</span></span>
+<span class="line"><span style="color:#758575DD;">            1.	constructor()</span></span>
+<span class="line"><span style="color:#758575DD;">            2.	componentWillMount()</span></span>
+<span class="line"><span style="color:#758575DD;">            3.	render()</span></span>
+<span class="line"><span style="color:#758575DD;">            4.	componentDidMount() =====&gt; 常用</span></span>
+<span class="line"><span style="color:#758575DD;">            一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</span></span>
+<span class="line"><span style="color:#758575DD;">            </span></span>
+<span class="line"><span style="color:#758575DD;">2. 更新阶段: 由组件内部this.setSate()或父组件render触发</span></span>
+<span class="line"><span style="color:#758575DD;">            1.	shouldComponentUpdate()</span></span>
+<span class="line"><span style="color:#758575DD;">            2.	componentWillUpdate()</span></span>
+<span class="line"><span style="color:#758575DD;">            3.	render() =====&gt; 必须使用的一个</span></span>
+<span class="line"><span style="color:#758575DD;">            4.	componentDidUpdate()</span></span>
+<span class="line"><span style="color:#758575DD;">            </span></span>
+<span class="line"><span style="color:#758575DD;">3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发</span></span>
+<span class="line"><span style="color:#758575DD;">            1.	componentWillUnmount()  =====&gt; 常用</span></span>
+<span class="line"><span style="color:#758575DD;">            一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/* </span></span>
+<span class="line"><span style="color:#A0ADA0;">1. 初始化阶段: 由ReactDOM.render()触发---初次渲染</span></span>
+<span class="line"><span style="color:#A0ADA0;">            1.	constructor()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            2.	componentWillMount()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            3.	render()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            4.	componentDidMount() =====&gt; 常用</span></span>
+<span class="line"><span style="color:#A0ADA0;">            一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</span></span>
+<span class="line"><span style="color:#A0ADA0;">            </span></span>
+<span class="line"><span style="color:#A0ADA0;">2. 更新阶段: 由组件内部this.setSate()或父组件render触发</span></span>
+<span class="line"><span style="color:#A0ADA0;">            1.	shouldComponentUpdate()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            2.	componentWillUpdate()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            3.	render() =====&gt; 必须使用的一个</span></span>
+<span class="line"><span style="color:#A0ADA0;">            4.	componentDidUpdate()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            </span></span>
+<span class="line"><span style="color:#A0ADA0;">3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发</span></span>
+<span class="line"><span style="color:#A0ADA0;">            1.	componentWillUnmount()  =====&gt; 常用</span></span>
+<span class="line"><span style="color:#A0ADA0;">            一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span></code></pre></div><p><strong>新版(17+)</strong></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220421223604701.png" alt="image-20220421223604701"></p><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#D4976C;">1.</span><span style="color:#DBD7CAEE;"> 初始化阶段: 由ReactDOM.render()触发---初次渲染</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            1.	constructor()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            2.	getDerivedStateFromProps</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            3.	render()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            4.	componentDidMount() =====&gt; 常用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</span></span>
+<span class="line"><span style="color:#D4976C;">2.</span><span style="color:#DBD7CAEE;"> 更新阶段: 由组件内部this.setSate()或父组件重新render触发</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            1.	getDerivedStateFromProps</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            2.	shouldComponentUpdate()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            3.	render()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            4.	getSnapshotBeforeUpdate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            5.	componentDidUpdate()</span></span>
+<span class="line"><span style="color:#D4976C;">3.</span><span style="color:#DBD7CAEE;"> 卸载组件: 由ReactDOM.unmountComponentAtNode()触发</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            1.	componentWillUnmount()  =====&gt; 常用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#A65E2B;">1.</span><span style="color:#393A34;"> 初始化阶段: 由ReactDOM.render()触发---初次渲染</span></span>
+<span class="line"><span style="color:#393A34;">            1.	constructor()</span></span>
+<span class="line"><span style="color:#393A34;">            2.	getDerivedStateFromProps</span></span>
+<span class="line"><span style="color:#393A34;">            3.	render()</span></span>
+<span class="line"><span style="color:#393A34;">            4.	componentDidMount() =====&gt; 常用</span></span>
+<span class="line"><span style="color:#393A34;">                        一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</span></span>
+<span class="line"><span style="color:#A65E2B;">2.</span><span style="color:#393A34;"> 更新阶段: 由组件内部this.setSate()或父组件重新render触发</span></span>
+<span class="line"><span style="color:#393A34;">            1.	getDerivedStateFromProps</span></span>
+<span class="line"><span style="color:#393A34;">            2.	shouldComponentUpdate()</span></span>
+<span class="line"><span style="color:#393A34;">            3.	render()</span></span>
+<span class="line"><span style="color:#393A34;">            4.	getSnapshotBeforeUpdate</span></span>
+<span class="line"><span style="color:#393A34;">            5.	componentDidUpdate()</span></span>
+<span class="line"><span style="color:#A65E2B;">3.</span><span style="color:#393A34;"> 卸载组件: 由ReactDOM.unmountComponentAtNode()触发</span></span>
+<span class="line"><span style="color:#393A34;">            1.	componentWillUnmount()  =====&gt; 常用</span></span>
+<span class="line"><span style="color:#393A34;">                        一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息</span></span></code></pre></div><p><strong>getSnapshotBeforeUpdate</strong></p><blockquote><p>在render之前调用，state已更新</p><p>典型场景：获取render之前的dom状态</p></blockquote><p><strong>getDerivedStateFromProps</strong></p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>1：当state需要从props初始化时，使用</p><p>2：尽量不使用，维护俩者状态需要消耗额外资源，增加复杂度</p><p>3：每次render都会调用</p><p>4：典型场景表单获取默认值</p></div><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki vitesse-dark has-diff vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> 面试相关题:</span></span>
+<span class="line"><span style="color:#4D9375;">	1). react/vue中的key有什么作用？（key的内部原理是什么？）</span></span>
+<span class="line"><span style="color:#4D9375;">	2). 为什么遍历列表时，key最好不要用index?</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#D4976C;">1.</span><span style="color:#DBD7CAEE;"> 虚拟DOM中key的作用：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">	2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        b. 旧虚拟DOM中未找到与新虚拟DOM相同的key</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    根据数据创建新的真实DOM，随后渲染到到页面</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#D4976C;">2.</span><span style="color:#DBD7CAEE;"> 用index作为key可能会引发的问题：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#D4976C;">1.</span><span style="color:#DBD7CAEE;"> 若对数据进行：逆序添加、逆序删除等破坏顺序操作:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    会产生没有必要的真实DOM更新 ==&gt; 界面效果没问题, 但效率低。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#D4976C;">2.</span><span style="color:#DBD7CAEE;"> 如果结构中还包含输入类的DOM：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    会产生错误DOM更新 ==&gt; 界面有问题。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#D4976C;">3.</span><span style="color:#DBD7CAEE;"> 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        仅用于渲染列表用于展示，使用index作为key是没有问题的。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#D4976C;">3.</span><span style="color:#DBD7CAEE;"> 开发中如何选择key?:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    2.如果确定只是简单的展示数据，用index也是可以的。</span></span></code></pre><pre class="shiki vitesse-light has-diff vp-code-light"><code><span class="line"><span style="color:#393A34;"> 面试相关题:</span></span>
+<span class="line"><span style="color:#1C6B48;">	1). react/vue中的key有什么作用？（key的内部原理是什么？）</span></span>
+<span class="line"><span style="color:#1C6B48;">	2). 为什么遍历列表时，key最好不要用index?</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A65E2B;">1.</span><span style="color:#393A34;"> 虚拟DOM中key的作用：</span></span>
+<span class="line"><span style="color:#393A34;">	1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">	2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, </span></span>
+<span class="line"><span style="color:#393A34;">                    随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：</span></span>
+<span class="line"><span style="color:#393A34;">                    (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM</span></span>
+<span class="line"><span style="color:#393A34;">                    (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        b. 旧虚拟DOM中未找到与新虚拟DOM相同的key</span></span>
+<span class="line"><span style="color:#393A34;">                    根据数据创建新的真实DOM，随后渲染到到页面</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A65E2B;">2.</span><span style="color:#393A34;"> 用index作为key可能会引发的问题：</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">1.</span><span style="color:#393A34;"> 若对数据进行：逆序添加、逆序删除等破坏顺序操作:</span></span>
+<span class="line"><span style="color:#393A34;">                    会产生没有必要的真实DOM更新 ==&gt; 界面效果没问题, 但效率低。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">2.</span><span style="color:#393A34;"> 如果结构中还包含输入类的DOM：</span></span>
+<span class="line"><span style="color:#393A34;">                    会产生错误DOM更新 ==&gt; 界面有问题。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">3.</span><span style="color:#393A34;"> 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，</span></span>
+<span class="line"><span style="color:#393A34;">        仅用于渲染列表用于展示，使用index作为key是没有问题的。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A65E2B;">3.</span><span style="color:#393A34;"> 开发中如何选择key?:</span></span>
+<span class="line"><span style="color:#393A34;">    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。</span></span>
+<span class="line"><span style="color:#393A34;">    2.如果确定只是简单的展示数据，用index也是可以的。</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Framework/React/React基础总结一.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Angular基础总结二</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Vite原理学习</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.html" "b/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.html"
new file mode 100644
index 00000000..91502cba
--- /dev/null
+++ "b/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Vite底层原理学习 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Framework_Vue_Vite原理学习.md.8895a11d.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Angular</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结三</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结二</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>React</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>React基础总结一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vite原理学习</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue3补漏笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页与搜索条件记录并回显优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>列表最后一条数据删除处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Framework_Vue_Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-6b87e69f><div><h1 id="vite底层原理学习" tabindex="-1">Vite底层原理学习 <a class="header-anchor" href="#vite底层原理学习" aria-label="Permalink to &quot;Vite底层原理学习&quot;">​</a></h1><h2 id="构建工具承担" tabindex="-1">构建工具承担： <a class="header-anchor" href="#构建工具承担" aria-label="Permalink to &quot;构建工具承担：&quot;">​</a></h2><ol><li>模块化开发支持：ES Module、CommonJS、AMD、CMD等</li><li>处理代码兼容性：babel语法降级，less/sass/stylus等语法转换</li><li>提升项目性能：压缩代码，合并代码，图片压缩，代码分割，懒加载，预加载等</li><li>优化开发体验：热更新，自动刷新，代理服务器，自动打开浏览器等</li><li>统一开发标准：eslint代码检查，prettier代码格式化，git提交规范等</li></ol></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Framework/Vue/Vite原理学习.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>React基础总结一</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Vue3补漏笔记</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.html" "b/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.html"
new file mode 100644
index 00000000..2dcb846d
--- /dev/null
+++ "b/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.html"
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Framework_Vue_Vue3补漏笔记.md.6422a5f9.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Angular</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结三</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结二</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>React</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>React基础总结一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vite原理学习</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue3补漏笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页与搜索条件记录并回显优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>列表最后一条数据删除处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Framework_Vue_Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-6b87e69f><div><h2 id="inheritattrs" tabindex="-1">inheritAttrs <a class="header-anchor" href="#inheritattrs" aria-label="Permalink to &quot;inheritAttrs&quot;">​</a></h2><blockquote><p>唯一一个需要用额外的 <code>script</code> 块书写的选项</p></blockquote><div class="tip custom-block"><p class="custom-block-title">$attrs</p><p>透传 Attributes 是指由父组件传入，且没有被子组件声明为 props 或是 组件自定义事件的 attributes 和 事件处理函数。</p></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#FDAEB7;">Home</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">:attr</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">12345</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">:val</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">false</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#B31D28;">Home</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">:attr</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">12345</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">:val</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">false</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h3 id="场景一" tabindex="-1">场景一： <a class="header-anchor" href="#场景一" aria-label="Permalink to &quot;场景一：&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">home</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    Home work!</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">inheritAttrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//默认继承父组件属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">this.$attrs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$attrs</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">home</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    Home work!</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">inheritAttrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//默认继承父组件属性</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">this.$attrs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$attrs</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192154427.png" alt="image-20230219215449385"></p><h3 id="场景二" tabindex="-1">场景二： <a class="header-anchor" href="#场景二" aria-label="Permalink to &quot;场景二：&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">home</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    Home work!</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">inheritAttrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fasle</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//取消继承</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">this.$attrs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$attrs</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">home</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    Home work!</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">inheritAttrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fasle</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//取消继承</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">this.$attrs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$attrs</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192154391.png" alt="image-20230219215459359"></p><h3 id="场景三" tabindex="-1">场景三： <a class="header-anchor" href="#场景三" aria-label="Permalink to &quot;场景三：&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">home</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    Home work!</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">inheritAttrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fasle</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//取消继承</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">this.$attrs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$attrs</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//输出被props接收以外的属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">props</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">val</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">home</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    Home work!</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">inheritAttrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fasle</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//取消继承</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">this.$attrs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$attrs</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//输出被props接收以外的属性</span></span>
+<span class="line"><span style="color:#393A34;">	  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">props</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">val</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192155953.png" alt="image-20230219215510922"></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Framework/Vue/Vue3补漏笔记.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Vite原理学习</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>分页与搜索条件记录并回显优化</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.html" "b/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.html"
new file mode 100644
index 00000000..592be1d9
--- /dev/null
+++ "b/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.html"
@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>分页与搜索条件记录并回显优化 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Framework_Vue_分页与搜索条件记录并回显优化.md.8805bdc2.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Angular</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结三</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结二</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>React</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>React基础总结一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vite原理学习</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue3补漏笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页与搜索条件记录并回显优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>列表最后一条数据删除处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Framework_Vue_%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-6b87e69f><div><h1 id="分页与搜索条件记录并回显优化" tabindex="-1">分页与搜索条件记录并回显优化 <a class="header-anchor" href="#分页与搜索条件记录并回显优化" aria-label="Permalink to &quot;分页与搜索条件记录并回显优化&quot;">​</a></h1><h2 id="整体逻辑" tabindex="-1">整体逻辑 <a class="header-anchor" href="#整体逻辑" aria-label="Permalink to &quot;整体逻辑&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302152051979.png" alt="image-20230215205106488"></p><h2 id="store" tabindex="-1">Store <a class="header-anchor" href="#store" aria-label="Permalink to &quot;Store&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Vuex</span><span style="color:#666666;">.</span><span style="color:#80A665;">Store</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">state</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">pageOptions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">layout</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">prev, pager, next, jumper, sizes, total</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">pageSizes</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Vuex</span><span style="color:#999999;">.</span><span style="color:#59873A;">Store</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">state</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">pageOptions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">layout</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">prev, pager, next, jumper, sizes, total</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">pageSizes</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="mixins" tabindex="-1">Mixins <a class="header-anchor" href="#mixins" aria-label="Permalink to &quot;Mixins&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mapState</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">vuex</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">data</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">wrapperLoading</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">gridLoading</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">isEchoCond</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//回显开关（某些页面特殊需要特殊处理）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">searchConds</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">paginationOptions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">currentPage</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">pageSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">total</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">computed</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">...</span><span style="color:#80A665;">mapState</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">pageOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">methods</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//搜索</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">search</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">searchConds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">conds</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$route</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newQuery</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">({},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">conds</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">stringify</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">page</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$router</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">query</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newQuery</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		 </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//每页数量改变</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">sizeChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queryFn</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$route</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$router</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">query</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">({},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">page</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//页码改变</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">currentChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">page</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$route</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$router</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">query</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">({},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">page</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">page</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//从query中获取分页信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">initPage</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">page</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$route</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">page</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">page</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">pageSize</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">conds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">conds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">conds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEchoCond</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				 </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">searchConds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				 </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">initSearchFromCond</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">searchConds</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			 </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//回显搜索条件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">initSearchFromCond</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">relateOptions</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">options</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nameArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">options</span><span style="color:#666666;">.</span><span style="color:#BD976A;">list</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">options</span><span style="color:#666666;">.</span><span style="color:#BD976A;">model</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nameArr</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">conds</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cond</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">g</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">g</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">value</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">op</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">op</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">op</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">like</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#C4704F;">%</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">%</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">relateOptions</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">].</span><span style="color:#BD976A;">model</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mapState</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">vuex</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">data</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">wrapperLoading</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">gridLoading</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">isEchoCond</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//回显开关（某些页面特殊需要特殊处理）</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">searchConds</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">paginationOptions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">currentPage</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">pageSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">total</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">computed</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">...</span><span style="color:#59873A;">mapState</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">pageOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]),</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">methods</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//搜索</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">search</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">searchConds</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">conds</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$route</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newQuery</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">({},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">conds</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">stringify</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#998418;">page</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$router</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">query</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newQuery</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		 </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//每页数量改变</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">sizeChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queryFn</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$route</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$router</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">query</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">({},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">page</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//页码改变</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">currentChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">page</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$route</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$router</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">query</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">({},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">page</span><span style="color:#393A34;"> </span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">page</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//从query中获取分页信息</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">initPage</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">page</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$route</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">page</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;">  </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">page</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">pageSize</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;">  </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">conds</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">conds</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">conds</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEchoCond</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				 </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">searchConds</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">				 </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">initSearchFromCond</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">searchConds</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">			 </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//回显搜索条件</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">initSearchFromCond</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">relateOptions</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">options</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nameArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">options</span><span style="color:#999999;">.</span><span style="color:#B07D48;">list</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">options</span><span style="color:#999999;">.</span><span style="color:#B07D48;">model</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nameArr</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">conds</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cond</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">g</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">g</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">value</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">op</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">op</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">op</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">like</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#AB5E3F;">%</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">%</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">relateOptions</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">].</span><span style="color:#B07D48;">model</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="列表页-xxxlist-vue" tabindex="-1">列表页 xxxList.vue <a class="header-anchor" href="#列表页-xxxlist-vue" aria-label="Permalink to &quot;列表页 xxxList.vue&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">data</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">relateOptions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">inputWidth</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">200px</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">list</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">number</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">序号</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">placeholder</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">情输入序号</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">like</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">名称</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">placeholder</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">请输入名称</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">esn</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">like</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ESN</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">placeholder</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">请输入ESN</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">status.status</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">状态</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">valueList</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">全部</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Online</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">在线</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Offline</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">离线</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">model</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">number</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">like</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">value</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#80A665;">mixins</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">listPage</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#80A665;">watch</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">$route.query</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">immediate</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">deep</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">handler</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">initPage</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">queryXXX</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#80A665;">methods</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">queryXXX</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">gridLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">qobj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">qobj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">conditions</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">searchConds</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pageSize</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">qobj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">limit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pageSize</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">qobj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pageSize</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">queryXXX</span><span style="color:#666666;">(</span><span style="color:#BD976A;">qobj</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">success</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inventories</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">xxxList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">success</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inventories</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">total</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">success</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">total</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">gridLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">searchCondDone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">search</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">handleSizeChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">sizeChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">handleCurrentChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">page</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">currentChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">page</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">data</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">relateOptions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">inputWidth</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">200px</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">list</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">number</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">序号</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">placeholder</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">情输入序号</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">like</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">名称</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">placeholder</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">请输入名称</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">esn</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">like</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ESN</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">placeholder</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">请输入ESN</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">status.status</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">状态</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">valueList</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">全部</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Online</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">在线</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Offline</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">离线</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">model</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">number</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">like</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">value</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#59873A;">mixins</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">listPage</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#59873A;">watch</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">$route.query</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">:</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">immediate</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">deep</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">handler</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">initPage</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">queryXXX</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#59873A;">methods</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B07D48;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">queryXXX</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">gridLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">		  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">qobj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">qobj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">conditions</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">searchConds</span></span>
+<span class="line"><span style="color:#393A34;">      </span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pageSize</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">qobj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">limit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pageSize</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">qobj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">start</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pageSize</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">queryXXX</span><span style="color:#999999;">(</span><span style="color:#B07D48;">qobj</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">success</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inventories</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">xxxList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">success</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inventories</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">total</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">success</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">total</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">gridLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">searchCondDone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">search</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">handleSizeChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">sizeChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">handleCurrentChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">page</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">currentChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">page</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Framework/Vue/分页与搜索条件记录并回显优化.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Vue3补漏笔记</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>列表最后一条数据删除处理</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.html" "b/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.html"
new file mode 100644
index 00000000..7ec92200
--- /dev/null
+++ "b/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.html"
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>一、删除最后一条数据跳转到上一页 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Framework_Vue_列表最后一条数据删除处理.md.9f59b85b.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Angular</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结三</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Angular基础总结二</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>React</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>React基础总结一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vite原理学习</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue3补漏笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页与搜索条件记录并回显优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>列表最后一条数据删除处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Framework_Vue_%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-6b87e69f><div><h1 id="一、删除最后一条数据跳转到上一页" tabindex="-1">一、删除最后一条数据跳转到上一页 <a class="header-anchor" href="#一、删除最后一条数据跳转到上一页" aria-label="Permalink to &quot;一、删除最后一条数据跳转到上一页&quot;">​</a></h1><blockquote><p>方案一</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/*</span></span>
+<span class="line"><span style="color:#758575DD;">paginationOptions: {</span></span>
+<span class="line"><span style="color:#758575DD;">    currentPage: 1,</span></span>
+<span class="line"><span style="color:#758575DD;">    pageSize: 10,</span></span>
+<span class="line"><span style="color:#758575DD;">    total: 0,</span></span>
+<span class="line"><span style="color:#758575DD;">},</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">removeDone</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">wrapperLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uuid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentRow</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">success</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">removeAccount</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uuid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">wrapperLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">success</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$notify</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">success</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">账号</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">删除成功</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//方案一: 判断是否为最后一条数据 并且总数据不能小于1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">total</span><span style="color:#666666;">,</span><span style="color:#BD976A;">currentPage</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        	</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">contactsData</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">total</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//方案二:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span><span style="color:#666666;">,</span><span style="color:#BD976A;">pageSize</span><span style="color:#666666;">,</span><span style="color:#BD976A;">total</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">//求删除后还有几页</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deleteAfterPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">ceil</span><span style="color:#666666;">((</span><span style="color:#BD976A;">total</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pageSize</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">//若删除后页数小于当前页, 取删除后的页数;否则不变</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">curPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deleteAfterPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deleteAfterPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">//当前页只有一页则为1,否则取计算得到的页</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">curPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">curPage</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">queryAccount</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$notify</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">error</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">账号</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">删除失败</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/*</span></span>
+<span class="line"><span style="color:#A0ADA0;">paginationOptions: {</span></span>
+<span class="line"><span style="color:#A0ADA0;">    currentPage: 1,</span></span>
+<span class="line"><span style="color:#A0ADA0;">    pageSize: 10,</span></span>
+<span class="line"><span style="color:#A0ADA0;">    total: 0,</span></span>
+<span class="line"><span style="color:#A0ADA0;">},</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">removeDone</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">wrapperLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uuid</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentRow</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">success</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">removeAccount</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uuid</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">wrapperLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">success</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$notify</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">success</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">账号</span><span style="color:#999999;">${</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">删除成功</span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//方案一: 判断是否为最后一条数据 并且总数据不能小于1</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">total</span><span style="color:#999999;">,</span><span style="color:#B07D48;">currentPage</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span></span>
+<span class="line"><span style="color:#393A34;">        	</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">contactsData</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">total</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//方案二:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span><span style="color:#999999;">,</span><span style="color:#B07D48;">pageSize</span><span style="color:#999999;">,</span><span style="color:#B07D48;">total</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">//求删除后还有几页</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deleteAfterPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">ceil</span><span style="color:#999999;">((</span><span style="color:#B07D48;">total</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pageSize</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">//若删除后页数小于当前页, 取删除后的页数;否则不变</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">curPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deleteAfterPage</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deleteAfterPage</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">//当前页只有一页则为1,否则取计算得到的页</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">curPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">curPage</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">queryAccount</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$notify</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">error</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">账号</span><span style="color:#999999;">${</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">删除失败</span><span style="color:#B5695999;">`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Framework/Vue/列表最后一条数据删除处理.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>分页与搜索条件记录并回显优化</span></a></div><div class="pager" data-v-ef5dee53><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.html"
new file mode 100644
index 00000000..1a156c78
--- /dev/null
+++ "b/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.html"
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Grid布局学习笔记 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_CSS_Grid布局学习笔记.md.6624dd93.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_CSS_Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-6b87e69f><div><h1 id="grid布局学习笔记" tabindex="-1">Grid布局学习笔记 <a class="header-anchor" href="#grid布局学习笔记" aria-label="Permalink to &quot;Grid布局学习笔记&quot;">​</a></h1><h2 id="实用网站" tabindex="-1">实用网站 <a class="header-anchor" href="#实用网站" aria-label="Permalink to &quot;实用网站&quot;">​</a></h2><ul><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fcssgridgarden.com%2F%23zh-cn" target="_blank" rel="noreferrer">GRID GARDEN 小游戏</a></li><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fcssgrid-generator.netlify.app%2F" target="_blank" rel="noreferrer">CSS Grid Generator 在线生成器</a></li><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fcss-tricks.com%2Fsnippets%2Fcss%2Fcomplete-guide-grid%2F%23introduction" target="_blank" rel="noreferrer">A Complete Guide to Grid 学习导航</a></li></ul><h2 id="基本概念" tabindex="-1">基本概念 <a class="header-anchor" href="#基本概念" aria-label="Permalink to &quot;基本概念&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162029422.png" alt="image-20230216202917923"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162031156.png" alt="image-20230216203121127"></p><h2 id="容器属性" tabindex="-1">容器属性 <a class="header-anchor" href="#容器属性" aria-label="Permalink to &quot;容器属性&quot;">​</a></h2><h3 id="开启-grid布局" tabindex="-1">开启 Grid布局 <a class="header-anchor" href="#开启-grid布局" aria-label="Permalink to &quot;开启 Grid布局&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="容器划分行列" tabindex="-1">容器划分行列 <a class="header-anchor" href="#容器划分行列" aria-label="Permalink to &quot;容器划分行列&quot;">​</a></h3><ol><li>取值为数值 <code>grid-template-rows:100px 100px 100px</code></li><li>取值为百分比 <code>grid-template-rows:20% 30% 50%</code></li><li>重复函数 <code>grid-template-rows:repeat(3,20%)</code></li><li>自动填充 <code>grid-template-rows:repeat(auto-fill, 30%)</code></li><li>auto自动 <code>grid-template-rows:100px auto 100px</code></li><li>fr片段划分 <code>grid-template-rows:1fr 2fr 1fr</code></li><li>minmax() <code>grid-template-rows:200px 200px minmax(100px,200px)</code></li></ol><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162056312.png" alt="image-20230216205607291"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162056725.png" alt="image-20230216205635684"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162057751.png" alt="image-20230216205710712"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162050568.png" alt="image-20230216205031540"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162050881.png" alt="image-20230216205043840"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162052005.png" alt="image-20230216205247964"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162055862.png" alt=""></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162057797.png" alt="image-20230216205743766"></p><h3 id="调整间距属性" tabindex="-1">调整间距属性 <a class="header-anchor" href="#调整间距属性" aria-label="Permalink to &quot;调整间距属性&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法一：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row-gap</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column-gap</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">30</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">/* 写法二：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-gap</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">/* 写法三：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">gap</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法一：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row-gap</span><span style="color:#999999;">:</span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column-gap</span><span style="color:#999999;">:</span><span style="color:#2F798A;">30</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">/* 写法二：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-gap</span><span style="color:#999999;">:</span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">/* 写法三：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">gap</span><span style="color:#999999;">:</span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162102659.png" alt="image-20230216210259623"></p><h3 id="容器内网格对齐方式" tabindex="-1">容器内网格对齐方式 <a class="header-anchor" href="#容器内网格对齐方式" aria-label="Permalink to &quot;容器内网格对齐方式&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">解释</p><p>网格相对于容器的对齐方式</p></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/*justify-content:space-around;</span></span>
+<span class="line"><span style="color:#758575DD;">  align-content:space-evenly;*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">palce-content</span><span style="color:#666666;">:</span><span style="color:#C99076;">space-around</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">space-evenly</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/*justify-content:space-around;</span></span>
+<span class="line"><span style="color:#A0ADA0;">  align-content:space-evenly;*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">palce-content</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">space-around</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">space-evenly</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162127014.png" alt="image-20230216212726986"></p><p><strong>案例</strong></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">align-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">align-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162231062.png" alt="image-20230216223101040"></p><h3 id="网格内项目对其方式" tabindex="-1">网格内项目对其方式 <a class="header-anchor" href="#网格内项目对其方式" aria-label="Permalink to &quot;网格内项目对其方式&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">解释</p><p>项目相对于网格/区域的对齐方式</p></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">justify</span><span style="color:#CB7676;">-</span><span style="color:#80A665;">items</span><span style="color:#666666;">:</span><span style="color:#BD976A;">center</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">//start, end</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">align</span><span style="color:#CB7676;">-</span><span style="color:#80A665;">items</span><span style="color:#666666;">:</span><span style="color:#BD976A;">center</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">//start, end</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//place-items:center center //水平 垂直</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">justify</span><span style="color:#AB5959;">-</span><span style="color:#59873A;">items</span><span style="color:#999999;">:</span><span style="color:#B07D48;">center</span><span style="color:#999999;">;</span><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">//start, end</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">align</span><span style="color:#AB5959;">-</span><span style="color:#59873A;">items</span><span style="color:#999999;">:</span><span style="color:#B07D48;">center</span><span style="color:#999999;">;</span><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">//start, end</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//place-items:center center //水平 垂直</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162118033.png" alt="image-20230216211850992"></p><p><strong>案例：</strong></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">box</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item a</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item b</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">box</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item a</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item b</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-template-columns</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-template-rows</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">align-items</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">justify-items</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-gap</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-template-areas</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">a a a</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">. b b</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">c c c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">dashed</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">000</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#BD976A;">a</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#BD976A;">b</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> b</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#BD976A;">c</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-template-columns</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">repeat</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-template-rows</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">repeat</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">align-items</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">justify-items</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-gap</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-template-areas</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">a a a</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">. b b</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">c c c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">dashed</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">000</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#B07D48;">a</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#B07D48;">b</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> b</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#B07D48;">c</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162226287.png" alt="image-20230216222635254"></p><h3 id="项目排列顺序" tabindex="-1">项目排列顺序 <a class="header-anchor" href="#项目排列顺序" aria-label="Permalink to &quot;项目排列顺序&quot;">​</a></h3><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162106652.png" alt="image-20230216210624604"></p><h3 id="容器中区域定义" tabindex="-1">容器中区域定义 <a class="header-anchor" href="#容器中区域定义" aria-label="Permalink to &quot;容器中区域定义&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">box</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item a</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item b</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">box</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item a</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item b</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-template-columns</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-template-rows</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">align-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-gap</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-template-areas</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">a a a</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">. b b</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">c c c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">dashed</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">000</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">a</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">b</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> b</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">c</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-template-columns</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">repeat</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-template-rows</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">repeat</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">align-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-gap</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-template-areas</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">a a a</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">. b b</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">c c c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">dashed</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">000</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">a</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">b</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> b</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">c</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162206984.png" alt="image-20230216220606952"></p><h2 id="项目属性" tabindex="-1">项目属性 <a class="header-anchor" href="#项目属性" aria-label="Permalink to &quot;项目属性&quot;">​</a></h2><h3 id="合并单元格属性" tabindex="-1">合并单元格属性 <a class="header-anchor" href="#合并单元格属性" aria-label="Permalink to &quot;合并单元格属性&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">header</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法一：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column-start</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column-end</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row-start</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row-end</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法二：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> / </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> / </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法三：使用 span 关键字，表示跨越。表示项目的左边框距离右边框跨越 2 个网格。*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column-start</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> span </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法四：若跨度为 1，则可简写第二根网格线*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> / </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> ==&gt;  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#DBD7CAEE;"> / </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> ==&gt;  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">header</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法一：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column-start</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column-end</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row-start</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row-end</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法二：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> / </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> / </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法三：使用 span 关键字，表示跨越。表示项目的左边框距离右边框跨越 2 个网格。*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column-start</span><span style="color:#999999;">:</span><span style="color:#393A34;"> span </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法四：若跨度为 1，则可简写第二根网格线*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> / </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span><span style="color:#393A34;"> ==&gt;  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#393A34;"> / </span><span style="color:#2F798A;">4</span><span style="color:#999999;">;</span><span style="color:#393A34;"> ==&gt;  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162136332.png" alt="image-20230216213656308"></p><h3 id="项目区域定义" tabindex="-1">项目区域定义 <a class="header-anchor" href="#项目区域定义" aria-label="Permalink to &quot;项目区域定义&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">a</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">b</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> b</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">c</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">a</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">b</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> b</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">c</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">grid-area</p><p><code>grid-area</code> 属性还可用作 <code>grid-row-start</code>、<code>grid-column-start</code>、<code>grid-row-end</code>、<code>grid-column-end</code> 的合并简写形式，直接指定项目的位置。</p></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="单个项目位置" tabindex="-1">单个项目位置 <a class="header-anchor" href="#单个项目位置" aria-label="Permalink to &quot;单个项目位置&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">justify-self 和 align-self</p><p><code>justify-self</code> 属性设置单元格内容的水平位置（左中右），跟 <code>justify-items</code> 属性的用法完全一致，但只作用于单个项目。</p><p><code>align-self</code> 属性设置单元格内容的垂直位置（上中下），跟 <code>align-items</code> 属性的用法完全一致，也是只作用于单个项目。</p></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-self</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">start</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">end</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">center</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">stretch</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-self</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">start</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">end</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">center</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">stretch</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 简写 place-self: &lt;align-self&gt; &lt;justify-self&gt;; */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-self</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">start</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">end</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">center</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">stretch</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-self</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">start</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">end</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">center</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">stretch</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 简写 place-self: &lt;align-self&gt; &lt;justify-self&gt;; */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/CSS/Grid布局学习笔记.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><!----></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>常用代码段</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.html" "b/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.html"
new file mode 100644
index 00000000..15547eaa
--- /dev/null
+++ "b/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.html"
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>CSS常用代码段 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_CSS_常用代码段.md.083fb786.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_CSS_%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-6b87e69f><div><h1 id="css常用代码段" tabindex="-1">CSS常用代码段 <a class="header-anchor" href="#css常用代码段" aria-label="Permalink to &quot;CSS常用代码段&quot;">​</a></h1><h2 id="单行与多行溢出隐藏" tabindex="-1">单行与多行溢出隐藏 <a class="header-anchor" href="#单行与多行溢出隐藏" aria-label="Permalink to &quot;单行与多行溢出隐藏&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">white-space</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">nowrap</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text-overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">ellipsis</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">white-space</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">nowrap</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text-overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">ellipsis</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-webkit-box</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text-overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">ellipsis</span><span style="color:#666666;">;</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">-webkit-box-orient</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">vertical</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/* 布局方向 */</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">-webkit-line-clamp</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* 显示三行文本 */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-webkit-box</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text-overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">ellipsis</span><span style="color:#999999;">;</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#998418;">-webkit-box-orient</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">vertical</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/* 布局方向 */</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#998418;">-webkit-line-clamp</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* 显示三行文本 */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="自定义滚动条" tabindex="-1">自定义滚动条 <a class="header-anchor" href="#自定义滚动条" aria-label="Permalink to &quot;自定义滚动条&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">html</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#4D9375;">body</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 隐藏滚动条 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">scrollbar-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* firefox */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">-ms-overflow-style</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* IE 10+ */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  &amp;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">:</span><span style="color:#C99076;">-webkit-scrollbar</span><span style="color:#DBD7CAEE;"> {</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    display: </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* Chrome Safari */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* 自定义滚动条 */</span></span>
+<span class="line"><span style="color:#4D9375;">body</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">auto</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">scrollbar-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* Firefox */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  &amp;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">:</span><span style="color:#C99076;">-webkit-scrollbar</span><span style="color:#DBD7CAEE;"> {</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    width: </span><span style="color:#4C9A91;">5</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  &amp;</span><span style="color:#666666;">::</span><span style="color:#BD976A;">-webkit-scrollbar-track-piece</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">$</span><span style="color:#C99076;">color</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">#</span><span style="color:#C99076;">000000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> $</span><span style="color:#C99076;">alpha</span><span style="color:#DBD7CAEE;">: </span><span style="color:#4C9A91;">.3</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  &amp;</span><span style="color:#666666;">::</span><span style="color:#BD976A;">-webkit-scrollbar-thumb</span><span style="color:#DBD7CAEE;">:vertical </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">0085F9</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">html</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#1E754F;">body</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 隐藏滚动条 */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">scrollbar-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* firefox */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">-ms-overflow-style</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* IE 10+ */</span></span>
+<span class="line"><span style="color:#393A34;">  &amp;</span><span style="color:#999999;">:</span><span style="color:#393A34;">:</span><span style="color:#A65E2B;">-webkit-scrollbar</span><span style="color:#393A34;"> {</span></span>
+<span class="line"><span style="color:#393A34;">    display: </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* Chrome Safari */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* 自定义滚动条 */</span></span>
+<span class="line"><span style="color:#1E754F;">body</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">auto</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">scrollbar-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* Firefox */</span></span>
+<span class="line"><span style="color:#393A34;">  &amp;</span><span style="color:#999999;">:</span><span style="color:#393A34;">:</span><span style="color:#A65E2B;">-webkit-scrollbar</span><span style="color:#393A34;"> {</span></span>
+<span class="line"><span style="color:#393A34;">    width: </span><span style="color:#2F798A;">5</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  &amp;</span><span style="color:#999999;">::</span><span style="color:#B07D48;">-webkit-scrollbar-track-piece</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#393A34;">$</span><span style="color:#A65E2B;">color</span><span style="color:#393A34;">: </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">000000</span><span style="color:#999999;">,</span><span style="color:#393A34;"> $</span><span style="color:#A65E2B;">alpha</span><span style="color:#393A34;">: </span><span style="color:#2F798A;">.3</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  &amp;</span><span style="color:#999999;">::</span><span style="color:#B07D48;">-webkit-scrollbar-thumb</span><span style="color:#393A34;">:vertical </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">0085F9</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><h2 id="画布网状满天星背景" tabindex="-1">画布网状满天星背景 <a class="header-anchor" href="#画布网状满天星背景" aria-label="Permalink to &quot;画布网状满天星背景&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">svg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">pattern</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">id</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">pattern-1</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">x</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">y</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">width</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">24</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">height</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">24</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">patternUnits</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">userSpaceOnUse</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">patternTransform</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">translate(-0.5,-0.5)</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">circle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cx</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0.5</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cy</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0.5</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">r</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0.5</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fill</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#60606F</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">circle</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">pattern</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">rect</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fill</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">url(#pattern-1)</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">rect</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">svg</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">svg</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">pattern</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">id</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">pattern-1</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">x</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">y</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">width</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">24</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">height</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">24</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">patternUnits</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">userSpaceOnUse</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">patternTransform</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">translate(-0.5,-0.5)</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">circle</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cx</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0.5</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cy</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0.5</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">r</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0.5</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fill</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#60606F</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">circle</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">pattern</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">rect</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fill</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">url(#pattern-1)</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">rect</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">svg</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">svg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin-top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:#</span><span style="color:#C99076;">13121a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">svg</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin-top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:#</span><span style="color:#A65E2B;">13121a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="demo wide" data-v-9caf4c6f><p class="demo-source-link" data-v-9caf4c6f><a href="https://github.com/fxzer/zerdocs/blob/master/docs/FrontEnd/CSS/demo/GridStar.vue" target="_blank" data-v-9caf4c6f>源码地址</a></p><!----><!----></div><h2 id="轮播闪光" tabindex="-1">轮播闪光 <a class="header-anchor" href="#轮播闪光" aria-label="Permalink to &quot;轮播闪光&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202306052345184.gif" alt=""></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">shine</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#CB7676;">to</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">bottom</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">right</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.3</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.15</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rotate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-45</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">animation</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> shine </span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;">s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">ease-in-out</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">infinite</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">keyframes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shine</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-200</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">to</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">150</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">shine</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#AB5959;">to</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">bottom</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">right</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.3</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.15</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rotate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-45</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">animation</span><span style="color:#999999;">:</span><span style="color:#393A34;"> shine </span><span style="color:#2F798A;">2</span><span style="color:#AB5959;">s</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">ease-in-out</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">infinite</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">keyframes</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shine</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">from</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-200</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">to</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">150</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="flex布局子元素给了高度-实际渲染确有小数点问题" tabindex="-1">flex布局子元素给了高度，实际渲染确有小数点问题 <a class="header-anchor" href="#flex布局子元素给了高度-实际渲染确有小数点问题" aria-label="Permalink to &quot;flex布局子元素给了高度，实际渲染确有小数点问题&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">flex-direction</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">column</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">child</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">child1</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">flex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> //需要给相邻元素添加</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">flex-direction</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">column</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">child</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">child1</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">flex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> //需要给相邻元素添加</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#dbd7caee;"></span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393a34;"></span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/CSS/常用代码段.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Grid布局学习笔记</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>揭秘读书摘要</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.html" "b/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.html"
new file mode 100644
index 00000000..4969b908
--- /dev/null
+++ "b/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.html"
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>妙妙怪的《CSS 揭秘》读书摘要 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_CSS_揭秘读书摘要.md.3689a434.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_CSS_%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-6b87e69f><div><h1 id="妙妙怪的《css-揭秘》读书摘要" tabindex="-1">妙妙怪的《CSS 揭秘》读书摘要 <a class="header-anchor" href="#妙妙怪的《css-揭秘》读书摘要" aria-label="Permalink to &quot;妙妙怪的《CSS 揭秘》读书摘要&quot;">​</a></h1><blockquote><p>看这本书前：看书，现在短视频时代，正经人谁看书啊，要看也是看视频教程和大佬博客啊！</p><p>看完这本后：似乎有一点香！(轻松有趣)</p></blockquote><p>从这本书字里行间可以感受到作者也是个有趣的灵魂。</p><blockquote><p>看了这本书知识浅显易懂、挺有趣的，重新让我拾回看书的一些兴趣；</p><p>这本书让我感受到 CSS 一些巧妙的技巧，故摘抄以便往后快捷运用。</p></blockquote><h2 id="背景与边框" tabindex="-1">背景与边框 <a class="header-anchor" href="#背景与边框" aria-label="Permalink to &quot;背景与边框&quot;">​</a></h2><h3 id="多重边框" tabindex="-1">多重边框 <a class="header-anchor" href="#多重边框" aria-label="Permalink to &quot;多重边框&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">box-shadow</span><span style="color:#DBD7CAEE;">: 0 0 0 10px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">655</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> 0 0 0 15px deeppink</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> 0 2px 5px 15px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">ccc;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">box-shadow</span><span style="color:#393A34;">: 0 0 0 10px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">655</span><span style="color:#999999;">,</span><span style="color:#393A34;"> 0 0 0 15px deeppink</span><span style="color:#999999;">,</span><span style="color:#393A34;"> 0 2px 5px 15px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">ccc;</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041624153.png" alt="image-20230204162420066"></p><h3 id="灵活的背景定位" tabindex="-1">灵活的背景定位 <a class="header-anchor" href="#灵活的背景定位" aria-label="Permalink to &quot;灵活的背景定位&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">background-position</span><span style="color:#666666;">:</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> 20px bottom 10px;//离右侧20px、下边10px</span></span>
+<span class="line"><span style="color:#4D9375;">background-position</span><span style="color:#DBD7CAEE;">:calc(100%-20px) calc(100%-10px);</span></span>
+<span class="line"><span style="color:#4D9375;">background-origin</span><span style="color:#DBD7CAEE;">:</span><span style="color:#4D9375;">content-box</span><span style="color:#DBD7CAEE;">;//以内容盒为准</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">background-position</span><span style="color:#999999;">:</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> 20px bottom 10px;//离右侧20px、下边10px</span></span>
+<span class="line"><span style="color:#1E754F;">background-position</span><span style="color:#393A34;">:calc(100%-20px) calc(100%-10px);</span></span>
+<span class="line"><span style="color:#1E754F;">background-origin</span><span style="color:#393A34;">:</span><span style="color:#1E754F;">content-box</span><span style="color:#393A34;">;//以内容盒为准</span></span></code></pre></div><h3 id="边框内圆角" tabindex="-1">边框内圆角 <a class="header-anchor" href="#边框内圆角" aria-label="Permalink to &quot;边框内圆角&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">background: tan;</span></span>
+<span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;font-style:italic;">.</span><span style="color:#FDAEB7;font-style:italic;">8em</span><span style="color:#DBD7CAEE;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">padding: 1em;</span></span>
+<span class="line"><span style="color:#4D9375;">box-shadow</span><span style="color:#DBD7CAEE;">: 0 0 0 </span><span style="color:#666666;font-style:italic;">.</span><span style="color:#FDAEB7;font-style:italic;">4em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">655</span><span style="color:#DBD7CAEE;">;//扩张半径取圆角的一半</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">outline: </span><span style="color:#666666;font-style:italic;">.</span><span style="color:#FDAEB7;font-style:italic;">4em</span><span style="color:#DBD7CAEE;"> solid </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">655</span><span style="color:#DBD7CAEE;">;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">background: tan;</span></span>
+<span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: </span><span style="color:#999999;font-style:italic;">.</span><span style="color:#B31D28;font-style:italic;">8em</span><span style="color:#393A34;">;</span></span>
+<span class="line"><span style="color:#393A34;">padding: 1em;</span></span>
+<span class="line"><span style="color:#1E754F;">box-shadow</span><span style="color:#393A34;">: 0 0 0 </span><span style="color:#999999;font-style:italic;">.</span><span style="color:#B31D28;font-style:italic;">4em</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">655</span><span style="color:#393A34;">;//扩张半径取圆角的一半</span></span>
+<span class="line"><span style="color:#393A34;">outline: </span><span style="color:#999999;font-style:italic;">.</span><span style="color:#B31D28;font-style:italic;">4em</span><span style="color:#393A34;"> solid </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">655</span><span style="color:#393A34;">;</span></span></code></pre></div><h3 id="条纹背景" tabindex="-1">条纹背景 <a class="header-anchor" href="#条纹背景" aria-label="Permalink to &quot;条纹背景&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">//横向</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">background: linear-gradient(</span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#DBD7CAEE;"> 33.3%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 66.6%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">ccc</span><span style="color:#DBD7CAEE;"> 0);</span></span>
+<span class="line"><span style="color:#4D9375;">background-size</span><span style="color:#DBD7CAEE;">: 100% 20px;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">//垂直</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">background: linear-gradient(to right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#DBD7CAEE;"> 33.3%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 66.6%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">ccc</span><span style="color:#DBD7CAEE;"> 0);</span></span>
+<span class="line"><span style="color:#4D9375;">background-size</span><span style="color:#DBD7CAEE;">: 20px 100%;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">//斜向</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">background: linear-gradient(45deg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#DBD7CAEE;"> 25%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 50%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">ccc</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">ccc</span><span style="color:#DBD7CAEE;"> 75%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0);</span></span>
+<span class="line"><span style="color:#4D9375;">background-size</span><span style="color:#DBD7CAEE;">: 100%;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">//重复任意角度条纹</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> background: repeating-linear-gradient( 60deg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#DBD7CAEE;"> 15px</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 30px);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">//横向</span></span>
+<span class="line"><span style="color:#393A34;">background: linear-gradient(</span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#393A34;"> 33.3%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 66.6%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">ccc</span><span style="color:#393A34;"> 0);</span></span>
+<span class="line"><span style="color:#1E754F;">background-size</span><span style="color:#393A34;">: 100% 20px;</span></span>
+<span class="line"><span style="color:#393A34;">//垂直</span></span>
+<span class="line"><span style="color:#393A34;">background: linear-gradient(to right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#393A34;"> 33.3%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 66.6%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">ccc</span><span style="color:#393A34;"> 0);</span></span>
+<span class="line"><span style="color:#1E754F;">background-size</span><span style="color:#393A34;">: 20px 100%;</span></span>
+<span class="line"><span style="color:#393A34;">//斜向</span></span>
+<span class="line"><span style="color:#393A34;">background: linear-gradient(45deg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#393A34;"> 25%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 50%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">ccc</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">ccc</span><span style="color:#393A34;"> 75%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0);</span></span>
+<span class="line"><span style="color:#1E754F;">background-size</span><span style="color:#393A34;">: 100%;</span></span>
+<span class="line"><span style="color:#393A34;">//重复任意角度条纹</span></span>
+<span class="line"><span style="color:#393A34;"> background: repeating-linear-gradient( 60deg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#393A34;"> 15px</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 30px);</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041626739.png" alt="image-20230204162605711"></p><h2 id="形状" tabindex="-1">形状 <a class="header-anchor" href="#形状" aria-label="Permalink to &quot;形状&quot;">​</a></h2><h3 id="圆角" tabindex="-1">圆角 <a class="header-anchor" href="#圆角" aria-label="Permalink to &quot;圆角&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">:水平半径/垂直半径 </span></span>
+<span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: 50% / 100% 0;//树叶形状   </span></span>
+<span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: 100% 0 0 100%/50%; //半椭圆</span></span>
+<span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: 100% 0 0 0;//四分之一椭圆</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">:水平半径/垂直半径 </span></span>
+<span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: 50% / 100% 0;//树叶形状   </span></span>
+<span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: 100% 0 0 100%/50%; //半椭圆</span></span>
+<span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: 100% 0 0 0;//四分之一椭圆</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041627705.png" alt="image-20230204162727674"></p><h3 id="平行四边形" tabindex="-1">平行四边形 <a class="header-anchor" href="#平行四边形" aria-label="Permalink to &quot;平行四边形&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/*按钮内容不行变解决方案*/</span></span>
+<span class="line"><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">outline</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">margin-left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">z-index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">button</span><span style="color:#666666;">::</span><span style="color:#BD976A;">after</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">bottom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">90</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">35</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">block</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">5C7AEA</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">skewX</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-30</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">z-index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/*按钮内容不行变解决方案*/</span></span>
+<span class="line"><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">outline</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">margin-left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">z-index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">button</span><span style="color:#999999;">::</span><span style="color:#B07D48;">after</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">bottom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">90</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">35</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">block</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">5C7AEA</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">skewX</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-30</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">z-index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041629321.png" alt="image-20230204162908289"></p><h3 id="梯形" tabindex="-1">梯形 <a class="header-anchor" href="#梯形" aria-label="Permalink to &quot;梯形&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgb</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">52</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">199</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">155</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">auto</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">font-size</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">40</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">fff</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">line-height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">block</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">z-index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-bottom-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgb</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">52</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">199</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">155</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">::</span><span style="color:#BD976A;">after</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">block</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">z-index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-bottom-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgb</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">52</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">199</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">155</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgb</span><span style="color:#999999;">(</span><span style="color:#2F798A;">52</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">199</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">155</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">auto</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">font-size</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">40</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">fff</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">line-height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">block</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">z-index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-bottom-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgb</span><span style="color:#999999;">(</span><span style="color:#2F798A;">52</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">199</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">155</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">::</span><span style="color:#B07D48;">after</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">block</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">z-index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-bottom-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgb</span><span style="color:#999999;">(</span><span style="color:#2F798A;">52</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">199</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">155</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041632982.png" alt="image-20230204163212947"></p><h2 id="视觉效果" tabindex="-1">视觉效果 <a class="header-anchor" href="#视觉效果" aria-label="Permalink to &quot;视觉效果&quot;">​</a></h2><blockquote><p>投影大致原理： <code>box-shadow: 2px 3px 4px rgba(0, 0, 0, .5);</code></p><ol><li>画该元素相同尺寸、位置、指定颜色的矩形</li><li>按指定的 x、y 进行水平垂直位移</li><li>按指定模糊半径，使用高斯模糊算法进行处理</li><li>切除与原始元素交集部分</li></ol></blockquote><h3 id="双侧投影" tabindex="-1">双侧投影 <a class="header-anchor" href="#双侧投影" aria-label="Permalink to &quot;双侧投影&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">box-shadow</span><span style="color:#DBD7CAEE;">: 5px 0 5px -5px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">-5px 0 5px -5px red</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">box-shadow</span><span style="color:#393A34;">: 5px 0 5px -5px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">000</span><span style="color:#999999;">,</span><span style="color:#393A34;">-5px 0 5px -5px red</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041633244.png" alt="image-20230204163300223"></p><h3 id="染色效果" tabindex="-1">染色效果 <a class="header-anchor" href="#染色效果" aria-label="Permalink to &quot;染色效果&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">filter</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">sepia</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">saturate</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">hue-rotate</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">295</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">filter</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">sepia</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#998418;">saturate</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#998418;">hue-rotate</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">295</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041636799.png" alt="image-20230204163621777"></p><h3 id="毛玻璃" tabindex="-1">毛玻璃 <a class="header-anchor" href="#毛玻璃" aria-label="Permalink to &quot;毛玻璃&quot;">​</a></h3><blockquote><p>IE 不支持 Chrome 大于等于 76 Edge 大于等于 17 Firefox 70 至 94</p></blockquote><h3 id="折角效果" tabindex="-1">折角效果 <a class="header-anchor" href="#折角效果" aria-label="Permalink to &quot;折角效果&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">box </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                 </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.5</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">210</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.5</span><span style="color:#CB7676;">em</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">edb21d</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.73</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">240</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">ccc</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">translateY</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-1.3</span><span style="color:#CB7676;">em</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rotate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-30</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">transform-origin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">bottom</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">right</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">border-bottom-left-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">inherit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">box-shadow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-0.3</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.2</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.3</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-0.1</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">bbb</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">box </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">                 </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.5</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#2F798A;">210</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.5</span><span style="color:#AB5959;">em</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">edb21d</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.73</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#2F798A;">240</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">ccc</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">translateY</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-1.3</span><span style="color:#AB5959;">em</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#998418;">rotate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-30</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">transform-origin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">bottom</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">right</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">border-bottom-left-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">inherit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">box-shadow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-0.3</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.2</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.3</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-0.1</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">bbb</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041641904.png" alt=""></p><p><strong>折角效果 mixin 预处理器</strong></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">mixin</span><span style="color:#DBD7CAEE;"> folded-corner($background,$size,$angle:30deg)</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    position:relative;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    background:$background;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    background:linear-gradient($angle - 180deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        transparent $size</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">$background 0);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;font-style:italic;">.</span><span style="color:#FDAEB7;font-style:italic;">5em</span><span style="color:#DBD7CAEE;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    $x:$size / sin($angle);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    $y:$size / cos($angle);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">&amp;</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#CB7676;">to</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">bottom</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">transparent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">.2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">.4</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">no-repeat</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">$</span><span style="color:#C99076;">y</span><span style="color:#666666;">;</span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">$</span><span style="color:#C99076;">x</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#B8A965;">translateY</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">$y-$</span><span style="color:#C99076;">x</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rotate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;">*$angle - </span><span style="color:#4C9A91;">90</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">transform-origin</span><span style="color:#666666;">:</span><span style="color:#C99076;">bottom</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">right</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-bottom-left-radius</span><span style="color:#666666;">:</span><span style="color:#C99076;">inherit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">box-shadow</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">-.2</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.2</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.3</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-.1</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">.15</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">/*当调用时...*/</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">note</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    @</span><span style="color:#B8A965;">include</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">folded-corner</span><span style="color:#DBD7CAEE;">(#68</span><span style="color:#B8A965;">d</span><span style="color:#DBD7CAEE;">,1.3</span><span style="color:#B8A965;">em</span><span style="color:#DBD7CAEE;">,60</span><span style="color:#B8A965;">deg</span><span style="color:#DBD7CAEE;">)</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">mixin</span><span style="color:#393A34;"> folded-corner($background,$size,$angle:30deg)</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    position:relative;</span></span>
+<span class="line"><span style="color:#393A34;">    background:$background;</span></span>
+<span class="line"><span style="color:#393A34;">    background:linear-gradient($angle - 180deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        transparent $size</span><span style="color:#999999;">,</span><span style="color:#393A34;">$background 0);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: </span><span style="color:#999999;font-style:italic;">.</span><span style="color:#B31D28;font-style:italic;">5em</span><span style="color:#393A34;">;</span></span>
+<span class="line"><span style="color:#393A34;">    $x:$size / sin($angle);</span></span>
+<span class="line"><span style="color:#393A34;">    $y:$size / cos($angle);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">&amp;</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#AB5959;">to</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">left</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">bottom</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">transparent</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">.2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">.4</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">no-repeat</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;">$</span><span style="color:#A65E2B;">y</span><span style="color:#999999;">;</span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;">$</span><span style="color:#A65E2B;">x</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#998418;">translateY</span><span style="color:#999999;">(</span><span style="color:#393A34;">$y-$</span><span style="color:#A65E2B;">x</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#998418;">rotate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#393A34;">*$angle - </span><span style="color:#2F798A;">90</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">transform-origin</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">bottom</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">right</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-bottom-left-radius</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">inherit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">box-shadow</span><span style="color:#999999;">:</span><span style="color:#2F798A;">-.2</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.2</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.3</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-.1</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">.15</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*当调用时...*/</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">note</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    @</span><span style="color:#998418;">include</span><span style="color:#393A34;"> </span><span style="color:#998418;">folded-corner</span><span style="color:#393A34;">(#68</span><span style="color:#998418;">d</span><span style="color:#393A34;">,1.3</span><span style="color:#998418;">em</span><span style="color:#393A34;">,60</span><span style="color:#998418;">deg</span><span style="color:#393A34;">)</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="字体排印" tabindex="-1">字体排印 <a class="header-anchor" href="#字体排印" aria-label="Permalink to &quot;字体排印&quot;">​</a></h2><h3 id="插入换行" tabindex="-1">插入换行 <a class="header-anchor" href="#插入换行" aria-label="Permalink to &quot;插入换行&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">hyphens：manual; / </span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;">手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 ­ </span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> /</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">hyphens：none; / </span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;">无。即使单词中有换行符，也不会换行，只会在空白处换行</span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> /</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">hyphens：auto; / </span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;">自动。浏览器在适当的位置自动插入连字符换行</span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> /</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">hyphens：manual; / </span><span style="color:#1E754F;">*</span><span style="color:#393A34;">手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 ­ </span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> /</span></span>
+<span class="line"><span style="color:#393A34;">hyphens：none; / </span><span style="color:#1E754F;">*</span><span style="color:#393A34;">无。即使单词中有换行符，也不会换行，只会在空白处换行</span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> /</span></span>
+<span class="line"><span style="color:#393A34;">hyphens：auto; / </span><span style="color:#1E754F;">*</span><span style="color:#393A34;">自动。浏览器在适当的位置自动插入连字符换行</span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> /</span></span></code></pre></div><blockquote><p>可以结合选择器 <code>+ / ~ / not(:first-child)</code> 实现在元素后面添加 <code>，/ 换行符</code></p></blockquote><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">dd</span><span style="color:#CB7676;">+</span><span style="color:#4D9375;">dt</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\A</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/*content:&#39;,&#39;;*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">white-space</span><span style="color:#666666;">:</span><span style="color:#C99076;">pre</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/*空白会被浏览器保留*/</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">dd</span><span style="color:#AB5959;">+</span><span style="color:#1E754F;">dt</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\A</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/*content:&#39;,&#39;;*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">white-space</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">pre</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/*空白会被浏览器保留*/</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="文本行斑马线" tabindex="-1">文本行斑马线 <a class="header-anchor" href="#文本行斑马线" aria-label="Permalink to &quot;文本行斑马线&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.5</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">line-height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">hsl</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">184</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">61</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">76</span><span style="color:#CB7676;">%</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-image</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgb</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">230</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">230</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">230</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-size</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">auto</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-origin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">content-box</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">font-family</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> Consolas</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> Monaco</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">monospace</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.5</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">line-height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">hsl</span><span style="color:#999999;">(</span><span style="color:#2F798A;">184</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">61</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">76</span><span style="color:#AB5959;">%</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-image</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgb</span><span style="color:#999999;">(</span><span style="color:#2F798A;">230</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">230</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">230</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-size</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">auto</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-origin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">content-box</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">font-family</span><span style="color:#999999;">:</span><span style="color:#393A34;"> Consolas</span><span style="color:#999999;">,</span><span style="color:#393A34;"> Monaco</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">monospace</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041645200.png" alt="image-20230204164506163"></p><h3 id="自定义下划线" tabindex="-1">自定义下划线 <a class="header-anchor" href="#自定义下划线" aria-label="Permalink to &quot;自定义下划线&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#C99076;">gray</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">gray</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">no-repeat</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-size</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.15</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text-shadow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.05</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-.05</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">gray</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">gray</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">no-repeat</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-size</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.15</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text-shadow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.05</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-.05</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041647704.png" alt="image-20230204164714672"></p><h3 id="凹凸印刷文字效果" tabindex="-1">凹凸印刷文字效果 <a class="header-anchor" href="#凹凸印刷文字效果" aria-label="Permalink to &quot;凹凸印刷文字效果&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">text-shadow</span><span style="color:#DBD7CAEE;">: 1px 1px 1px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> -1px -1px 1px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">fff;//凸</span></span>
+<span class="line"><span style="color:#4D9375;">text-shadow</span><span style="color:#DBD7CAEE;">: -1px -1px 1px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> 1px 1px 1px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">fff;//凹</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">text-shadow</span><span style="color:#393A34;">: 1px 1px 1px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">000</span><span style="color:#999999;">,</span><span style="color:#393A34;"> -1px -1px 1px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">fff;//凸</span></span>
+<span class="line"><span style="color:#1E754F;">text-shadow</span><span style="color:#393A34;">: -1px -1px 1px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">000</span><span style="color:#999999;">,</span><span style="color:#393A34;"> 1px 1px 1px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">fff;//凹</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041650836.png" alt="image-20230204165035803"></p><h3 id="满幅背景、定宽内容-页脚" tabindex="-1">满幅背景、定宽内容（页脚） <a class="header-anchor" href="#满幅背景、定宽内容-页脚" aria-label="Permalink to &quot;满幅背景、定宽内容（页脚）&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">footer</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">max-width</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1000</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">calc</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#4C9A91;">-500</span><span style="color:#CB7676;">px</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">footer</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">max-width</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1000</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#998418;">calc</span><span style="color:#999999;">(</span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#2F798A;">-500</span><span style="color:#AB5959;">px</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="紧贴底部的页脚" tabindex="-1">紧贴底部的页脚 <a class="header-anchor" href="#紧贴底部的页脚" aria-label="Permalink to &quot;紧贴底部的页脚&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">body</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">flex-direction</span><span style="color:#666666;">:</span><span style="color:#C99076;">column</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">min-height</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">vh</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">main</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">flex</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">body</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">flex-direction</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">column</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">min-height</span><span style="color:#999999;">:</span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">vh</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">main</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">flex</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="闪烁效果" tabindex="-1">闪烁效果 <a class="header-anchor" href="#闪烁效果" aria-label="Permalink to &quot;闪烁效果&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">pink</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">animation</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> twinkle </span><span style="color:#4C9A91;">0.5</span><span style="color:#CB7676;">s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">infinite</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">steps</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">alternate</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/*普通闪烁*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">animation</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> twinkle </span><span style="color:#4C9A91;">0.5</span><span style="color:#CB7676;">s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">infinite</span><span style="color:#DBD7CAEE;">   </span><span style="color:#C99076;">alternate</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/*真实闪烁*/</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">keyframes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">twinkle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">0%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">100%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;">  </span><span style="color:#A65E2B;">pink</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">animation</span><span style="color:#999999;">:</span><span style="color:#393A34;"> twinkle </span><span style="color:#2F798A;">0.5</span><span style="color:#AB5959;">s</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">infinite</span><span style="color:#393A34;"> </span><span style="color:#998418;">steps</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">alternate</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/*普通闪烁*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">animation</span><span style="color:#999999;">:</span><span style="color:#393A34;"> twinkle </span><span style="color:#2F798A;">0.5</span><span style="color:#AB5959;">s</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">infinite</span><span style="color:#393A34;">   </span><span style="color:#A65E2B;">alternate</span><span style="color:#999999;">;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/*真实闪烁*/</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">keyframes</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">twinkle</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">0%</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">100%</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041657747.gif" alt="2023-02-04 16.57.27"></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/CSS/揭秘读书摘要.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>常用代码段</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Git常用操作</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.html" "b/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.html"
new file mode 100644
index 00000000..ebd854df
--- /dev/null
+++ "b/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.html"
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Git常用操作 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_Git_Git常用操作.md.a0e87468.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_Git_Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-6b87e69f><div><h1 id="git常用操作" tabindex="-1">Git常用操作 <a class="header-anchor" href="#git常用操作" aria-label="Permalink to &quot;Git常用操作&quot;">​</a></h1><h2 id="拉取最新提交" tabindex="-1">拉取最新提交 <a class="header-anchor" href="#拉取最新提交" aria-label="Permalink to &quot;拉取最新提交&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">fetch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#或 git fetch -p origin</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">fetch</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#或 git fetch -p origin</span></span></code></pre></div><p><code>git fetch -p</code> （或者 <code>--prune</code>）命令用于从远程仓库中拉取最新的提交记录，同时也会删除 <em>本地不存在的远程分支</em>；不会更新本地分支和远程分支之间的关联关系，需要手动执行 <code>git merge</code> 或 <code>git rebase</code> 命令，或者使用 <code>git pull</code> 命令。例：删除远程 <code>dev</code>分支后，使用此命令，本地的远程分支也会被清理。</p><p><code>git fetch</code> 命令用于将远程仓库中的最新提交记录拉取到本地仓库中，但是不会自动合并（merge）这些提交；不会删除本地不存在的远程分支，可能会导致本地分支列表过长，不便于管理。</p><h2 id="删除远程分支" tabindex="-1">删除远程分支 <a class="header-anchor" href="#删除远程分支" aria-label="Permalink to &quot;删除远程分支&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">branch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">branch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-r</span><span style="color:#DBD7CAEE;"> 	     </span><span style="color:#758575DD;">#列出所有本地/远程分支</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">branch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">分支名</span><span style="color:#DBD7CAEE;">              </span><span style="color:#758575DD;">#删除本地库分支</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">origin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--delete</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">分支名</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#删除远程库分支</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">branch</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">branch</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-r</span><span style="color:#393A34;"> 	     </span><span style="color:#A0ADA0;">#列出所有本地/远程分支</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">branch</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span><span style="color:#393A34;"> </span><span style="color:#B56959;">分支名</span><span style="color:#393A34;">              </span><span style="color:#A0ADA0;">#删除本地库分支</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span><span style="color:#393A34;"> </span><span style="color:#B56959;">origin</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--delete</span><span style="color:#393A34;"> </span><span style="color:#B56959;">分支名</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#删除远程库分支</span></span></code></pre></div><h2 id="删除tag" tabindex="-1">删除Tag <a class="header-anchor" href="#删除tag" aria-label="Permalink to &quot;删除Tag&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-l</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">#列出所有本地/远程tag</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag名</span><span style="color:#DBD7CAEE;">                 </span><span style="color:#758575DD;">#删除本地库tag</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">origin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--delete</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag名</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#删除远程库tag</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-l</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">xargs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#删除本地所有 tag</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-l</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">#列出所有本地/远程tag</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag名</span><span style="color:#393A34;">                 </span><span style="color:#A0ADA0;">#删除本地库tag</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span><span style="color:#393A34;"> </span><span style="color:#B56959;">origin</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--delete</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag名</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#删除远程库tag</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-l</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">xargs</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#删除本地所有 tag</span></span></code></pre></div><h2 id="删除远程文件" tabindex="-1">删除远程文件 <a class="header-anchor" href="#删除远程文件" aria-label="Permalink to &quot;删除远程文件&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-r</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--cached</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">文件/文件夹名称</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#预览要删除的文件列表</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-r</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--cached</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">文件/文件夹名称</span><span style="color:#DBD7CAEE;">      </span><span style="color:#758575DD;">#确定无误后删除文件</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-r</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-n</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--cached</span><span style="color:#393A34;"> </span><span style="color:#B56959;">文件/文件夹名称</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#预览要删除的文件列表</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-r</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--cached</span><span style="color:#393A34;"> </span><span style="color:#B56959;">文件/文件夹名称</span><span style="color:#393A34;">      </span><span style="color:#A0ADA0;">#确定无误后删除文件</span></span></code></pre></div><h2 id="fork后的仓库-拉取合并原仓库的更新" tabindex="-1">fork后的仓库，拉取合并原仓库的更新 <a class="header-anchor" href="#fork后的仓库-拉取合并原仓库的更新" aria-label="Permalink to &quot;fork后的仓库，拉取合并原仓库的更新&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">remote</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">upstream</span><span style="color:#DBD7CAEE;"> [原仓库URL] </span><span style="color:#758575DD;">#添加上游分支路径</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">upstream</span><span style="color:#DBD7CAEE;"> [分支名]  				</span><span style="color:#758575DD;">#拉取上游分支更新并合并</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">remote</span><span style="color:#393A34;"> </span><span style="color:#B56959;">add</span><span style="color:#393A34;"> </span><span style="color:#B56959;">upstream</span><span style="color:#393A34;"> [原仓库URL] </span><span style="color:#A0ADA0;">#添加上游分支路径</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull</span><span style="color:#393A34;"> </span><span style="color:#B56959;">upstream</span><span style="color:#393A34;"> [分支名]  				</span><span style="color:#A0ADA0;">#拉取上游分支更新并合并</span></span></code></pre></div><h2 id="合并多次提交" tabindex="-1">合并多次提交 <a class="header-anchor" href="#合并多次提交" aria-label="Permalink to &quot;合并多次提交&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">HEAD~3</span><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">#合并最近的 3 次提交，并开启交互模式</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&lt;</span><span style="color:#C98A7D;">commit_sh</span><span style="color:#DBD7CAEE;">a</span><span style="color:#CB7676;">&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#开启交互模式</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-i</span><span style="color:#393A34;"> </span><span style="color:#B56959;">HEAD~3</span><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">#合并最近的 3 次提交，并开启交互模式</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&lt;</span><span style="color:#B56959;">commit_sh</span><span style="color:#393A34;">a</span><span style="color:#AB5959;">&gt;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#开启交互模式</span></span></code></pre></div><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8</span><span style="color:#C98A7D;">fc6389</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#填第2 次提交的 hash，则表示合并 2 之后（3和 4）的提交</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-i</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8</span><span style="color:#B56959;">fc6389</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#填第2 次提交的 hash，则表示合并 2 之后（3和 4）的提交</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302272058564.png" alt="image-20230227205854474"></p><p>把需要压缩的提交 <code>pick </code> 改为 <code>s</code>，必须保留一个 <code>pick</code>，下一步填写合并提交信息，保存退出(<code>:wq</code>)完成合并</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302271055952.png" alt="image-20230227105523929"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302272059457.png" alt="image-20230227205916425"></p><h2 id="关联多个代码托管平台" tabindex="-1">关联多个代码托管平台 <a class="header-anchor" href="#关联多个代码托管平台" aria-label="Permalink to &quot;关联多个代码托管平台&quot;">​</a></h2><blockquote><p>当本地仓库项同时关联 github 和 gitee，同步更新两边代码</p></blockquote><ol><li><strong>方法一</strong> <code> git remote add gitee [gitee_repo_url]</code>，需要多次推送</li></ol><p>效果：</p><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">branch </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">master</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">remote</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">origin</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">merge</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">refs/heads/master</span></span>
+<span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">remote </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">origin</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@github.com:fxzer/juejin-server-mysql.git</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">fetch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">+refs/heads/</span><span style="color:#C99076;">*</span><span style="color:#C98A7D;">:refs/remotes/origin/</span><span style="color:#C99076;">*</span></span>
+<span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">remote </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">gitee</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@gitee.com:fxzer/juejin-server-mysql.git</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">fetch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">+refs/heads/</span><span style="color:#C99076;">*</span><span style="color:#C98A7D;">:refs/remotes/gitee/</span><span style="color:#C99076;">*</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">branch </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">master</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">remote</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">origin</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">merge</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">refs/heads/master</span></span>
+<span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">remote </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">origin</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">url</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@github.com:fxzer/juejin-server-mysql.git</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">fetch</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">+refs/heads/</span><span style="color:#A65E2B;">*</span><span style="color:#B56959;">:refs/remotes/origin/</span><span style="color:#A65E2B;">*</span></span>
+<span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">remote </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">gitee</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">url</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@gitee.com:fxzer/juejin-server-mysql.git</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">fetch</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">+refs/heads/</span><span style="color:#A65E2B;">*</span><span style="color:#B56959;">:refs/remotes/gitee/</span><span style="color:#A65E2B;">*</span></span></code></pre></div><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#git remote -v                                                   </span></span>
+<span class="line"><span style="color:#80A665;">gitee</span><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D;">git@gitee.com:fxzer/juejin-server-mysql.git</span><span style="color:#DBD7CAEE;"> (fetch)</span></span>
+<span class="line"><span style="color:#80A665;">gitee</span><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D;">git@gitee.com:fxzer/juejin-server-mysql.git</span><span style="color:#DBD7CAEE;"> (push)</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@github.com:fxzer/juejin-server-mysql.git</span><span style="color:#DBD7CAEE;"> (fetch)</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@github.com:fxzer/juejin-server-mysql.git</span><span style="color:#DBD7CAEE;"> (push)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#git remote -v                                                   </span></span>
+<span class="line"><span style="color:#59873A;">gitee</span><span style="color:#393A34;">   </span><span style="color:#B56959;">git@gitee.com:fxzer/juejin-server-mysql.git</span><span style="color:#393A34;"> (fetch)</span></span>
+<span class="line"><span style="color:#59873A;">gitee</span><span style="color:#393A34;">   </span><span style="color:#B56959;">git@gitee.com:fxzer/juejin-server-mysql.git</span><span style="color:#393A34;"> (push)</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@github.com:fxzer/juejin-server-mysql.git</span><span style="color:#393A34;"> (fetch)</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@github.com:fxzer/juejin-server-mysql.git</span><span style="color:#393A34;"> (push)</span></span></code></pre></div><ol start="2"><li><strong>方法二</strong> <code>git remote set-url --add origin [gitee_repo_url]</code> , 只需一次推送</li></ol><p>效果：~</p><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">remote </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">origin</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@github.com:fxzer/json-viewer.git</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">fetch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">+refs/heads/</span><span style="color:#C99076;">*</span><span style="color:#C98A7D;">:refs/remotes/origin/</span><span style="color:#C99076;">*</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@gitee.com:fxzer/json-viewer.git</span></span>
+<span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">branch </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">master</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">remote</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">origin</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">merge</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">refs/heads/master</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">remote </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">origin</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">url</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@github.com:fxzer/json-viewer.git</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">fetch</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">+refs/heads/</span><span style="color:#A65E2B;">*</span><span style="color:#B56959;">:refs/remotes/origin/</span><span style="color:#A65E2B;">*</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">url</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@gitee.com:fxzer/json-viewer.git</span></span>
+<span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">branch </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">master</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">remote</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">origin</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">merge</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">refs/heads/master</span></span></code></pre></div><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#git remote -v</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@github.com:fxzer/json-viewer.git</span><span style="color:#DBD7CAEE;"> (fetch)</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@github.com:fxzer/json-viewer.git</span><span style="color:#DBD7CAEE;"> (push)</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@gitee.com:fxzer/json-viewer.git</span><span style="color:#DBD7CAEE;"> (push)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#git remote -v</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@github.com:fxzer/json-viewer.git</span><span style="color:#393A34;"> (fetch)</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@github.com:fxzer/json-viewer.git</span><span style="color:#393A34;"> (push)</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@gitee.com:fxzer/json-viewer.git</span><span style="color:#393A34;"> (push)</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title"><code>git remote add</code> 和 <code>git remote set-url --add</code>区别</p><ul><li>git remote add 用于添加一个新的远程仓库。该本地仓库已关联远程库，希望添加新的远程库。**运用：**fork后的仓库，需要拉取合并原仓库的更新。</li><li>git remote set-url --add 用于向已经存在的远程仓库中添加一个新的 URL。**运用：**同一个仓库关联 github 和 gitee 方便同时更新。</li><li>git remote set-url 命令会替换掉原有的链接，git remote set-url --add 命令，则是添加一个标识对应的远程库链接。</li></ul></div><h2 id="改错分支但为未提交" tabindex="-1">改错分支但为未提交 <a class="header-anchor" href="#改错分支但为未提交" aria-label="Permalink to &quot;改错分支但为未提交&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">stash</span><span style="color:#DBD7CAEE;">            </span><span style="color:#758575DD;">#暂存更改到stash</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">checkout</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">分支名</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#切换分支</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">stash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pop</span><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">#从stash中取出暂存的代码修改</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">stash</span><span style="color:#393A34;">            </span><span style="color:#A0ADA0;">#暂存更改到stash</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">checkout</span><span style="color:#393A34;"> </span><span style="color:#B56959;">分支名</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#切换分支</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">stash</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pop</span><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">#从stash中取出暂存的代码修改</span></span></code></pre></div><h2 id="提交完未推送前-需要再次提交" tabindex="-1">提交完未推送前，需要再次提交 <a class="header-anchor" href="#提交完未推送前-需要再次提交" aria-label="Permalink to &quot;提交完未推送前，需要再次提交&quot;">​</a></h2><ul><li>提交完未推送前，发现代码有的有点小问题，还需要修改再提交，但是不想新增垃圾提交信息，保持简洁。</li><li>只需要修改提交的内容而不需要改变提交信息， 可以使用 --no-edit 参数来跳过编辑提交信息的步骤。</li></ul><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">commit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--amend</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--no-edit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;"># 做的修改合并到最近的提交中，相当于是在原有的提交上进行修改，而不是创建一个新的提交。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;"># 使用后在拉取代码会出现：位于分支 master</span></span>
+<span class="line"><span style="color:#758575DD;"># 您的分支和 &#39;origin/master&#39; 出现了偏离，</span></span>
+<span class="line"><span style="color:#758575DD;"># 并且分别有 1 和 1 处不同的提交。</span></span>
+<span class="line"><span style="color:#758575DD;">#   （使用 &quot;git pull&quot; 来合并远程分支）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">config</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull.rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;"># git pull前，需要执行此命令进行变基</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">commit</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--amend</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--no-edit</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;"># 做的修改合并到最近的提交中，相当于是在原有的提交上进行修改，而不是创建一个新的提交。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;"># 使用后在拉取代码会出现：位于分支 master</span></span>
+<span class="line"><span style="color:#A0ADA0;"># 您的分支和 &#39;origin/master&#39; 出现了偏离，</span></span>
+<span class="line"><span style="color:#A0ADA0;"># 并且分别有 1 和 1 处不同的提交。</span></span>
+<span class="line"><span style="color:#A0ADA0;">#   （使用 &quot;git pull&quot; 来合并远程分支）</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">config</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull.rebase</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;"># git pull前，需要执行此命令进行变基</span></span></code></pre></div><h2 id="修改第一次提交信息" tabindex="-1">修改第一次提交信息 <a class="header-anchor" href="#修改第一次提交信息" aria-label="Permalink to &quot;修改第一次提交信息&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--root</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#把第一次提交的 pick 改为 edit 后 e</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--continue</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull.rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-i</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--root</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#把第一次提交的 pick 改为 edit 后 e</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--continue</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull.rebase</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span></span></code></pre></div><h2 id="代码提交到了错误的分支" tabindex="-1">代码提交到了错误的分支 <a class="header-anchor" href="#代码提交到了错误的分支" aria-label="Permalink to &quot;代码提交到了错误的分支&quot;">​</a></h2><h3 id="方法一" tabindex="-1">方法一 <a class="header-anchor" href="#方法一" aria-label="Permalink to &quot;方法一&quot;">​</a></h3><p>切换到正确的分支并使用， 将指定的提交复制到当前分支，并将其添加到暂存区</p><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">cherry-pick</span><span style="color:#DBD7CAEE;"> [commit]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">cherry-pick</span><span style="color:#393A34;"> [commit]</span></span></code></pre></div><h3 id="方法二" tabindex="-1">方法二 <a class="header-anchor" href="#方法二" aria-label="Permalink to &quot;方法二&quot;">​</a></h3><p>使用 <code>git rebase</code> 命令将提交移动到正确的分支上：</p><ol><li>切换到错误分支上：<code>git checkout [error-branch]</code></li><li>将错误分支上的提交移动到正确分支上：<code>git rebase [correct-branch]</code></li><li>解决冲突（如果有）</li><li>将更改提交到正确的分支上：<code>git checkout [correct-branch]</code>，然后 <code>git merge [error-branch]</code></li><li>在错误分支<code>git push -f</code>更新远程代码</li></ol><h2 id="git-提交规范化" tabindex="-1">Git 提交规范化 <a class="header-anchor" href="#git-提交规范化" aria-label="Permalink to &quot;Git 提交规范化&quot;">​</a></h2><ul><li><strong>husky</strong>: Git 钩子工具,在 Git 提交过程的不同阶段自动运行脚本，以此来实现对代码的验证、格式化、测试等操作</li><li><strong>@commitlint/cli</strong>: 提交信息校验脚手架</li><li><strong>@commitlint/config-conventional</strong>: 定义了 commitlint 默认使用的规范。</li><li><strong>commitizen</strong>: 交互式提交工具</li><li><strong>conventional-changelog</strong>: 规范提交信息、并自动生成变更日志</li><li><strong>cz-conventional-changelog</strong>: git cz 提交规范和 changelog 生成工具</li></ul><h3 id="husky-文档" tabindex="-1"><a href="https://typicode.github.io/husky" target="_blank" rel="noreferrer">husky</a> <a href="https://typicode.github.io/husky/getting-started.html" target="_blank" rel="noreferrer">文档</a> <a class="header-anchor" href="#husky-文档" aria-label="Permalink to &quot;[husky](https://typicode.github.io/husky) [文档](https://typicode.github.io/husky/getting-started.html)&quot;">​</a></h3><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;"># 安装</span></span>
+<span class="line"><span style="color:#80A665;">pnpm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">dlx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">husky-init</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">pnpm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span></span>
+<span class="line"><span style="color:#758575DD;"># 初始化husky配置，在根目录新增.husky配置文件。初始化配置pre-commit</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;"># 新增一个提交git commit 执行前的钩子（commit-msg）</span></span>
+<span class="line"><span style="color:#80A665;">npx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">husky</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">.husky/commit-msg</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;"># 安装</span></span>
+<span class="line"><span style="color:#59873A;">pnpm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">dlx</span><span style="color:#393A34;"> </span><span style="color:#B56959;">husky-init</span><span style="color:#393A34;"> </span><span style="color:#999999;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">pnpm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span></span>
+<span class="line"><span style="color:#A0ADA0;"># 初始化husky配置，在根目录新增.husky配置文件。初始化配置pre-commit</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;"># 新增一个提交git commit 执行前的钩子（commit-msg）</span></span>
+<span class="line"><span style="color:#59873A;">npx</span><span style="color:#393A34;"> </span><span style="color:#B56959;">husky</span><span style="color:#393A34;"> </span><span style="color:#B56959;">add</span><span style="color:#393A34;"> </span><span style="color:#B56959;">.husky/commit-msg</span></span></code></pre></div><h4 id="注意-需要-git-init后才能初始化-否则报错如下" tabindex="-1">注意：需要 <code>git init</code>后才能初始化，否则报错如下 <a class="header-anchor" href="#注意-需要-git-init后才能初始化-否则报错如下" aria-label="Permalink to &quot;注意：需要 `git init`后才能初始化，否则报错如下&quot;">​</a></h4><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-06-27-20-25-35.png" alt="2023-06-27-20-25-35"></p><h3 id="commitlint-cli与-commitlint-config-conventional" tabindex="-1">@commitlint/cli与@commitlint/config-conventional <a class="header-anchor" href="#commitlint-cli与-commitlint-config-conventional" aria-label="Permalink to &quot;@commitlint/cli与@commitlint/config-conventional&quot;">​</a></h3><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#安装校验脚手架、校验规范</span></span>
+<span class="line"><span style="color:#80A665;">pnpm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">@commitlint/cli</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">@commitlint/config-conventional</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#添加安装脚本呢</span></span>
+<span class="line"><span style="color:#80A665;">pnpm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">set-script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">&quot;prepare&quot;: &quot;husky install&quot;</span><span style="color:#C98A7D99;">&#39;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#安装校验脚手架、校验规范</span></span>
+<span class="line"><span style="color:#59873A;">pnpm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">i</span><span style="color:#393A34;"> </span><span style="color:#B56959;">@commitlint/cli</span><span style="color:#393A34;"> </span><span style="color:#B56959;">@commitlint/config-conventional</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#添加安装脚本呢</span></span>
+<span class="line"><span style="color:#59873A;">pnpm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">set-script</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">&quot;prepare&quot;: &quot;husky install&quot;</span><span style="color:#B5695999;">&#39;</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//commitlint.config.js （若报错 type:&#39;module&#39;）可改：commitlint.config.js ==&gt; commitlint.config.cjs</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">extends</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@commitlint/config-conventional</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//commitlint.config.js （若报错 type:&#39;module&#39;）可改：commitlint.config.js ==&gt; commitlint.config.cjs</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">extends</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@commitlint/config-conventional</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div><h3 id="commitizen" tabindex="-1"><a href="http://commitizen.github.io/cz-cli/" target="_blank" rel="noreferrer">commitizen</a> <a class="header-anchor" href="#commitizen" aria-label="Permalink to &quot;[commitizen](http://commitizen.github.io/cz-cli/)&quot;">​</a></h3><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#全局安装</span></span>
+<span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">commitizen</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#全局安装</span></span>
+<span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-g</span><span style="color:#393A34;"> </span><span style="color:#B56959;">commitizen</span></span></code></pre></div><h3 id="cz-conventional-changelog" tabindex="-1">cz-conventional-changelog <a class="header-anchor" href="#cz-conventional-changelog" aria-label="Permalink to &quot;cz-conventional-changelog&quot;">​</a></h3><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#全局安装</span></span>
+<span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">cz-conventional-changelog</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#全局安装</span></span>
+<span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-g</span><span style="color:#393A34;"> </span><span style="color:#B56959;">cz-conventional-changelog</span></span></code></pre></div><p>配置 <code>~/.czrc</code>， 将其设置为 <code>commitizen</code> 的插件。</p><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">&quot;path&quot;</span><span style="color:#B8A965;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cz-conventional-changelog</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">&quot;path&quot;</span><span style="color:#998418;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cz-conventional-changelog</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">作用：提交代码并生成变更日志</p><p>使用 <code>commitizen</code> 提交代码时，会自动启动 <code>cz-conventional-changelog</code> 插件，</p><p>并根据 <code>conventional-commit</code> 规范提示用户输入提交信息。</p><p>输入完毕后，会自动将提交信息转换成符合规范的格式，并将其写入到 <code>CHANGELOG.md</code> 文件中。</p></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/Git/Git常用操作.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>揭秘读书摘要</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Terminal终端美化</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.html" "b/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.html"
new file mode 100644
index 00000000..f861a346
--- /dev/null
+++ "b/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.html"
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_Git_Terminal终端美化.md.6674896b.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_Git_Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-6b87e69f><div><h2 id="安装oh-my-posh" tabindex="-1">安装<a href="https://ohmyposh.dev/docs/installation/windows" target="_blank" rel="noreferrer">Oh My Posh</a> <a class="header-anchor" href="#安装oh-my-posh" aria-label="Permalink to &quot;安装[Oh My Posh](https://ohmyposh.dev/docs/installation/windows)&quot;">​</a></h2><blockquote><p>可以先去Microsofe Store 安装winget，会比较方便</p></blockquote><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">winget</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">JanDeDobbeleer.OhMyPosh</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">winget</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#B56959;">JanDeDobbeleer.OhMyPosh</span></span></code></pre></div><p>安装完:</p><p>会在<code>C:\Users\自己用户名\AppData\Local\Programs\oh-my-posh\themes&gt;</code>有很多主题</p><h2 id="预览所有主题命令" tabindex="-1">预览所有主题命令 <a class="header-anchor" href="#预览所有主题命令" aria-label="Permalink to &quot;预览所有主题命令&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">Get-PoshThemes</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">Get-PoshThemes</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426123111651.png" alt="image-20220426123111651"></p><h2 id="初始化并应用主题" tabindex="-1">初始化并应用主题 <a class="header-anchor" href="#初始化并应用主题" aria-label="Permalink to &quot;初始化并应用主题&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">oh-my-posh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--init</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--shell</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pwsh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--config</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">自己的安装目录\oh-my-posh\themes\schema.json</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Invoke-Expression</span></span>
+<span class="line"><span style="color:#758575DD;">#schema.json ---- 选择themes目录下的一款主题文件</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">oh-my-posh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--init</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--shell</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pwsh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--config</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">自己的安装目录\oh-my-posh\themes\schema.json</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Invoke-Expression</span></span>
+<span class="line"><span style="color:#A0ADA0;">#schema.json ---- 选择themes目录下的一款主题文件</span></span></code></pre></div><h2 id="分隔符乱码问题" tabindex="-1">分隔符乱码问题 <a class="header-anchor" href="#分隔符乱码问题" aria-label="Permalink to &quot;分隔符乱码问题&quot;">​</a></h2><blockquote><p>但会发现分隔符会有乱码的问题</p></blockquote><p><strong><a href="https://ohmyposh.dev/docs/configuration/fonts" target="_blank" rel="noreferrer">乱码问题解决方式</a></strong>:</p><p>安装<a href="https://www.nerdfonts.com/font-downloads" target="_blank" rel="noreferrer"><strong>Nerd Fonts</strong></a>字体，在<code>Terminal&gt;Power Shell</code>选择自己安装的字体，保存重启就生效啦。</p><p>PS：刚开始以为没有我常用的<code>JetBrain Mono</code>字体,就没在意这种解决方案,没想到里面字体挺丰富.</p><h2 id="配置powershell" tabindex="-1">配置PowerShell <a class="header-anchor" href="#配置powershell" aria-label="Permalink to &quot;配置PowerShell&quot;">​</a></h2><p>因为应用的主题只在当前窗口有效果，所以需要配置每次PowerShell启动时都会执行应用主题的脚本</p><h3 id="_1-打开配置文件方式一" tabindex="-1">1.打开配置文件方式一 <a class="header-anchor" href="#_1-打开配置文件方式一" aria-label="Permalink to &quot;1.打开配置文件方式一&quot;">​</a></h3><ul><li>获取到PowerShell配置文件绝对路径</li></ul><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">$PROFILE</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">$PROFILE</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426124525580.png" alt="image-20220426124525580"></p><ul><li>找到这个文件位置，打开并添加需要Power Shell启动时执行的脚本，保存文件重新打开Terminal看效果</li></ul><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">oh-my-posh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--init</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--shell</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pwsh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--config</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">自己的安装目录\oh-my-posh\themes\schema.json</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Invoke-Expression</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">oh-my-posh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--init</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--shell</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pwsh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--config</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">自己的安装目录\oh-my-posh\themes\schema.json</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Invoke-Expression</span></span></code></pre></div><h3 id="_2-打开配置文件方式二" tabindex="-1">2.打开配置文件方式二 <a class="header-anchor" href="#_2-打开配置文件方式二" aria-label="Permalink to &quot;2.打开配置文件方式二&quot;">​</a></h3><blockquote><p>如果安装了VS Code，如下命令可以直接打开Power Shell配置文件</p></blockquote><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">code</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$PROFILE</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">code</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$PROFILE</span></span></code></pre></div><h2 id="自定义主题" tabindex="-1">自定义主题 <a class="header-anchor" href="#自定义主题" aria-label="Permalink to &quot;自定义主题&quot;">​</a></h2><p>可借鉴的up主题文件：<a href="https://gitee.com/NilTor/public/blob/master/oh-my-posh-config.json" target="_blank" rel="noreferrer">https://gitee.com/NilTor/public/blob/master/oh-my-posh-config.json</a></p><p>更多配置可查看<a href="https://ohmyposh.dev/docs/configuration/overview" target="_blank" rel="noreferrer">官网配置文档</a></p><h2 id="vs-code终端配置" tabindex="-1">VS Code终端配置 <a class="header-anchor" href="#vs-code终端配置" aria-label="Permalink to &quot;VS Code终端配置&quot;">​</a></h2><p>没有配置打开VS Code终端报错:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">The</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">term</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">oh-my-posh</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">is</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">not</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">recognized</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">cmdlet,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">function,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">file,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">or</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">executable</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">program.</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Check</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">spelling</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">or</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">was</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">included,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">verify</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">that</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">is</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">correct</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">and</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">again.</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">The</span><span style="color:#393A34;"> </span><span style="color:#B56959;">term</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">oh-my-posh</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#B56959;">is</span><span style="color:#393A34;"> </span><span style="color:#B56959;">not</span><span style="color:#393A34;"> </span><span style="color:#B56959;">recognized</span><span style="color:#393A34;"> </span><span style="color:#B56959;">as</span><span style="color:#393A34;"> </span><span style="color:#B56959;">a</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">of</span><span style="color:#393A34;"> </span><span style="color:#B56959;">a</span><span style="color:#393A34;"> </span><span style="color:#B56959;">cmdlet,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">function,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">script</span><span style="color:#393A34;"> </span><span style="color:#B56959;">file,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">or</span><span style="color:#393A34;"> </span><span style="color:#B56959;">executable</span><span style="color:#393A34;"> </span><span style="color:#B56959;">program.</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Check</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">spelling</span><span style="color:#393A34;"> </span><span style="color:#B56959;">of</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">or</span><span style="color:#393A34;"> </span><span style="color:#B56959;">if</span><span style="color:#393A34;"> </span><span style="color:#B56959;">a</span><span style="color:#393A34;"> </span><span style="color:#B56959;">path</span><span style="color:#393A34;"> </span><span style="color:#B56959;">was</span><span style="color:#393A34;"> </span><span style="color:#B56959;">included,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">verify</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">that</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">path</span><span style="color:#393A34;"> </span><span style="color:#B56959;">is</span><span style="color:#393A34;"> </span><span style="color:#B56959;">correct</span><span style="color:#393A34;"> </span><span style="color:#B56959;">and</span><span style="color:#393A34;"> </span><span style="color:#B56959;">try</span><span style="color:#393A34;"> </span><span style="color:#B56959;">again.</span></span></code></pre></div><ul><li>在环境变量新增Oh My Posh路径下bin目录</li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426141214178.png" alt="image-20220426141214178"></p><ul><li>在设置中配置配置自己安装的<strong>Nerd Font</strong>终端字体，（这里我填上我安装的是<code>JetBrainsMono Nerd Font Mono</code>)</li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426141358102.png" alt="image-20220426141358102"></p><h2 id="隐藏提示语" tabindex="-1">隐藏提示语 <a class="header-anchor" href="#隐藏提示语" aria-label="Permalink to &quot;隐藏提示语&quot;">​</a></h2><p>每次打开都会有这四句提示语，想要打开是干干净净的界面。</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426233405476.png" alt="image-20220426233405476"></p><p>在PowerShell配置项中添加一个配置 ，配置参数<code> -NoLogo</code>为隐藏提示语</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">commandline</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">自己的pwsh.exe的路径 -NoLogo</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">,</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">commandline</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">自己的pwsh.exe的路径 -NoLogo</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">,</span></span></code></pre></div><p><strong>完整配置参考</strong></p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">colorScheme</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Campbell</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">font</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">face</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">JetBrainsMono Nerd Font Mono</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">guid</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{574e775e-4f2a-5b96-ac1e-a2962a402336}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">hidden</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">PowerShell</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">source</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Windows.Terminal.PowershellCore</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">commandline</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">C:</span><span style="color:#C99076;">\\</span><span style="color:#C98A7D;">Program Files</span><span style="color:#C99076;">\\</span><span style="color:#C98A7D;">WindowsApps</span><span style="color:#C99076;">\\</span><span style="color:#C98A7D;">Microsoft.PowerShell_7.2.2.0_x64__8wekyb3d8bbwe</span><span style="color:#C99076;">\\</span><span style="color:#C98A7D;">pwsh.exe -NoLogo</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">startingDirectory</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">null</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">colorScheme</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Campbell</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">font</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">face</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">JetBrainsMono Nerd Font Mono</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">guid</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{574e775e-4f2a-5b96-ac1e-a2962a402336}</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">hidden</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">PowerShell</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">source</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Windows.Terminal.PowershellCore</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">commandline</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">C:</span><span style="color:#A65E2B;">\\</span><span style="color:#B56959;">Program Files</span><span style="color:#A65E2B;">\\</span><span style="color:#B56959;">WindowsApps</span><span style="color:#A65E2B;">\\</span><span style="color:#B56959;">Microsoft.PowerShell_7.2.2.0_x64__8wekyb3d8bbwe</span><span style="color:#A65E2B;">\\</span><span style="color:#B56959;">pwsh.exe -NoLogo</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">startingDirectory</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">null</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426233614912.png" alt="image-20220426233614912"></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/Git/Terminal终端美化.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Git常用操作</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>配置多个平台SSH</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.html" "b/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.html"
new file mode 100644
index 00000000..c2b1eadd
--- /dev/null
+++ "b/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.html"
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_Git_配置多个平台SSH.md.49289c60.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_Git_%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-6b87e69f><div><h2 id="_1-生成公钥和私钥" tabindex="-1">1.生成公钥和私钥 <a class="header-anchor" href="#_1-生成公钥和私钥" aria-label="Permalink to &quot;1.生成公钥和私钥&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ssh-keygen</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-t</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rsa</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-C</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">8888888@qq.com</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#换成自己邮箱,可以随便填,相当于一个标识</span></span>
+<span class="line"><span style="color:#758575DD;">#密码不用填 直接回车</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ssh-keygen</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-t</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rsa</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-C</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">8888888@qq.com</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#换成自己邮箱,可以随便填,相当于一个标识</span></span>
+<span class="line"><span style="color:#A0ADA0;">#密码不用填 直接回车</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220416211353115.png" alt="image-20220416211353115"></p><blockquote><p><code>ls</code> 查看生成的文件</p></blockquote><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220416211808297.png" alt="image-20220416211808297"></p><h2 id="_2-在代码托管平台设置添加公钥" tabindex="-1">2.在代码托管平台设置添加公钥 <a class="header-anchor" href="#_2-在代码托管平台设置添加公钥" aria-label="Permalink to &quot;2.在代码托管平台设置添加公钥&quot;">​</a></h2><ul><li><strong>查看生成的公钥<code>.pub</code>文件 例如: <code>cat id_rsa_github_gmail.pub</code></strong></li><li><strong>复制公钥所有内容 ，在github/gitee/gitlab添加</strong></li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220416212417100.png" alt="image-20220416212417100"></p><h2 id="_3-添加私钥到ssh-agent中" tabindex="-1">3.添加私钥到ssh-agent中 <a class="header-anchor" href="#_3-添加私钥到ssh-agent中" aria-label="Permalink to &quot;3.添加私钥到ssh-agent中&quot;">​</a></h2><p><strong>添加私钥到ssh-agent中 ，出现<code>Identity added</code>表示成功</strong></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ssh-add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">~/.ssh/id_rsa_github_qq</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ssh-add</span><span style="color:#393A34;"> </span><span style="color:#B56959;">~/.ssh/id_rsa_github_qq</span></span></code></pre></div><ol><li>若提示 <code>Could not open a connection to your authentication agent</code></li></ol><p>​ 先执行<code>ssh-agent bash</code> 再执行上面代码</p><ol start="2"><li>报错: <code>Error connecting to agent: No such file or directory</code></li></ol><p>​ 解决方法：检查文件是否存在，并【<strong>以管理员身份运行</strong>】在 <code>PowerShell</code> 执行</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">Set-Service</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ssh-agent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-StartupType</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Manual</span></span>
+<span class="line"><span style="color:#80A665;">Start-Service</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ssh-agent</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">Set-Service</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ssh-agent</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-StartupType</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Manual</span></span>
+<span class="line"><span style="color:#59873A;">Start-Service</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ssh-agent</span></span></code></pre></div><ol start="3"><li>报错 <code>unable to start ssh-agent service, error :1058</code></li></ol><p>​ 以【<strong>管理员身份</strong>】打开终端，执行<code>Set-Service -Name ssh-agent -StartupType automatic</code></p><ul><li><strong>查看私钥列表</strong></li></ul><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ssh-add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-l</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ssh-add</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-l</span></span></code></pre></div><p><strong>出现此提示表示未配置成功，重新检查步骤配置</strong></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git@github.com:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Permission</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">denied</span><span style="color:#DBD7CAEE;"> (publickey).</span></span>
+<span class="line"><span style="color:#80A665;">fatal:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Could</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">not</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">read</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">remote</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">repository.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">Please</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">make</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">sure</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">you</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">have</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">correct</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">access</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rights</span></span>
+<span class="line"><span style="color:#80A665;">and</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">repository</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">exists.</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git@github.com:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Permission</span><span style="color:#393A34;"> </span><span style="color:#B56959;">denied</span><span style="color:#393A34;"> (publickey).</span></span>
+<span class="line"><span style="color:#59873A;">fatal:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Could</span><span style="color:#393A34;"> </span><span style="color:#B56959;">not</span><span style="color:#393A34;"> </span><span style="color:#B56959;">read</span><span style="color:#393A34;"> </span><span style="color:#B56959;">from</span><span style="color:#393A34;"> </span><span style="color:#B56959;">remote</span><span style="color:#393A34;"> </span><span style="color:#B56959;">repository.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">Please</span><span style="color:#393A34;"> </span><span style="color:#B56959;">make</span><span style="color:#393A34;"> </span><span style="color:#B56959;">sure</span><span style="color:#393A34;"> </span><span style="color:#B56959;">you</span><span style="color:#393A34;"> </span><span style="color:#B56959;">have</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">correct</span><span style="color:#393A34;"> </span><span style="color:#B56959;">access</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rights</span></span>
+<span class="line"><span style="color:#59873A;">and</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">repository</span><span style="color:#393A34;"> </span><span style="color:#B56959;">exists.</span></span></code></pre></div><h2 id="_4-创建config件-打开编辑" tabindex="-1">4.创建<code>config</code>件，打开编辑 <a class="header-anchor" href="#_4-创建config件-打开编辑" aria-label="Permalink to &quot;4.创建`config`件，打开编辑&quot;">​</a></h2><blockquote><p>注意：文件名就是<code>config</code>，没有文件后缀，编辑完保存前记得去掉注释</p></blockquote><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">Host</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">github.com</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#github主机地址</span></span>
+<span class="line"><span style="color:#80A665;">HostName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">github.com</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#github主机名</span></span>
+<span class="line"><span style="color:#80A665;">PreferredAuthentications</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">publickey</span></span>
+<span class="line"><span style="color:#80A665;">IdentityFile</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">~/.ssh/id_rsa_github</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#私钥地址</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">Host</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">gitlab.xxx.cn</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#公司gitlab主机地址</span></span>
+<span class="line"><span style="color:#80A665;">HostName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">gitlab.xxx.cn</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">#gitlab主机名</span></span>
+<span class="line"><span style="color:#80A665;">PreferredAuthentications</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">publickey</span></span>
+<span class="line"><span style="color:#80A665;">IdentityFile</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">~/.ssh/id_rsa_gitlab</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">#私钥地址</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">Host</span><span style="color:#393A34;"> </span><span style="color:#B56959;">github.com</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#github主机地址</span></span>
+<span class="line"><span style="color:#59873A;">HostName</span><span style="color:#393A34;"> </span><span style="color:#B56959;">github.com</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#github主机名</span></span>
+<span class="line"><span style="color:#59873A;">PreferredAuthentications</span><span style="color:#393A34;"> </span><span style="color:#B56959;">publickey</span></span>
+<span class="line"><span style="color:#59873A;">IdentityFile</span><span style="color:#393A34;"> </span><span style="color:#B56959;">~/.ssh/id_rsa_github</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#私钥地址</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">Host</span><span style="color:#393A34;"> </span><span style="color:#B56959;">gitlab.xxx.cn</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#公司gitlab主机地址</span></span>
+<span class="line"><span style="color:#59873A;">HostName</span><span style="color:#393A34;"> </span><span style="color:#B56959;">gitlab.xxx.cn</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">#gitlab主机名</span></span>
+<span class="line"><span style="color:#59873A;">PreferredAuthentications</span><span style="color:#393A34;"> </span><span style="color:#B56959;">publickey</span></span>
+<span class="line"><span style="color:#59873A;">IdentityFile</span><span style="color:#393A34;"> </span><span style="color:#B56959;">~/.ssh/id_rsa_gitlab</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">#私钥地址</span></span></code></pre></div><ul><li><p>测试连接是否成功，显示出这句话表示成功啦，可以看到自己账户名</p><p><code>Hi CoderFXJ! You&#39;ve successfully authenticated, but GitHub does not provide shell access.</code></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ssh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@gitee.com</span></span>
+<span class="line"><span style="color:#758575DD;">#或</span></span>
+<span class="line"><span style="color:#80A665;">ssh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@github.com</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">ssh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@gitlab.xxx.cn</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ssh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-T</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@gitee.com</span></span>
+<span class="line"><span style="color:#A0ADA0;">#或</span></span>
+<span class="line"><span style="color:#59873A;">ssh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-T</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@github.com</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">ssh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-T</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@gitlab.xxx.cn</span></span></code></pre></div></li></ul><h2 id="ssh公钥私钥加密解密原理" tabindex="-1">SSH公钥私钥加密解密原理 <a class="header-anchor" href="#ssh公钥私钥加密解密原理" aria-label="Permalink to &quot;SSH公钥私钥加密解密原理&quot;">​</a></h2></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/Git/配置多个平台SSH.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Terminal终端美化</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>async与await</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/async\344\270\216await.html" "b/FrontEnd/JavaScript/async\344\270\216await.html"
new file mode 100644
index 00000000..c4f84e62
--- /dev/null
+++ "b/FrontEnd/JavaScript/async\344\270\216await.html"
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Javascript实现异步 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_async与await.md.d21c9cb0.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_async%E4%B8%8Eawait" data-v-6b87e69f><div><h1 id="javascript实现异步" tabindex="-1">Javascript实现异步 <a class="header-anchor" href="#javascript实现异步" aria-label="Permalink to &quot;Javascript实现异步&quot;">​</a></h1><div class="info custom-block"><p class="custom-block-title">INFO</p><p>Javascript是单线程执行语言</p></div><h3 id="方式一-回调函数" tabindex="-1">方式一：回调函数 <a class="header-anchor" href="#方式一-回调函数" aria-label="Permalink to &quot;方式一：回调函数&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">3秒后打印的</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">},</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">比setTimeout回调函数先执行</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//本身会立刻返回，然后执行后面同步代码，回调函数则等预定时间才执行</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">3秒后打印的</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">},</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">比setTimeout回调函数先执行</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//本身会立刻返回，然后执行后面同步代码，回调函数则等预定时间才执行</span></span></code></pre></div><p>缺点：容易形成回调地狱</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">3秒后打印的</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()=&gt;{</span><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">6秒后打印的</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">()=&gt;{</span><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">               </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">9秒后打印的</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">},</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">3秒后打印的</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()=&gt;{</span><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">6秒后打印的</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">       </span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">()=&gt;{</span><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">               </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">9秒后打印的</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">},</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">},</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">},</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">)</span></span></code></pre></div><h3 id="方式二-promise" tabindex="-1">方式二：Promise <a class="header-anchor" href="#方式二-promise" aria-label="Permalink to &quot;方式二：Promise&quot;">​</a></h3><p>声名Promise</p><blockquote><p>new Promise(function(resolve, reject){ })</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">success</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 成功执行</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//走then</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">finally</span><span style="color:#666666;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//无论成功失败，都会执行的回调</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//做一些清理工作，如关闭加载动画</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fail</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 失败执行</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//走catch</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">success</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 成功执行</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//走then</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">finally</span><span style="color:#999999;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//无论成功失败，都会执行的回调</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//做一些清理工作，如关闭加载动画</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fail</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 失败执行</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//走catch</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p>如果想终止在某个执行链的位置，可以用<strong>Promise.reject(new Error())</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">   </span><span style="color:#758575DD;">// return result + 1</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;">  </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">   </span><span style="color:#A0ADA0;">// return result + 1</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="语法糖-async-await" tabindex="-1">语法糖：async /await <a class="header-anchor" href="#语法糖-async-await" aria-label="Permalink to &quot;语法糖：async /await&quot;">​</a></h3><blockquote><p><strong>await</strong> 表示强制等待的意思，<strong>await</strong>关键字的后面要跟一个promise对象，它总是等到该promise对象resolve成功之后执行，并且会返回resolve的结果</p></blockquote><blockquote><p>async标记该函数就是一个异步函数，不会阻塞其他执行逻辑的执行，被async标记的函数返回也是promise对象</p></blockquote><blockquote><p>（<strong>async 和 await必须成对出现，不能用在普通函数上</strong>）</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn1</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fn1执行结果</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">5000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#80A665;">fn2</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">fn1</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//async的函数并不会阻塞后续同步代码执行</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fn2执行</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//先执行</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn1</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">){</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fn1执行结果</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#2F798A;">5000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#59873A;">fn2</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">fn1</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//async的函数并不会阻塞后续同步代码执行</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fn2执行</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//先执行</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="实现fn1先执行" tabindex="-1">实现fn1先执行 <a class="header-anchor" href="#实现fn1先执行" aria-label="Permalink to &quot;实现fn1先执行&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn2</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">fn1</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fn2执行</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn2</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">fn1</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fn2执行</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span></code></pre></div><h4 id="捕获异常" tabindex="-1">捕获异常 <a class="header-anchor" href="#捕获异常" aria-label="Permalink to &quot;捕获异常&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">getCatch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 通过 try/catch捕获异常</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">log1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">log2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">getCatch</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 通过 try/catch捕获异常</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">log1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">log2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span></code></pre></div><h4 id="使用陷阱" tabindex="-1">使用陷阱 <a class="header-anchor" href="#使用陷阱" aria-label="Permalink to &quot;使用陷阱&quot;">​</a></h4><blockquote><p>1.会打破异步操作并行</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn1</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://.../post/1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://.../post/2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//a任务需要等到b任务执行完后才执行</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn1</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://.../post/1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://.../post/2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//a任务需要等到b任务执行完后才执行</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>高效做法</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn1</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promistA</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://.../post/1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promistB</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://.../post/2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//利用 Promise.all组合</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#BD976A;">b</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">all</span><span style="color:#666666;">([</span><span style="color:#BD976A;">promiseA</span><span style="color:#666666;">,</span><span style="color:#BD976A;">pormiseB</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn1</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promistA</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://.../post/1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promistB</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://.../post/2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//利用 Promise.all组合</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#B07D48;">b</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">all</span><span style="color:#999999;">([</span><span style="color:#B07D48;">promiseA</span><span style="color:#999999;">,</span><span style="color:#B07D48;">pormiseB</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>2.循环中执行异步操作，不能直接使用forEach,map等方法</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">].</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span><span style="color:#758575DD;">//会立刻返回，并不会等待所有异步操作执行完</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">done</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">].</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span><span style="color:#A0ADA0;">//会立刻返回，并不会等待所有异步操作执行完</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">done</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>解决方法</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//等待所有异步操作执行完毕在执行后面代码</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">done</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//等待所有异步操作执行完毕在执行后面代码</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">done</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>高效做法</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//...</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//等待所有异步操作执行完毕在执行后面代码</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">done</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//...</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//等待所有异步操作执行完毕在执行后面代码</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">done</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/async与await.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>配置多个平台SSH</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>代码分支优化</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.html" "b/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.html"
new file mode 100644
index 00000000..e9277c65
--- /dev/null
+++ "b/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.html"
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>if else 多分支优化 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_代码分支优化.md.e8fda00c.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-6b87e69f><div><h1 id="if-else-多分支优化" tabindex="-1">if else 多分支优化 <a class="header-anchor" href="#if-else-多分支优化" aria-label="Permalink to &quot;if else 多分支优化&quot;">​</a></h1><h2 id="简单分支" tabindex="-1">简单分支 <a class="header-anchor" href="#简单分支" aria-label="Permalink to &quot;简单分支&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//优化前</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#CB7676;">===</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛哞哞叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#CB7676;">===</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老虎</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛嗷嗷叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#CB7676;">===</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老鸡</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛咯咯叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//优化后</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">老牛</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛哞哞叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">老虎</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老虎嗷嗷叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">老鸡</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老鸡咯咯叫</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">name</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">name</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">不知道怎么叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//优化前</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#AB5959;">===</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛哞哞叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#AB5959;">===</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老虎</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛嗷嗷叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#AB5959;">===</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老鸡</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛咯咯叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//优化后</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">老牛</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛哞哞叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">老虎</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老虎嗷嗷叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">老鸡</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老鸡咯咯叫</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">name</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">name</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">不知道怎么叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><h2 id="条件单一-处理不同" tabindex="-1">条件单一,处理不同 <a class="header-anchor" href="#条件单一-处理不同" aria-label="Permalink to &quot;条件单一,处理不同&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">老牛</span><span style="color:#666666;">:()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">老虎</span><span style="color:#666666;">:()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">老鸡</span><span style="color:#666666;">:()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">name</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">name</span><span style="color:#666666;">]()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">xxx</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">老牛</span><span style="color:#999999;">:()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">老虎</span><span style="color:#999999;">:()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">老鸡</span><span style="color:#999999;">:()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">name</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">name</span><span style="color:#999999;">]()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">xxx</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="条件复杂-处理也复杂" tabindex="-1">条件复杂,处理也复杂 <a class="header-anchor" href="#条件复杂-处理也复杂" aria-label="Permalink to &quot;条件复杂,处理也复杂&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//条件,处理映射</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#758575DD;">//条件1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//处理函数1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#758575DD;">//条件2</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//处理函数2</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#758575DD;">//条件3</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//处理函数4</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">target</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]())</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">target</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">target</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">xxx</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//条件,处理映射</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#A0ADA0;">//条件1</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//处理函数1</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#A0ADA0;">//条件2</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//处理函数2</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#A0ADA0;">//条件3</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//处理函数4</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">target</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]())</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">target</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">target</span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">xxx</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/代码分支优化.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>async与await</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>图片懒加载</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" "b/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html"
new file mode 100644
index 00000000..c4879a65
--- /dev/null
+++ "b/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html"
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>JS 图片懒加载 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_图片懒加载.md.3d5465d0.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-6b87e69f><div><h1 id="js-图片懒加载" tabindex="-1">JS 图片懒加载 <a class="header-anchor" href="#js-图片懒加载" aria-label="Permalink to &quot;JS 图片懒加载&quot;">​</a></h1><h2 id="方案一-监听滚动" tabindex="-1">方案一：监听滚动 <a class="header-anchor" href="#方案一-监听滚动" aria-label="Permalink to &quot;方案一：监听滚动&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>监听图片顶部到达视口底部，把自定义属性 data-src赋值给src</p></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">images</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">querySelectorAll</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">img</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">scroll</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">images</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">image</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">imageTop</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">image</span><span style="color:#666666;">.</span><span style="color:#80A665;">getBoundingClientRect</span><span style="color:#666666;">().</span><span style="color:#BD976A;">top</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">imageTop</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#BD976A;">innerHeight</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data_src</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">image</span><span style="color:#666666;">.</span><span style="color:#80A665;">getAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">data-src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">image</span><span style="color:#666666;">.</span><span style="color:#80A665;">setAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data_src</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">images</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">querySelectorAll</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">img</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">scroll</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">images</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">image</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">imageTop</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">image</span><span style="color:#999999;">.</span><span style="color:#59873A;">getBoundingClientRect</span><span style="color:#999999;">().</span><span style="color:#B07D48;">top</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">imageTop</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#B07D48;">innerHeight</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data_src</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">image</span><span style="color:#999999;">.</span><span style="color:#59873A;">getAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">data-src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">image</span><span style="color:#999999;">.</span><span style="color:#59873A;">setAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data_src</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h2 id="方案二-观察者" tabindex="-1">方案二：观察者 <a class="header-anchor" href="#方案二-观察者" aria-label="Permalink to &quot;方案二：观察者&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">images</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">querySelectorAll</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">img</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">enteries</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">enteries</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">entry</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">entry</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isIntersecting</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data_src</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">getAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">data-src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">setAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data_src</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">observer</span><span style="color:#666666;">.</span><span style="color:#80A665;">unobserve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">img</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">observer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">IntersectionObserver</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">images</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">image</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">observer</span><span style="color:#666666;">.</span><span style="color:#80A665;">observe</span><span style="color:#666666;">(</span><span style="color:#BD976A;">image</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">images</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">querySelectorAll</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">img</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">enteries</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">enteries</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">entry</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">entry</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isIntersecting</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data_src</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">getAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">data-src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">setAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data_src</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">observer</span><span style="color:#999999;">.</span><span style="color:#59873A;">unobserve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">img</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">observer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">IntersectionObserver</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">images</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">image</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">observer</span><span style="color:#999999;">.</span><span style="color:#59873A;">observe</span><span style="color:#999999;">(</span><span style="color:#B07D48;">image</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/图片懒加载.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>代码分支优化</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>基础复习一</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.html" "b/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.html"
new file mode 100644
index 00000000..09027d2d
--- /dev/null
+++ "b/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.html"
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_基础复习一.md.a8906ce7.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-6b87e69f><div><h3 id="_1-算术运算符" tabindex="-1">1.算术运算符 <a class="header-anchor" href="#_1-算术运算符" aria-label="Permalink to &quot;1.算术运算符&quot;">​</a></h3><p><strong>隐式类型转换</strong></p><blockquote><p>除了<strong>加法</strong>和其他<em>字符串</em>运算时，它先将其他值转为字符串，在进行拼接；其他运算它先将其他值转为<em>数字</em>，在进行运算</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">5</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//5</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 9</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//10</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// NaN</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 10</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">5</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//5</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 9</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//10</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// NaN</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 10</span></span></code></pre></div><h3 id="_2-赋值运算符" tabindex="-1">2.赋值运算符 <a class="header-anchor" href="#_2-赋值运算符" aria-label="Permalink to &quot;2.赋值运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// a += 10  (*= 	/=   %=		**=)</span></span>
+<span class="line"><span style="color:#758575DD;">//	??= 只有当a为undefined或null才会进行赋值</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// a += 10  (*= 	/=   %=		**=)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//	??= 只有当a为undefined或null才会进行赋值</span></span></code></pre></div><h3 id="_3-运算符" tabindex="-1">3..运算符 <a class="header-anchor" href="#_3-运算符" aria-label="Permalink to &quot;3..运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">123</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 123</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">123</span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//-123</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">123</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 123</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">123</span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//-123</span></span></code></pre></div><h3 id="_4-自增和自减" tabindex="-1">4.自增和自减 <a class="header-anchor" href="#_4-自增和自减" aria-label="Permalink to &quot;4.自增和自减&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//	++ 使用后回事原来的变量立刻增加1</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#CB7676;">++</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#CB7676;">--</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//前自增:返回自增前的值</span></span>
+<span class="line"><span style="color:#758575DD;">//后自增:返回自增后的值</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//	++ 使用后回事原来的变量立刻增加1</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#AB5959;">++</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#AB5959;">--</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//前自增:返回自增前的值</span></span>
+<span class="line"><span style="color:#A0ADA0;">//后自增:返回自增后的值</span></span></code></pre></div><h3 id="_5-逻辑运算符" tabindex="-1">5.逻辑运算符 <a class="header-anchor" href="#_5-逻辑运算符" aria-label="Permalink to &quot;5.逻辑运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">!</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">//逻辑非:对布尔值值取反,对非布尔值值取反,会先将其转为布尔值值再取反,可运用于隐式转布尔值   !!123 -&gt; true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//逻辑与:左右都为true返回true,否则返回false;非布尔值运算,会先转为布尔值后运算,但是最终返回原值</span></span>
+<span class="line"><span style="color:#666666;">    	</span><span style="color:#758575DD;">//-	第一个值为(falsy),则直接返回第一个值的原值1,如果第一个值为ture,则直接返回第二个值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    	</span><span style="color:#4D9375;">NaN</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">NaN</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> 		</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">undefined</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> 		</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//逻辑或:左右有true,则不看第二个值,则返回true的原值,否则返回false 	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      	</span><span style="color:#4C9A91;">12</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	 </span><span style="color:#4C9A91;">12</span><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a </span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	 </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a </span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">!</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">//逻辑非:对布尔值值取反,对非布尔值值取反,会先将其转为布尔值值再取反,可运用于隐式转布尔值   !!123 -&gt; true</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//逻辑与:左右都为true返回true,否则返回false;非布尔值运算,会先转为布尔值后运算,但是最终返回原值</span></span>
+<span class="line"><span style="color:#999999;">    	</span><span style="color:#A0ADA0;">//-	第一个值为(falsy),则直接返回第一个值的原值1,如果第一个值为ture,则直接返回第二个值</span></span>
+<span class="line"><span style="color:#393A34;">    	</span><span style="color:#1E754F;">NaN</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">NaN</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> 		</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">undefined</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> 		</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	</span><span style="color:#1E754F;">false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">||</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//逻辑或:左右有true,则不看第二个值,则返回true的原值,否则返回false 	</span></span>
+<span class="line"><span style="color:#393A34;">      	</span><span style="color:#2F798A;">12</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">		</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	 </span><span style="color:#2F798A;">12</span><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">a </span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">}</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	 </span><span style="color:#999999;">{</span><span style="color:#998418;">a </span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_6-关系运算符" tabindex="-1">6.关系运算符 <a class="header-anchor" href="#_6-关系运算符" aria-label="Permalink to &quot;6.关系运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//用来检查两个值的关系是否成立,成立返回true,否则返回false (多个比较用&amp;&amp;)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;=</span></span>
+<span class="line"><span style="color:#758575DD;">// 非数值与数值比较会先非数值转为数值再比较  7 &lt; &#39;10&#39; -&gt;  true</span></span>
+<span class="line"><span style="color:#758575DD;">//	两端为字符串则逐个比较字符的Unicode编码	 </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">a</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">b</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">		</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">abc</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">b</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">(</span><span style="color:#BD976A;">比完第一位则结束</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">12</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//用来检查两个值的关系是否成立,成立返回true,否则返回false (多个比较用&amp;&amp;)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	</span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;=</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 非数值与数值比较会先非数值转为数值再比较  7 &lt; &#39;10&#39; -&gt;  true</span></span>
+<span class="line"><span style="color:#A0ADA0;">//	两端为字符串则逐个比较字符的Unicode编码	 </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">a</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">b</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">		</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">abc</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">b</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">(</span><span style="color:#B07D48;">比完第一位则结束</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">12</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span></code></pre></div><h3 id="_7-相等运算符" tabindex="-1">7.相等运算符 <a class="header-anchor" href="#_7-相等运算符" aria-label="Permalink to &quot;7.相等运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">==/!=</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//用来比较两个值是否相等/不相等,不同类型会转为相同类型再比较	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//null和undefined进行相等比较会返回true(null == undefined -&gt; true)</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//NaN不和任何值相等,包括它自身</span></span>
+<span class="line"><span style="color:#CB7676;">===/!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//检查两个值是否全等/不全等,不会自动类型转换</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//null === undefined -&gt; false</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">==/!=</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//用来比较两个值是否相等/不相等,不同类型会转为相同类型再比较	</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//null和undefined进行相等比较会返回true(null == undefined -&gt; true)</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//NaN不和任何值相等,包括它自身</span></span>
+<span class="line"><span style="color:#AB5959;">===/!==</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//检查两个值是否全等/不全等,不会自动类型转换</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//null === undefined -&gt; false</span></span></code></pre></div><h3 id="_8-条件运算符" tabindex="-1">8.条件运算符 <a class="header-anchor" href="#_8-条件运算符" aria-label="Permalink to &quot;8.条件运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">表达式</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">表达式1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">表达式2</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//let max = a &gt; b ? a : b</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">表达式</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">表达式1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">表达式2</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//let max = a &gt; b ? a : b</span></span></code></pre></div><h3 id="_9-控制语句" tabindex="-1">9.控制语句 <a class="header-anchor" href="#_9-控制语句" aria-label="Permalink to &quot;9.控制语句&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">if</span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(){</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//不加{}if只会控制紧随其后的一条语句</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#4D9375;">switch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">表达式</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">case</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">表达式</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">break</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">default</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//表达式进行全等比较,满足则执行代码,否则比较其他case后的表达式</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">if</span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(){</span><span style="color:#393A34;">	</span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//不加{}if只会控制紧随其后的一条语句</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#1E754F;">switch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">表达式</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">case</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">表达式</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">break</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">default</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//表达式进行全等比较,满足则执行代码,否则比较其他case后的表达式</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_10-循环语句" tabindex="-1">10.循环语句 <a class="header-anchor" href="#_10-循环语句" aria-label="Permalink to &quot;10.循环语句&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//循环三要素 1.初始化变量	2.条件表达式	3.更新表达式</span></span>
+<span class="line"><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">条件表达式</span><span style="color:#666666;">){...}</span></span>
+<span class="line"><span style="color:#4D9375;">do</span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">表达式</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//先执行一次循环体,再判断条件是否执行循环体</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//for(;;)死循环</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//循环三要素 1.初始化变量	2.条件表达式	3.更新表达式</span></span>
+<span class="line"><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">条件表达式</span><span style="color:#999999;">){...}</span></span>
+<span class="line"><span style="color:#1E754F;">do</span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#999999;">...</span><span style="color:#393A34;">	</span><span style="color:#999999;">}</span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">表达式</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//先执行一次循环体,再判断条件是否执行循环体</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//for(;;)死循环</span></span></code></pre></div><blockquote><p><strong>break与continue</strong>💔终止离它最近的循环, break立即循环停止; continue跳过当前循环,继续下一次循环</p></blockquote><h3 id="_11-数据类型" tabindex="-1">11.数据类型 <a class="header-anchor" href="#_11-数据类型" aria-label="Permalink to &quot;11.数据类型&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//原始值(7种):</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">Number</span><span style="color:#666666;">,</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span><span style="color:#BD976A;">Boolean</span><span style="color:#666666;">,</span><span style="color:#BD976A;">Null</span><span style="color:#666666;">,</span><span style="color:#BD976A;">Undefined</span><span style="color:#666666;">,</span><span style="color:#BD976A;">BigInt</span><span style="color:#666666;">,</span><span style="color:#BD976A;">Symbol</span></span>
+<span class="line"><span style="color:#758575DD;">//引用值(对象)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">Object</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">[</span><span style="color:#80A665;">Symbol</span><span style="color:#666666;">()]</span><span style="color:#DBD7CAEE;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">此值不可枚举</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//原始值(7种):</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">Number</span><span style="color:#999999;">,</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span><span style="color:#B07D48;">Boolean</span><span style="color:#999999;">,</span><span style="color:#B07D48;">Null</span><span style="color:#999999;">,</span><span style="color:#B07D48;">Undefined</span><span style="color:#999999;">,</span><span style="color:#B07D48;">BigInt</span><span style="color:#999999;">,</span><span style="color:#B07D48;">Symbol</span></span>
+<span class="line"><span style="color:#A0ADA0;">//引用值(对象)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">Object</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">[</span><span style="color:#59873A;">Symbol</span><span style="color:#999999;">()]</span><span style="color:#393A34;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">此值不可枚举</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/基础复习一.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>图片懒加载</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>基础复习二</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.html" "b/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.html"
new file mode 100644
index 00000000..ce705893
--- /dev/null
+++ "b/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.html"
@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_基础复习二.md.8f89af07.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-6b87e69f><div><h3 id="this指向" tabindex="-1">this指向 <a class="header-anchor" href="#this指向" aria-label="Permalink to &quot;this指向&quot;">​</a></h3><p>根据函数调用方式的不同，this的值也不同：</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li>以函数形式调用，this是window</li><li>以方法形式调用, this是调用方法的对象</li><li>构造函数中，this是新建的对象</li><li>箭头函数没有自己的this, 由外层作用域决定</li><li>通过call和apply调用的函数，它们的第一个参数就是函数的this</li><li>通过bind返回的函数，this由bind第一个参数决定（无法修改）</li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//window</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhansan</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//obj</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn2</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//window     </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">fn3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//obj,与调用方式无关,指向声明时外层作用域的this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">fn2</span><span style="color:#666666;">()</span><span style="color:#758575DD;">//以函数形式调用指向window</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span><span style="color:#758575DD;">//以方法形式调用,指向obj</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//window</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhansan</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//obj</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn2</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//window     </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">fn3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//obj,与调用方式无关,指向声明时外层作用域的this</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">fn2</span><span style="color:#999999;">()</span><span style="color:#A0ADA0;">//以函数形式调用指向window</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span><span style="color:#A0ADA0;">//以方法形式调用,指向obj</span></span></code></pre></div><p>函数三种调用方式</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">fn</span><span style="color:#666666;">.</span><span style="color:#80A665;">call</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">fn</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">fn</span><span style="color:#999999;">.</span><span style="color:#59873A;">call</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">fn</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">()</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">call和bind与apply</p><ol><li><p>call 和 apply除了可以调用函数，还可以用来指定函数中的this</p><ul><li>通过call方法调用函数，函数的实参直接在第一个参数后一个一个的列出来</li><li>apply 实参需要通过一个数组传递</li></ul></li><li><p>bind() 是函数的方法，可以用来创建一个新的函数</p><ul><li>bind可以为新函数绑定this</li><li>bind可以为新函数绑定参数</li></ul></li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">fn2</span><span style="color:#666666;">.</span><span style="color:#80A665;">call</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hello</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//会立即执行</span></span>
+<span class="line"><span style="color:#BD976A;">fn2</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hello</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">]</span><span style="color:#758575DD;">//会立即执行</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newfn</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fn</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//不会立即执行, 返回一个新函数 	newfn()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">fn2</span><span style="color:#999999;">.</span><span style="color:#59873A;">call</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hello</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//会立即执行</span></span>
+<span class="line"><span style="color:#B07D48;">fn2</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hello</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">]</span><span style="color:#A0ADA0;">//会立即执行</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newfn</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fn</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//不会立即执行, 返回一个新函数 	newfn()</span></span></code></pre></div><p>箭头函数没有自身的this，它的this由定义时外层作用域决定，</p><ul><li><p>也无法通过call apply 和 bind修改它的this</p></li><li><p>箭头函数中没有arguments</p></li></ul><h3 id="可变参数-arguments" tabindex="-1">可变参数 <code>arguments</code> <a class="header-anchor" href="#可变参数-arguments" aria-label="Permalink to &quot;可变参数 `arguments`&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">// 定义一个函数，可以求任意个数值的和</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#758575DD;">// 通过arguments，可以不受参数数量的限制更加灵活的创建函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* arguments</span></span>
+<span class="line"><span style="color:#758575DD;">    - arguments是函数中又一个隐含参数</span></span>
+<span class="line"><span style="color:#758575DD;">    - arguments是一个类数组对象（伪数组）</span></span>
+<span class="line"><span style="color:#758575DD;">        和数组相似，可以通过索引来读取元素，也可以通过for循环变量，							</span></span>
+<span class="line"><span style="color:#758575DD;">        但是它不是一个数组对象，不能调用数组的方法</span></span>
+<span class="line"><span style="color:#758575DD;">    - arguments用来存储函数的实参，</span></span>
+<span class="line"><span style="color:#758575DD;">        无论用户是否定义形参，实参都会存储到arguments对象中</span></span>
+<span class="line"><span style="color:#758575DD;">        可以通过该对象直接访问实参*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">arguments</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// 定义一个函数，可以求任意个数值的和</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 通过arguments，可以不受参数数量的限制更加灵活的创建函数</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* arguments</span></span>
+<span class="line"><span style="color:#A0ADA0;">    - arguments是函数中又一个隐含参数</span></span>
+<span class="line"><span style="color:#A0ADA0;">    - arguments是一个类数组对象（伪数组）</span></span>
+<span class="line"><span style="color:#A0ADA0;">        和数组相似，可以通过索引来读取元素，也可以通过for循环变量，							</span></span>
+<span class="line"><span style="color:#A0ADA0;">        但是它不是一个数组对象，不能调用数组的方法</span></span>
+<span class="line"><span style="color:#A0ADA0;">    - arguments用来存储函数的实参，</span></span>
+<span class="line"><span style="color:#A0ADA0;">        无论用户是否定义形参，实参都会存储到arguments对象中</span></span>
+<span class="line"><span style="color:#A0ADA0;">        可以通过该对象直接访问实参*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">arguments</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="剩余参数-args" tabindex="-1">剩余参数 <code>...args</code> <a class="header-anchor" href="#剩余参数-args" aria-label="Permalink to &quot;剩余参数 `...args`&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum2</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">num</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* </span></span>
+<span class="line"><span style="color:#758575DD;">剩余参数，在定义函数时可以将参数指定为剩余参数</span></span>
+<span class="line"><span style="color:#758575DD;">- 剩余参数可以接收任意数量实参，并将他们统一存储到一个数组中返回</span></span>
+<span class="line"><span style="color:#758575DD;">- 作用和arguments基本是一致，但是也具有一些不同点：</span></span>
+<span class="line"><span style="color:#758575DD;">    是一个数组，名字可以自己指定，配合其他参数一起使用，剩余参数写到最后。</span></span>
+<span class="line"><span style="color:#758575DD;"> */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn3</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum2</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">num</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* </span></span>
+<span class="line"><span style="color:#A0ADA0;">剩余参数，在定义函数时可以将参数指定为剩余参数</span></span>
+<span class="line"><span style="color:#A0ADA0;">- 剩余参数可以接收任意数量实参，并将他们统一存储到一个数组中返回</span></span>
+<span class="line"><span style="color:#A0ADA0;">- 作用和arguments基本是一致，但是也具有一些不同点：</span></span>
+<span class="line"><span style="color:#A0ADA0;">    是一个数组，名字可以自己指定，配合其他参数一起使用，剩余参数写到最后。</span></span>
+<span class="line"><span style="color:#A0ADA0;"> */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn3</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span></code></pre></div><h3 id="map" tabindex="-1">Map <a class="header-anchor" href="#map" aria-label="Permalink to &quot;Map&quot;">​</a></h3><ul><li><strong>Map用来存储键值对结构的数据（key-value）</strong></li><li>Object中存储的数据就可以认为是一种键值对结构</li><li>Map和Object的主要区别： <ul><li>Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名， JS解释器会自动将其转换为字符串</li><li>Map中任何类型的值都可以称为数据的key</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/*属性和方法：</span></span>
+<span class="line"><span style="color:#758575DD;">  map.size() 获取map中键值对的数量</span></span>
+<span class="line"><span style="color:#758575DD;">  map.set(key, value) 向map中添加键值对</span></span>
+<span class="line"><span style="color:#758575DD;">  map.get(key) 根据key获取值   </span></span>
+<span class="line"><span style="color:#758575DD;">  map.delete(key) 删除指定数据</span></span>
+<span class="line"><span style="color:#758575DD;">  map.has(key) 检查map中是否包含指定键</span></span>
+<span class="line"><span style="color:#758575DD;">  map.clear() 删除全部的键值对*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">age</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">[</span><span style="color:#80A665;">Symbol</span><span style="color:#666666;">()]:</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">哈哈</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">[</span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">]:</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">嘻嘻</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/*属性和方法：</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.size() 获取map中键值对的数量</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.set(key, value) 向map中添加键值对</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.get(key) 根据key获取值   </span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.delete(key) 删除指定数据</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.has(key) 检查map中是否包含指定键</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.clear() 删除全部的键值对*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">age</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">[</span><span style="color:#59873A;">Symbol</span><span style="color:#999999;">()]:</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">哈哈</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">[</span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">]:</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">嘻嘻</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><p><strong>将map转换为数组</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">from</span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//const arr = [...map]</span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">// 遍历map</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">map</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#666666;">.</span><span style="color:#80A665;">keys</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">获取map的所有的key</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#666666;">.</span><span style="color:#80A665;">values</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">获取map的所有的value</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">from</span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//const arr = [...map]</span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// 遍历map</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">map</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#999999;">.</span><span style="color:#59873A;">keys</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">获取map的所有的key</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#999999;">.</span><span style="color:#59873A;">values</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">获取map的所有的value</span></span></code></pre></div><p><strong>数组转map</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Map</span><span style="color:#666666;">([</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">age</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[{},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}],</span></span>
+<span class="line"><span style="color:#666666;">])</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Map</span><span style="color:#999999;">([</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">age</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[{},</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}],</span></span>
+<span class="line"><span style="color:#999999;">])</span></span></code></pre></div><h3 id="set" tabindex="-1">Set <a class="header-anchor" href="#set" aria-label="Permalink to &quot;Set&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/* - 使用方式：</span></span>
+<span class="line"><span style="color:#758575DD;">    创建</span></span>
+<span class="line"><span style="color:#758575DD;">        - new Set()</span></span>
+<span class="line"><span style="color:#758575DD;">        - new Set([...])</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">    方法</span></span>
+<span class="line"><span style="color:#758575DD;">        size 获取数量</span></span>
+<span class="line"><span style="color:#758575DD;">        add() 添加元素</span></span>
+<span class="line"><span style="color:#758575DD;">        has() 检查元素</span></span>
+<span class="line"><span style="color:#758575DD;">        delete() 删除元素</span></span>
+<span class="line"><span style="color:#758575DD;">        [...set]转为数组获取元素 </span></span>
+<span class="line"><span style="color:#758575DD;">        set.entries() 得到键值对(键值对一样)</span></span>
+<span class="line"><span style="color:#758575DD;">        */</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/* - 使用方式：</span></span>
+<span class="line"><span style="color:#A0ADA0;">    创建</span></span>
+<span class="line"><span style="color:#A0ADA0;">        - new Set()</span></span>
+<span class="line"><span style="color:#A0ADA0;">        - new Set([...])</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">    方法</span></span>
+<span class="line"><span style="color:#A0ADA0;">        size 获取数量</span></span>
+<span class="line"><span style="color:#A0ADA0;">        add() 添加元素</span></span>
+<span class="line"><span style="color:#A0ADA0;">        has() 检查元素</span></span>
+<span class="line"><span style="color:#A0ADA0;">        delete() 删除元素</span></span>
+<span class="line"><span style="color:#A0ADA0;">        [...set]转为数组获取元素 </span></span>
+<span class="line"><span style="color:#A0ADA0;">        set.entries() 得到键值对(键值对一样)</span></span>
+<span class="line"><span style="color:#A0ADA0;">        */</span></span></code></pre></div><h3 id="随机数生成" tabindex="-1">随机数生成 <a class="header-anchor" href="#随机数生成" aria-label="Permalink to &quot;随机数生成&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#758575DD;">//生成 0-x之间的随机数：</span></span>
+<span class="line"><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">round</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//生成 x-y 之间的随机数</span></span>
+<span class="line"><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">round</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">x</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#A0ADA0;">//生成 0-x之间的随机数：</span></span>
+<span class="line"><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">round</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//生成 x-y 之间的随机数</span></span>
+<span class="line"><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">round</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">x</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">)</span></span></code></pre></div><h3 id="时间格式化" tabindex="-1">时间格式化 <a class="header-anchor" href="#时间格式化" aria-label="Permalink to &quot;时间格式化&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#666666;">.</span><span style="color:#80A665;">toLocaleDateString</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 将日期转换为本地的字符串		&#39;2021/10/1</span></span>
+<span class="line"><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#666666;">.</span><span style="color:#80A665;">toLocaleTimeString</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 将时间转换为本地的字符串 	&#39;21:32:35&#39;</span></span>
+<span class="line"><span style="color:#758575DD;">/*   - 参数：</span></span>
+<span class="line"><span style="color:#758575DD;">1. locales: 描述语言和国家信息的字符串</span></span>
+<span class="line"><span style="color:#758575DD;">    zh-CN 中文中国</span></span>
+<span class="line"><span style="color:#758575DD;">    zh-HK 中文香港</span></span>
+<span class="line"><span style="color:#758575DD;">    en-US 英文美国</span></span>
+<span class="line"><span style="color:#758575DD;">2. options: 需要一个对象作为参数，在对象中可以通过对象的属性来对日期的格式进行配置</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#666666;">.</span><span style="color:#80A665;">toLocaleString</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zh-CN</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">year</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">numeric</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">month</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">long</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">day</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2-digit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">weekday</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">short</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">hour</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2-digit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">minute</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2-digit</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#999999;">.</span><span style="color:#59873A;">toLocaleDateString</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 将日期转换为本地的字符串		&#39;2021/10/1</span></span>
+<span class="line"><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#999999;">.</span><span style="color:#59873A;">toLocaleTimeString</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 将时间转换为本地的字符串 	&#39;21:32:35&#39;</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*   - 参数：</span></span>
+<span class="line"><span style="color:#A0ADA0;">1. locales: 描述语言和国家信息的字符串</span></span>
+<span class="line"><span style="color:#A0ADA0;">    zh-CN 中文中国</span></span>
+<span class="line"><span style="color:#A0ADA0;">    zh-HK 中文香港</span></span>
+<span class="line"><span style="color:#A0ADA0;">    en-US 英文美国</span></span>
+<span class="line"><span style="color:#A0ADA0;">2. options: 需要一个对象作为参数，在对象中可以通过对象的属性来对日期的格式进行配置</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#999999;">.</span><span style="color:#59873A;">toLocaleString</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zh-CN</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">year</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">numeric</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">month</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">long</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">day</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2-digit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">weekday</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">short</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">hour</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2-digit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">minute</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2-digit</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="面向对象之类" tabindex="-1">面向对象之类 <a class="header-anchor" href="#面向对象之类" aria-label="Permalink to &quot;面向对象之类&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	 </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gender</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// console.log(&quot;构造函数执行了~&quot;, name, age, gender)</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 可以在构造函数中，为实例属性进行赋值</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 在构造函数中，this表示当前所创建的对象</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">gender</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gender</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// sayHello = function(){} // 添加方法的一种方式</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 添加方法（实例方法） 实例方法中this就是当前实例</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">test</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">我是静态方法</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 静态方法（类方法） 通过类来调用 静态方法中this指向的是当前类</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	 </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gender</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// console.log(&quot;构造函数执行了~&quot;, name, age, gender)</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 可以在构造函数中，为实例属性进行赋值</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 在构造函数中，this表示当前所创建的对象</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">gender</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gender</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// sayHello = function(){} // 添加方法的一种方式</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">大家好，我是</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 添加方法（实例方法） 实例方法中this就是当前实例</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">test</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">我是静态方法</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 静态方法（类方法） 通过类来调用 静态方法中this指向的是当前类</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>面向对象的特点：封装、继承和多态</strong></p><blockquote><p>封装 —— 安全性 继承 —— 扩展性 多态 —— 灵活性</p></blockquote><h4 id="封装" tabindex="-1">封装 <a class="header-anchor" href="#封装" aria-label="Permalink to &quot;封装&quot;">​</a></h4><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li>对象就是一个用来存储不同属性的容器</li><li>对象不仅存储属性，还要负责数据的安全, 直接添加到对象中的属性，并不安全，因为它们可以被任意的修改</li><li>如何确保数据的安全： <ul><li>私有化数据: 将需要保护的数据设置为私有，只能在类内部使用</li><li>提供setter和getter方法来开放对数据的操作</li><li>属性设置私有，通过getter setter方法操作属性带来的好处 <ol><li>可以控制属性的读写权限</li><li>可以在方法中对属性的值进行验证</li></ol></li></ul></li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">实现封装的方式</span><span style="color:#DBD7CAEE;">：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">属性私有化</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">加</span><span style="color:#DBD7CAEE;">#</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">通过getter和setter方法来操作属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">属性名</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">set</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">属性名</span><span style="color:#666666;">(</span><span style="color:#BD976A;">参数</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#属性</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">参数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">实现封装的方式</span><span style="color:#393A34;">：</span></span>
+<span class="line"><span style="color:#393A34;">    1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">属性私有化</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">加</span><span style="color:#393A34;">#</span></span>
+<span class="line"><span style="color:#393A34;">    2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">通过getter和setter方法来操作属性</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">get</span><span style="color:#393A34;"> </span><span style="color:#59873A;">属性名</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#属性</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">set</span><span style="color:#393A34;"> </span><span style="color:#59873A;">属性名</span><span style="color:#999999;">(</span><span style="color:#B07D48;">参数</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#属性</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">参数</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	 #</span><span style="color:#BD976A;">name</span><span style="color:#758575DD;">//实例使用#开头就变成了私有属性，私有属性只能在类内部访问</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gender</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">getName</span><span style="color:#666666;">(){</span><span style="color:#758575DD;">// getter方法，用p.getName()来读取属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// setter方法，用来设置属性,p.setName(&#39;zhangsan&#39;)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setName</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">name</span><span style="color:#666666;">(){</span><span style="color:#758575DD;">//简化读取方式:p.name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">set</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">name</span><span style="color:#666666;">(</span><span style="color:#BD976A;">gender</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	 #</span><span style="color:#B07D48;">name</span><span style="color:#A0ADA0;">//实例使用#开头就变成了私有属性，私有属性只能在类内部访问</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gender</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">getName</span><span style="color:#999999;">(){</span><span style="color:#A0ADA0;">// getter方法，用p.getName()来读取属性</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// setter方法，用来设置属性,p.setName(&#39;zhangsan&#39;)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setName</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">get</span><span style="color:#393A34;"> </span><span style="color:#59873A;">name</span><span style="color:#999999;">(){</span><span style="color:#A0ADA0;">//简化读取方式:p.name</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">set</span><span style="color:#393A34;"> </span><span style="color:#59873A;">name</span><span style="color:#999999;">(</span><span style="color:#B07D48;">gender</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><h4 id="继承" tabindex="-1">继承 <a class="header-anchor" href="#继承" aria-label="Permalink to &quot;继承&quot;">​</a></h4><div class="tip custom-block"><p class="custom-block-title">继承</p><ul><li>可以通过extends关键来完成继承 时，就相当于将另一个类中的代码复制到了当前类中（简单理解）</li><li>继承发生时，被继承的类称为 父类（超类），继承的类称为 子类 的代码，并且可以在不修改一个类的前提对其进行扩展</li></ul></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">动物在叫~</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 重写构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 重写构造函数时，构造函数的第一行代码必须为super()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 调用父类的构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">// 在子类中，可以通过创建同名方法来重写父类的方法</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">汪汪汪</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Dog</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">旺财</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">dog</span><span style="color:#666666;">.</span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">动物在叫~</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Dog</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 重写构造函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 重写构造函数时，构造函数的第一行代码必须为super()</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 调用父类的构造函数</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">// 在子类中，可以通过创建同名方法来重写父类的方法</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">汪汪汪</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dog</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Dog</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">旺财</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">dog</span><span style="color:#999999;">.</span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">()</span></span></code></pre></div><h4 id="多态" tabindex="-1">多态 <a class="header-anchor" href="#多态" aria-label="Permalink to &quot;多态&quot;">​</a></h4><p>在JS中不会检查参数的类型，所以这就意味着任何数据都可以作为参数传递 指定的类型，只要对象满足某些条件即可</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Hello,</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//只要参数有obj.name就可以调用</span></span>
+<span class="line"><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dog</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(</span><span style="color:#BD976A;">person</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Hello,</span><span style="color:#B5695999;">&quot;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//只要参数有obj.name就可以调用</span></span>
+<span class="line"><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dog</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(</span><span style="color:#B07D48;">person</span><span style="color:#999999;">)</span></span></code></pre></div><h3 id="对象的结构" tabindex="-1">对象的结构 <a class="header-anchor" href="#对象的结构" aria-label="Permalink to &quot;对象的结构&quot;">​</a></h3><h4 id="原型" tabindex="-1">原型 <a class="header-anchor" href="#原型" aria-label="Permalink to &quot;原型&quot;">​</a></h4><p>对象中存储属性的区域实际有两个：</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li><p>对象自身</p><ul><li>直接通过对象所添加的属性，位于对象自身中</li><li>在<strong>类</strong>中通过 x = y 的形式添加的属性，位于对象自身中</li></ul></li><li><p>原型对象（prototype）</p><ul><li>对象中还有一些内容，会存储到其他的对象里（原型对象）</li><li>在对象中会有一个属性用来存储原型对象，这个属性叫做<code>__proto__</code></li><li>原型对象也负责为对象存储属性，<br> 当我们访问对象中的属性时，会优先访问对象自身的属性，<br> 对象自身不包含该属性时，才会去原型对象中寻找</li><li>会添加到原型对象中的情况： <ol><li>在类中通过xxx(){}方式添加的方法，位于原型中</li><li>主动向原型中添加的属性或方法</li></ol></li></ul></li><li><p>访问一个对象的原型对象</p><ul><li><code>obj.__proto__</code></li><li><code>Object.getPrototypeOf(对象)</code></li></ul></li><li><p>原型对象中的数据：</p><ul><li>对象中的数据（属性、方法等）</li><li>constructor （对象的构造函数）</li></ul></li></ol><p><strong>原型链:</strong> 原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同 obj对象的原型链：obj对象 --&gt; 原型 --&gt; null</p></div><h4 id="原型链" tabindex="-1">原型链 <a class="header-anchor" href="#原型链" aria-label="Permalink to &quot;原型链&quot;">​</a></h4><div class="info custom-block"><p class="custom-block-title">原型链属性查找规则</p><ol><li>读取对象属性时，会优先对象自身属性，</li><li>如果对象中有，则使用，没有则去对象的原型中寻找</li><li>如果原型中有，则使用，没有则去原型的原型中寻找</li><li>直到找到<code>Object</code>对象的原型（Object的原型没有原型（为<code>null</code>））</li><li>如果依然没有找到，则返回<code>undefined</code></li></ol></div><div class="tip custom-block"><p class="custom-block-title">原型的作用：</p><ol><li>原型就相当于是一个公共的区域，可以被所有该类实例访问，</li><li>可以将该类实例中，所有的公共属性（方法）统一存储到原型中</li><li>这样我们只需要创建一个属性，即可被所有实例访问</li><li>一修改就是修改所有实例的原型</li><li>无需创建实例即可完成对类的修改</li></ol></div><h4 id="修改原型" tabindex="-1">修改原型 <a class="header-anchor" href="#修改原型" aria-label="Permalink to &quot;修改原型&quot;">​</a></h4><div class="warning custom-block"><p class="custom-block-title">原则</p><ol><li>原型尽量不要手动改</li><li>要改也不要通过实例对象去改</li><li>通过 类.prototype 属性去修改</li><li>最好不要直接给prototype去赋值</li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Person</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">fly</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//在原型添加方法</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">我在飞！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#998418;">Person</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">fly</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//在原型添加方法</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">我在飞！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="instanceof-in-hasown" tabindex="-1">instanceof/in/hasOwn <a class="header-anchor" href="#instanceof-in-hasown" aria-label="Permalink to &quot;instanceof/in/hasOwn&quot;">​</a></h4><blockquote><p>用于检查的是对象的原型链上是否有该类 <code>dog instanceof Animal</code></p></blockquote><div class="info custom-block"><p class="custom-block-title">检查对象属性</p><ul><li>in:使用in运算符检查属性时，无论属性在对象自身还是在原型中，都会返回true</li><li>对象.hasOwnProperty(属性名):用来检查一个对象的 自身 是否含有某个属性</li><li>Object.hasOwn(对象, 属性名):用来检查一个对象的 自身 是否含有某个属性</li></ul></div><h3 id="_10-new运算符" tabindex="-1">10.new运算符 <a class="header-anchor" href="#_10-new运算符" aria-label="Permalink to &quot;10.new运算符&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">new运算符是创建对象时，将会发生这4件事：</p><ol><li><p>创建一个普通的JS对象（<code>Object</code>对象 {}）, 称其为新对象</p></li><li><p>将构造函数的<code>prototype</code>属性设置为新对象的原型</p></li><li><p>使用实参来执行构造函数，并且将新对象设置为函数中的<code>this</code></p></li><li><p>如果构造函数返回的是一个<strong>非原始值</strong>，则该值会作为new运算的返回值返回</p><p>如果构造函数的返回值是一个<strong>原始值</strong>或者<strong>没有指定返回值</strong>(<code>undefined</code>)</p><p>则<em>新的对象</em>将会作为返回值返回（通常不会为构造函数指定返回值）</p></li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">MyClass</span><span style="color:#666666;">(){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">// let newInstance = {}</span></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">// newInstance.__proto__ = MyClass.prototype</span></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">// this = newInstance</span></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">// return newInstance</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">MyClass</span><span style="color:#999999;">(){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">// let newInstance = {}</span></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">// newInstance.__proto__ = MyClass.prototype</span></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">// this = newInstance</span></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">// return newInstance</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">}</span></span></code></pre></div><p><strong>对象的分类</strong>：</p><ol><li><strong>内建对象</strong>: 由ES标准所定义的对象</li><li><strong>宿主对象</strong>: 由浏览器提供的对象</li><li><strong>自定义对象</strong>: 由开发人员自己创建的对象(Vue, React)</li></ol></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/基础复习二.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>基础复习一</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>常见算法</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.html" "b/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.html"
new file mode 100644
index 00000000..518e82df
--- /dev/null
+++ "b/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.html"
@@ -0,0 +1,1713 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_常见算法.md.0cd56de3.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-6b87e69f><div><h2 id="括号匹配" tabindex="-1">括号匹配 <a class="header-anchor" href="#括号匹配" aria-label="Permalink to &quot;括号匹配&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{[]}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//true</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{[[]}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//false</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{[]}[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//false</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str4</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{[()]}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//true</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{[]}</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//true</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{[[]}</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{[]}[</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str4</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{[()]}</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//true</span></span></code></pre></div><p><strong>解决方案：</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方案一：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isValid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  	</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  	</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">)</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#666666;">            </span><span style="color:#758575DD;">//栈顶出栈的左括号 !== map取出右括号匹配的括号类型</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">pop</span><span style="color:#666666;">())</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// arr数组已全部匹配，出完栈</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方案二：</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isMatched</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">top</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">charAt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">top</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">[</span><span style="color:#BD976A;">top</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">pop</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">top</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">[</span><span style="color:#BD976A;">top</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">pop</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">top</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">)</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">[</span><span style="color:#BD976A;">top</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">pop</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">top</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方案一：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isValid</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  	</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">  	</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">)</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">}</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//栈顶出栈的左括号 !== map取出右括号匹配的括号类型</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">pop</span><span style="color:#999999;">())</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">                </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// arr数组已全部匹配，出完栈</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方案二：</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isMatched</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">top</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">charAt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">top</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">}</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">[</span><span style="color:#B07D48;">top</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">pop</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">top</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">]</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">[</span><span style="color:#B07D48;">top</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">pop</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">top</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">)</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">[</span><span style="color:#B07D48;">top</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">pop</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">top</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>解析：</p><ul><li>利用栈来实现括号匹配，用 <code>top</code> 标识栈顶元素的下标，初始值为 <code>-1</code>。</li><li>遍历字符串中的每个字符 <code>ch</code>。</li><li>如果是左括号 <code>{</code>、<code>[</code> 或 <code>(</code>，则入栈。</li><li>如果是右括号 <code>}</code>、<code>]</code> 或 <code>)</code>，则判断栈顶元素是否匹配，如果匹配则出栈，否则不匹配。</li><li>如果字符不是括号，则返回 <code>false</code>。</li><li>最后，如果栈为空说明所有括号都匹配，返回 <code>true</code>，否则不匹配返回 <code>false</code>。</li></ul><h2 id="简单递归" tabindex="-1">简单递归 <a class="header-anchor" href="#简单递归" aria-label="Permalink to &quot;简单递归&quot;">​</a></h2><h3 id="计算阶乘" tabindex="-1">计算阶乘 <a class="header-anchor" href="#计算阶乘" aria-label="Permalink to &quot;计算阶乘&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">factorial</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">factorial</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">factorial</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#59873A;">factorial</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="2"><li>计算斐波那契数列（Fibonacci）</li></ol><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="扁平化数组" tabindex="-1">扁平化数组 <a class="header-anchor" href="#扁平化数组" aria-label="Permalink to &quot;扁平化数组&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//ES6的flat方法实现：</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flatten</span><span style="color:#666666;">(</span><span style="color:#BD976A;">array</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#80A665;">flat</span><span style="color:#666666;">(</span><span style="color:#4D9375;">Infinity</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//仅限二维数组</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">concat</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">([],</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">8</span><span style="color:#666666;">]]</span></span>
+<span class="line"><span style="color:#80A665;">flat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">array1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">//多维数组</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flatplus</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">some</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Array</span><span style="color:#666666;">)){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">concat</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">([],</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">]]]]</span></span>
+<span class="line"><span style="color:#80A665;">flatplus</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//[2, 3, 4, 5, 6, 7]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//可控制扁平化深度：Array.prototype.concat.apply</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flatplus</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">depth</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">flag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">some</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Array</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">depth</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">flag</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">concat</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">([],</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">++</span><span style="color:#BD976A;">deep</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//递归+concat</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flatten</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#80A665;">flatten</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//ES6的flat方法实现：</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flatten</span><span style="color:#999999;">(</span><span style="color:#B07D48;">array</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#59873A;">flat</span><span style="color:#999999;">(</span><span style="color:#1E754F;">Infinity</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//仅限二维数组</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">concat</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">([],</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">8</span><span style="color:#999999;">]]</span></span>
+<span class="line"><span style="color:#59873A;">flat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">array1</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">//多维数组</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flatplus</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">some</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">)){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">concat</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">([],</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">7</span><span style="color:#999999;">]]]]</span></span>
+<span class="line"><span style="color:#59873A;">flatplus</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//[2, 3, 4, 5, 6, 7]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//可控制扁平化深度：Array.prototype.concat.apply</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flatplus</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">depth</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deep</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">flag</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">some</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deep</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">depth</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">flag</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">concat</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">([],</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">++</span><span style="color:#B07D48;">deep</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//递归+concat</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flatten</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#59873A;">flatten</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]));</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="反转字符串" tabindex="-1">反转字符串 <a class="header-anchor" href="#反转字符串" aria-label="Permalink to &quot;反转字符串&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//解法一：使用数组的reverse()方法</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">reverse</span><span style="color:#666666;">().</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//解法二：使用for循环遍历字符串</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">--</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//解法三：使用递归函数</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//解法一：使用数组的reverse()方法</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">reverse</span><span style="color:#999999;">().</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//解法二：使用for循环遍历字符串</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">--</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//解法三：使用递归函数</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="求最大公约数" tabindex="-1">求最大公约数 <a class="header-anchor" href="#求最大公约数" aria-label="Permalink to &quot;求最大公约数&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">gcd</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">gcd</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">gcd</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">gcd</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="斐波那契数列" tabindex="-1">斐波那契数列 <a class="header-anchor" href="#斐波那契数列" aria-label="Permalink to &quot;斐波那契数列&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//递归实现</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">&lt;=</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//动态规划实现</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#666666;">&lt;=</span><span style="color:#BD976A;">n</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">f</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">f</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">f</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">f</span><span style="color:#666666;">[</span><span style="color:#BD976A;">n</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//测试</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#666666;">&lt;=</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">fibonacci(</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">i</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">): </span><span style="color:#666666;">${</span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#C98A7D;">i</span><span style="color:#666666;">)</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//输出：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//递归实现</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">&lt;=</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//动态规划实现</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">=</span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#999999;">&lt;=</span><span style="color:#B07D48;">n</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">f</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">f</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">f</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">2</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">f</span><span style="color:#999999;">[</span><span style="color:#B07D48;">n</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//测试</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">=</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#999999;">&lt;=</span><span style="color:#2F798A;">10</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">fibonacci(</span><span style="color:#999999;">${</span><span style="color:#B56959;">i</span><span style="color:#999999;">}</span><span style="color:#B56959;">): </span><span style="color:#999999;">${</span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B56959;">i</span><span style="color:#999999;">)</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//输出：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="排序算法" tabindex="-1">排序算法 <a class="header-anchor" href="#排序算法" aria-label="Permalink to &quot;排序算法&quot;">​</a></h2><h3 id="冒泡排序" tabindex="-1">冒泡排序 <a class="header-anchor" href="#冒泡排序" aria-label="Permalink to &quot;冒泡排序&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bubbleSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#758575DD;">/*</span></span>
+<span class="line"><span style="color:#758575DD;">            不使用额外变量交换</span></span>
+<span class="line"><span style="color:#758575DD;">            方法一：</span></span>
+<span class="line"><span style="color:#758575DD;">            [arr[j+1],arr[j]] = [arr[j],arr[j+1]]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">            方法二：</span></span>
+<span class="line"><span style="color:#758575DD;">            a = a + b;</span></span>
+<span class="line"><span style="color:#758575DD;">            b = a - b;</span></span>
+<span class="line"><span style="color:#758575DD;">            a = a - b;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">            方法三：</span></span>
+<span class="line"><span style="color:#758575DD;">            a = a ^ b;</span></span>
+<span class="line"><span style="color:#758575DD;">            b = a ^ b;</span></span>
+<span class="line"><span style="color:#758575DD;">            a = a ^ b;</span></span>
+<span class="line"><span style="color:#758575DD;">            */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bubbleSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A0ADA0;">/*</span></span>
+<span class="line"><span style="color:#A0ADA0;">            不使用额外变量交换</span></span>
+<span class="line"><span style="color:#A0ADA0;">            方法一：</span></span>
+<span class="line"><span style="color:#A0ADA0;">            [arr[j+1],arr[j]] = [arr[j],arr[j+1]]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">            方法二：</span></span>
+<span class="line"><span style="color:#A0ADA0;">            a = a + b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            b = a - b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            a = a - b;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">            方法三：</span></span>
+<span class="line"><span style="color:#A0ADA0;">            a = a ^ b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            b = a ^ b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            a = a ^ b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            */</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="选择排序" tabindex="-1">选择排序 <a class="header-anchor" href="#选择排序" aria-label="Permalink to &quot;选择排序&quot;">​</a></h3><p><a href="https://visualgo.net/en" target="_blank" rel="noreferrer"><strong>排序动画图解</strong></a></p><p><strong>随机生成测试数组</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">testArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10000</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">testArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100000</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">testArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10000</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">     </span><span style="color:#B07D48;">testArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100000</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">9</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">8</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">selectSort</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">is not Array</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">minIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//找到arr[i]后的最小值得索引</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">minIndex</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">minIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//交换</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tem</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">minIndex</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">minIndex</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tem</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">7</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">9</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">8</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">selectSort</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">is not Array</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">minIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//找到arr[i]后的最小值得索引</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">minIndex</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">minIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//交换</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tem</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">minIndex</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">minIndex</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tem</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="快速排序" tabindex="-1">快速排序 <a class="header-anchor" href="#快速排序" aria-label="Permalink to &quot;快速排序&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">quickSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pivotIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//选中心轴索引，并选取中心轴的值</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pivot</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">splice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pivotIndex</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span><span style="color:#DBD7CAEE;">　　</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span><span style="color:#DBD7CAEE;">　　</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span><span style="color:#DBD7CAEE;">　</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">　　　　</span></span>
+<span class="line highlighted"><span style="color:#666666;">        </span><span style="color:#758575DD;">//与中心轴比较，小的放在左数组，大的放在右数组　</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">     	</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pivot</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">left</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">right</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">　　</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">quickSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">left</span><span style="color:#666666;">).</span><span style="color:#80A665;">concat</span><span style="color:#666666;">([</span><span style="color:#BD976A;">pivot</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">quickSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">right</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">quickSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pivotIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//选中心轴索引，并选取中心轴的值</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pivot</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">splice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pivotIndex</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span><span style="color:#393A34;">　　</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span><span style="color:#393A34;">　　</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span><span style="color:#393A34;">　</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;">　　　　</span></span>
+<span class="line highlighted"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//与中心轴比较，小的放在左数组，大的放在右数组　</span></span>
+<span class="line highlighted"><span style="color:#393A34;">     	</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pivot</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">left</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">right</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;">　　</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">quickSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">left</span><span style="color:#999999;">).</span><span style="color:#59873A;">concat</span><span style="color:#999999;">([</span><span style="color:#B07D48;">pivot</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#59873A;">quickSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">right</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div><h3 id="插入排序" tabindex="-1">插入排序 <a class="header-anchor" href="#插入排序" aria-label="Permalink to &quot;插入排序&quot;">​</a></h3><p>以第一个数为有序数组，让后面每一个数比较找位置并插入有序数组里。</p><p>若后面待插入的数大于有序数组的最后一个数，就放在原位；</p><p>若第小于有序数组的最后一个数，则进入while循环，在有序数组中找位置：</p><p><code>arr[preIndex]</code>后移索引变为<code>preIndex+1</code>，<code>current</code>插入到<code>arr[preIndex]</code>前一位，也就是<code>arr[preindex-1+1]</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">insertSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">preIndex</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">preIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//  while (preIndex &gt;= 0 &amp;&amp; current &lt; arr[preIndex]) {//从大到小</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">preIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">preIndex</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//从小到大</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">preIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">preIndex</span><span style="color:#666666;">];</span><span style="color:#758575DD;">//后移</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">preIndex</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#758575DD;">//退出while循环时，说明插入位置找到</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">preIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">insertSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">preIndex</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">preIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//  while (preIndex &gt;= 0 &amp;&amp; current &lt; arr[preIndex]) {//从大到小</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">preIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">preIndex</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//从小到大</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">preIndex</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">preIndex</span><span style="color:#999999;">];</span><span style="color:#A0ADA0;">//后移</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">preIndex</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#A0ADA0;">//退出while循环时，说明插入位置找到</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">preIndex</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="希尔排序" tabindex="-1">希尔排序 <a class="header-anchor" href="#希尔排序" aria-label="Permalink to &quot;希尔排序&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">shellSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">array</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 把距离为 gap 的元素编为一个组，扫描所有组</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#666666;">            </span><span style="color:#758575DD;">// 对距离为 gap 的元素组进行排序</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">];</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">];</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">gap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">gap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 减小增量</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">shellSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">array</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 把距离为 gap 的元素编为一个组，扫描所有组</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">// 对距离为 gap 的元素组进行排序</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">];</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">                </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">];</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">gap</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">gap</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 减小增量</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="求两个有序数组的中位数" tabindex="-1">求两个有序数组的中位数 <a class="header-anchor" href="#求两个有序数组的中位数" aria-label="Permalink to &quot;求两个有序数组的中位数&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//出这两个有序数组的中位数,时间复杂度为 O(m+n)</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">findMedianSortedArrays</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mergeArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">merge</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 合并两个有序数组</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mergeArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 判断合并后的数组长度，分奇偶情况求中位数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">mergeArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">len</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mergeArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">len</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">])</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mergeArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">len</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 归并排序合并两个有序数组</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">merge</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//出这两个有序数组的中位数,时间复杂度为 O(m+n)</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">findMedianSortedArrays</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mergeArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">merge</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 合并两个有序数组</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mergeArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 判断合并后的数组长度，分奇偶情况求中位数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">mergeArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">len</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">2</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mergeArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">len</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">2</span><span style="color:#999999;">])</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mergeArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">len</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 归并排序合并两个有序数组</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">merge</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">findMedianSortedArrays</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">merge</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">merged</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#666666;">)];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">merge</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">merged</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">merged</span><span style="color:#666666;">[</span><span style="color:#BD976A;">mid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">[</span><span style="color:#BD976A;">mid</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">[</span><span style="color:#BD976A;">mid</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">findMedianSortedArrays</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">merge</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">merged</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#999999;">)];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">merge</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mid</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">merged</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">merged</span><span style="color:#999999;">[</span><span style="color:#B07D48;">mid</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">[</span><span style="color:#B07D48;">mid</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">[</span><span style="color:#B07D48;">mid</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="实现eventemitter" tabindex="-1">实现EventEmitter <a class="header-anchor" href="#实现eventemitter" aria-label="Permalink to &quot;实现EventEmitter&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//可以添加事件侦听器，触发事件，并处理异步事件</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">EventEmitter</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">listener</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">].</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">listener</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">].</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">listener</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">listener</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//可以添加事件侦听器，触发事件，并处理异步事件</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">EventEmitter</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">listener</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">].</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">listener</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">].</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">listener</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">listener</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>测试</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">eventEmitter</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">eventEmitter</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventA</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventA triggered</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#BD976A;">eventEmitter</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventB</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventB triggered</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">eventEmitter</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventA</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">eventEmitter</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventB</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">eventEmitter</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">eventEmitter</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventA</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventA triggered</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#B07D48;">eventEmitter</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventB</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventB triggered</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">eventEmitter</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventA</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">eventEmitter</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventB</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span></code></pre></div></details><h2 id="生成随机十六进制颜色" tabindex="-1"><a href="https://css-tricks.com/snippets/javascript/random-hex-color/" target="_blank" rel="noreferrer">生成随机十六进制颜色</a> <a class="header-anchor" href="#生成随机十六进制颜色" aria-label="Permalink to &quot;[生成随机十六进制颜色](https://css-tricks.com/snippets/javascript/random-hex-color/)&quot;">​</a></h2><p>方案一：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">red</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">256</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">green</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">256</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">256</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">red</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">green</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">red</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">256</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">green</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">256</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">256</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">red</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">green</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案二：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16777215</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">#</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">color</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16777215</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">#</span><span style="color:#999999;">${</span><span style="color:#B56959;">color</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案三：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hexColor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">from</span><span style="color:#666666;">({</span><span style="color:#B8A965;">length</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">256</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hexColor</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hexColor</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">from</span><span style="color:#999999;">({</span><span style="color:#998418;">length</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">256</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hexColor</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案四：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">letters</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0123456789ABCDEF</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">letters</span><span style="color:#666666;">[</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16</span><span style="color:#666666;">)];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">letters</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0123456789ABCDEF</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">letters</span><span style="color:#999999;">[</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16</span><span style="color:#999999;">)];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案五：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0xFFFFFF</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">000000</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#666666;">).</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0xFFFFFF</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">000000</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#999999;">).</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">6</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案六：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0x1000000</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">).</span><span style="color:#80A665;">padStart</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0x1000000</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">).</span><span style="color:#59873A;">padStart</span><span style="color:#999999;">(</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><p>方案七：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">r</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">)).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">)).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">)).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">).</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">`</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">r</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">r</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">)).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">g</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">)).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">)).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">).</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">`</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">r</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">g</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="返回给定起止字符串月份中间所有月份" tabindex="-1">返回给定起止字符串月份中间所有月份 <a class="header-anchor" href="#返回给定起止字符串月份中间所有月份" aria-label="Permalink to &quot;返回给定起止字符串月份中间所有月份&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getMonths</span><span style="color:#666666;">(</span><span style="color:#BD976A;">start</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">end</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startDate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#BD976A;">start</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">endDate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#BD976A;">end</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">months</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">startDate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">endDate</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">year</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startDate</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFullYear</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">month</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startDate</span><span style="color:#666666;">.</span><span style="color:#80A665;">getMonth</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">monthStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">year</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">-</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">month</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">().</span><span style="color:#80A665;">padStart</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  	</span><span style="color:#BD976A;">months</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">monthStr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">startDate</span><span style="color:#666666;">.</span><span style="color:#80A665;">setMonth</span><span style="color:#666666;">(</span><span style="color:#BD976A;">month</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">months</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getMonths</span><span style="color:#999999;">(</span><span style="color:#B07D48;">start</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">end</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startDate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B07D48;">start</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">endDate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B07D48;">end</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">months</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">startDate</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">endDate</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">year</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startDate</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFullYear</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">month</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startDate</span><span style="color:#999999;">.</span><span style="color:#59873A;">getMonth</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">monthStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#999999;">${</span><span style="color:#B56959;">year</span><span style="color:#999999;">}</span><span style="color:#B56959;">-</span><span style="color:#999999;">${</span><span style="color:#B56959;">month</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">().</span><span style="color:#59873A;">padStart</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  	</span><span style="color:#B07D48;">months</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">monthStr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">startDate</span><span style="color:#999999;">.</span><span style="color:#59873A;">setMonth</span><span style="color:#999999;">(</span><span style="color:#B07D48;">month</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">months</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="实现promise的all方法" tabindex="-1">实现Promise的all方法 <a class="header-anchor" href="#实现promise的all方法" aria-label="Permalink to &quot;实现Promise的all方法&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">promiseAll</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promiseArr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promiseArr</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TypeError</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">arguments should be an array</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// let count = 0;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// for (let i = 0; i &lt; promiseArr.length; i++) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   promiseArr[i]</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     .then((res) =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       count++;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       resArr[i] = res;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       if (count === promiseArr.length) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         resolve(resArr);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       }</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     })</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     .catch((err) =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       reject(err);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     });</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">promiseArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">p</span><span style="color:#666666;">,</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 使用示例</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2000</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">error</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">promiseAll</span><span style="color:#666666;">([</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p3</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">((</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, &quot;error&quot;]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#80A665;">catch</span><span style="color:#666666;">((</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// error</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">promiseAll</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promiseArr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promiseArr</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TypeError</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">arguments should be an array</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// let count = 0;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// for (let i = 0; i &lt; promiseArr.length; i++) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   promiseArr[i]</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     .then((res) =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       count++;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       resArr[i] = res;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       if (count === promiseArr.length) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         resolve(resArr);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       }</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     })</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     .catch((err) =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       reject(err);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     });</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">promiseArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">p</span><span style="color:#999999;">,</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">     </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 使用示例</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2000</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">error</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">promiseAll</span><span style="color:#999999;">([</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p3</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">((</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, &quot;error&quot;]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#59873A;">catch</span><span style="color:#999999;">((</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// error</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">))</span></span></code></pre></div><h2 id="lru缓存算法" tabindex="-1">LRU缓存算法 <a class="header-anchor" href="#lru缓存算法" aria-label="Permalink to &quot;LRU缓存算法&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//LRU缓存算法: 缓存固定大小，当缓存超出容量时，删除最久未被使用的元素</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">LRUCache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">capacity</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">capacity</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">capacity</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 缓存最大容量</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Map</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 使用Map来存储key-value</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//获取缓存中对应key的值，如果不存在则返回-1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">has</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 将访问的元素删除并重新添加到最前面</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">delete</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//添加一个元素到缓存中，并在超出容量时删除最久未被使用的元素</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 如果key已经存在，则先删除这个节点</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">has</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">delete</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">capacity</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">// 如果缓存超出容量，则删除最久未被使用的元素，即链表尾部元素</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">keys</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldestKey</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">().</span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 链表头部是最久未使用的元素</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">delete</span><span style="color:#666666;">(</span><span style="color:#BD976A;">oldestKey</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 将新节点添加到链表头部</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//LRU缓存算法: 缓存固定大小，当缓存超出容量时，删除最久未被使用的元素</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">LRUCache</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">capacity</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">capacity</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">capacity</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 缓存最大容量</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cache</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Map</span><span style="color:#999999;">();</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 使用Map来存储key-value</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//获取缓存中对应key的值，如果不存在则返回-1</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">has</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 将访问的元素删除并重新添加到最前面</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">delete</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//添加一个元素到缓存中，并在超出容量时删除最久未被使用的元素</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 如果key已经存在，则先删除这个节点</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">has</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">delete</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">capacity</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">// 如果缓存超出容量，则删除最久未被使用的元素，即链表尾部元素</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">keys</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldestKey</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">().</span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 链表头部是最久未使用的元素</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">delete</span><span style="color:#999999;">(</span><span style="color:#B07D48;">oldestKey</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 将新节点添加到链表头部</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>使用示例：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">LRUCache</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 缓存是 {1=1}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 缓存是 {1=1, 2=2}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 1</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 删除 key 2，缓存是 {1=1, 3=3}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 -1</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 删除 key 1，缓存是 {3=3, 4=4}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 -1</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 3</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 4</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">LRUCache</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 缓存是 {1=1}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 缓存是 {1=1, 2=2}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 1</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 删除 key 2，缓存是 {1=1, 3=3}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 -1</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 删除 key 1，缓存是 {3=3, 4=4}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 -1</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 3</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 4</span></span></code></pre></div><h2 id="不使用乘法符号乘法函数" tabindex="-1">不使用乘法符号乘法函数 <a class="header-anchor" href="#不使用乘法符号乘法函数" aria-label="Permalink to &quot;不使用乘法符号乘法函数&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//递归</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">y</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//for循环</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">abs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">abs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 15</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// -15</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// -15</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 15</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//递归</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">y</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//for循环</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">abs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">abs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 15</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// -15</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// -15</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 15</span></span></code></pre></div><h2 id="链表反转" tabindex="-1">链表反转 <a class="header-anchor" href="#链表反转" aria-label="Permalink to &quot;链表反转&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prev</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prev</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">prev</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prev</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//测试</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n4</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">n1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">n2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">n3</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n4</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">n4</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n5</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Original LinkedList: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#80A665;">printLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">head</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C99076;">\n</span><span style="color:#C98A7D;">Reversed LinkedList: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#80A665;">printLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">printLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">process</span><span style="color:#666666;">.</span><span style="color:#BD976A;">stdout</span><span style="color:#666666;">.</span><span style="color:#80A665;">write</span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prev</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prev</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">prev</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prev</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//测试</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Node</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n4</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n5</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">n1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">n2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">n3</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n4</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">n4</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n5</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Original LinkedList: </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#59873A;">printLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">head</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#A65E2B;">\n</span><span style="color:#B56959;">Reversed LinkedList: </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#59873A;">printLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">printLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">process</span><span style="color:#999999;">.</span><span style="color:#B07D48;">stdout</span><span style="color:#999999;">.</span><span style="color:#59873A;">write</span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="二叉树的遍历" tabindex="-1">二叉树的遍历 <a class="header-anchor" href="#二叉树的遍历" aria-label="Permalink to &quot;二叉树的遍历&quot;">​</a></h2><p><strong>二叉树三种遍历方式</strong>：</p><ul><li>前序遍历：先访问节点，然后再访问左子树和右子树。</li><li>中序遍历：先访问左子树，然后访问节点，最后访问右子树。</li><li>后序遍历：先访问左子树，然后访问右子树，最后访问节点。</li></ul><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 定义二叉树节点类</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">TreeNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 前序遍历</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">preOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">root</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">val</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">preOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">preOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 中序遍历</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">inOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">root</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">inOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">val</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">inOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 后序遍历</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">postOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">root</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">postOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">postOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">val</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 定义二叉树节点类</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">TreeNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 前序遍历</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">preOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">root</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">val</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">preOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">preOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 中序遍历</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">inOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">root</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">inOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">val</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">inOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 后序遍历</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">postOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">root</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">postOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">postOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">val</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>测试</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/* ------------- 测试 -------------- */</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//     1</span></span>
+<span class="line"><span style="color:#758575DD;">//   /   \</span></span>
+<span class="line"><span style="color:#758575DD;">//  2     3</span></span>
+<span class="line"><span style="color:#758575DD;">// / \   / \</span></span>
+<span class="line"><span style="color:#758575DD;">//4   5 6   7</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">preOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">// [1, 2, 4, 5, 3, 6, 7]</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">inOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">// [4, 2, 5, 1, 6, 3, 7]</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">postOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// [4, 5, 2, 6, 7, 3, 1]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/* ------------- 测试 -------------- */</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//     1</span></span>
+<span class="line"><span style="color:#A0ADA0;">//   /   \</span></span>
+<span class="line"><span style="color:#A0ADA0;">//  2     3</span></span>
+<span class="line"><span style="color:#A0ADA0;">// / \   / \</span></span>
+<span class="line"><span style="color:#A0ADA0;">//4   5 6   7</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">6</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">7</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">preOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">));</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">// [1, 2, 4, 5, 3, 6, 7]</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">inOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">));</span><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">// [4, 2, 5, 1, 6, 3, 7]</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">postOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">));</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// [4, 5, 2, 6, 7, 3, 1]</span></span></code></pre></div></details><h2 id="二叉搜索树的插入和查找" tabindex="-1">二叉搜索树的插入和查找 <a class="header-anchor" href="#二叉搜索树的插入和查找" aria-label="Permalink to &quot;二叉搜索树的插入和查找&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">递归实现</span><span style="color:#DBD7CAEE;">：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">BST</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">insert</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">insertNode</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">insertNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">insertNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">insertNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">searchNode</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">searchNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">searchNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">searchNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">循环实现</span><span style="color:#DBD7CAEE;">：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">BST</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">insert</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">递归实现</span><span style="color:#393A34;">：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">BST</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">insert</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">insertNode</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">insertNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">insertNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">insertNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">search</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">searchNode</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">searchNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">searchNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">searchNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">循环实现</span><span style="color:#393A34;">：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">BST</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">insert</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">search</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div><h2 id="字符串搜索算法" tabindex="-1">字符串搜索算法 <a class="header-anchor" href="#字符串搜索算法" aria-label="Permalink to &quot;字符串搜索算法&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//KMP算法是一种高效的字符串搜索算法，在对文本串和模式串进行匹配时，通过利用前缀表来避免不必要的比较，从而实现快速匹配。</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">kmp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 构建前缀表</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prefix</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Array</span><span style="color:#666666;">(</span><span style="color:#BD976A;">m</span><span style="color:#666666;">).</span><span style="color:#80A665;">fill</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prefix</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">prefix</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 匹配文本串和模式串</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prefix</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//KMP算法是一种高效的字符串搜索算法，在对文本串和模式串进行匹配时，通过利用前缀表来避免不必要的比较，从而实现快速匹配。</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">kmp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 构建前缀表</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prefix</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Array</span><span style="color:#999999;">(</span><span style="color:#B07D48;">m</span><span style="color:#999999;">).</span><span style="color:#59873A;">fill</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prefix</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">prefix</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 匹配文本串和模式串</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prefix</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>在这个函数中，我们首先计算出模式串的前缀表，然后逐个字符地扫描文本串和模式串，利用前缀表来确定匹配的位置。</p><p>接下来，我们可以使用这个函数来测试一下：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hello world</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">world</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">kmp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 输出5</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hello world</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">world</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">kmp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 输出5</span></span></code></pre></div><p>在这个例子中，我们将文本串设置为“hello world”，将模式串设置为“world”，然后调用kmp函数来查找匹配位置。由于模式串出现在文本串的位置是5，所以kmp函数返回的结果也是5。</p><p>这里还可以尝试一些其他的测试用例，例如：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">abababaababacb</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ababacb</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">kmp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 输出7</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">abababaababacb</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ababacb</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">kmp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 输出7</span></span></code></pre></div><p>这个例子中，我们将文本串设置为“abababaababacb”，将模式串设置为“ababacb”，然后调用kmp函数来查找匹配位置。由于模式串出现在文本串的位置是7，所以kmp函数返回的结果也是7。</p><p>总之，KMP算法是一种高效的字符串搜索算法，通过利用前缀表来避免不必要的比较，能够快速地查找匹配位置。</p><h2 id="数字转中文" tabindex="-1">数字转中文 <a class="header-anchor" href="#数字转中文" aria-label="Permalink to &quot;数字转中文&quot;">​</a></h2><p><strong>方法一：</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">numberToChinese</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">(</span><span style="color:#E6CC77;">\-</span><span style="color:#CB7676;">|</span><span style="color:#E6CC77;">\+</span><span style="color:#666666;">)</span><span style="color:#CB7676;">?</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">*</span><span style="color:#666666;">(</span><span style="color:#E6CC77;">\.</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">*</span><span style="color:#666666;">)</span><span style="color:#CB7676;">?</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">不是一个合法的数字！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">digitMap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">plain</span><span style="color:#666666;">:[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">一</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">二</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">三</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">四</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">五</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">六</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">七</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">八</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">九</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">upper</span><span style="color:#666666;">:[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">壹</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">贰</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">叁</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">肆</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">伍</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">陆</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">柒</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">捌</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">玖</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unitMap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">plain</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">元</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">万</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">亿</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">十</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">百</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">千</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">upper</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">元</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">萬</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">億</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">拾</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">佰</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">仟</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ustr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">upper</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">plain</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">负</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unitMap</span><span style="color:#666666;">[</span><span style="color:#BD976A;">ustr</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">abs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">].</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currUnit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">].</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#BD976A;">digitMap</span><span style="color:#666666;">[</span><span style="color:#BD976A;">ustr</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">currUnit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">][</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currUnit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">currUnit</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">零</span><span style="color:#C99076;">.</span><span style="color:#666666;">)</span><span style="color:#CB7676;">*</span><span style="color:#C4704F;">零</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">).</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">][</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">億零</span><span style="color:#CB7676;">{0,3}</span><span style="color:#C4704F;">萬</span><span style="color:#C98A7D99;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">亿零</span><span style="color:#CB7676;">{0,3}</span><span style="color:#C4704F;">万</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lastres</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">head</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">零</span><span style="color:#C99076;">.</span><span style="color:#666666;">)</span><span style="color:#CB7676;">*</span><span style="color:#C4704F;">零元</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">元</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">零</span><span style="color:#C99076;">.</span><span style="color:#666666;">)</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">億</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">亿</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#C4704F;">零</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lastres</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">numberToChinese</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upper</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">(</span><span style="color:#BDA437;">\-</span><span style="color:#AB5959;">|</span><span style="color:#BDA437;">\+</span><span style="color:#999999;">)</span><span style="color:#AB5959;">?</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">*</span><span style="color:#999999;">(</span><span style="color:#BDA437;">\.</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">*</span><span style="color:#999999;">)</span><span style="color:#AB5959;">?</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">不是一个合法的数字！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">digitMap</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">plain</span><span style="color:#999999;">:[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">一</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">二</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">三</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">四</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">五</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">六</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">七</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">八</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">九</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">upper</span><span style="color:#999999;">:[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">壹</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">贰</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">叁</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">肆</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">伍</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">陆</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">柒</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">捌</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">玖</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unitMap</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">plain</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">元</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">万</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">亿</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">十</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">百</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">千</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">upper</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">元</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">萬</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">億</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">拾</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">佰</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">仟</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ustr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upper</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">upper</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">plain</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">负</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unitMap</span><span style="color:#999999;">[</span><span style="color:#B07D48;">ustr</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">abs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">].</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currUnit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">].</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B07D48;">digitMap</span><span style="color:#999999;">[</span><span style="color:#B07D48;">ustr</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">currUnit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">][</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currUnit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">currUnit</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">零</span><span style="color:#A65E2B;">.</span><span style="color:#999999;">)</span><span style="color:#AB5959;">*</span><span style="color:#AB5E3F;">零</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">).</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">][</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upper</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">億零</span><span style="color:#AB5959;">{0,3}</span><span style="color:#AB5E3F;">萬</span><span style="color:#B5695999;">/</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">亿零</span><span style="color:#AB5959;">{0,3}</span><span style="color:#AB5E3F;">万</span><span style="color:#B5695999;">/</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lastres</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">head</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">零</span><span style="color:#A65E2B;">.</span><span style="color:#999999;">)</span><span style="color:#AB5959;">*</span><span style="color:#AB5E3F;">零元</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">元</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">零</span><span style="color:#A65E2B;">.</span><span style="color:#999999;">)</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upper</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">億</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">亿</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#AB5E3F;">零</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lastres</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>方法二：</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">numberToChinese</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//数字超过999999999999则报错</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">().</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">12</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">数字过大，无法转换</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bunits</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">万</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">亿</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//把数字转换成字符串，四位一组，从后往前分割</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">numStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">reverse</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">{1,4}</span><span style="color:#666666;">)</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">,</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">reverse</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">,</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">numStr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">transform</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">carr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">一</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">二</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">三</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">四</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">五</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">六</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">七</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">八</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">九</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">units</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">十</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">百</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">千</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">digit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">char</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">carr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">digit</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">units</span><span style="color:#666666;">[</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">digit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//如果是0，且不是最后一位不是零，则加零，并且不加单位</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">[</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">char</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">char</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">[</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">part</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">numStr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">transform</span><span style="color:#666666;">(</span><span style="color:#BD976A;">part</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bunits</span><span style="color:#666666;">[</span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">cstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">cstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">startsWith</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">一十</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cstr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//大写中文</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bigChinese</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">map</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">={</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">一</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">壹</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">二</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">贰</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">三</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">叁</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">四</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">肆</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">五</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">伍</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">六</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">陆</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">七</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">柒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">八</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">捌</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">九</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">玖</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">十</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">拾</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">百</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">佰</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">千</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">仟</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">万</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">萬</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">亿</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">億</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">numberToChinese</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">s</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">item</span><span style="color:#666666;">]).</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bigChinese</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1000100001</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//拾億零壹拾萬零壹</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ n ]-66</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">numberToChinese</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//数字超过999999999999则报错</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">().</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">12</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">数字过大，无法转换</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bunits</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">万</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">亿</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//把数字转换成字符串，四位一组，从后往前分割</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">numStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">reverse</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">{1,4}</span><span style="color:#999999;">)</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">,</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">reverse</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">,</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">numStr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">transform</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">carr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">一</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">二</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">三</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">四</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">五</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">六</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">七</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">八</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">九</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">units</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">十</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">百</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">千</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">digit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">char</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">carr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">digit</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">units</span><span style="color:#999999;">[</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">digit</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//如果是0，且不是最后一位不是零，则加零，并且不加单位</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">[</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">char</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">char</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">[</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">part</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">numStr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">transform</span><span style="color:#999999;">(</span><span style="color:#B07D48;">part</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bunits</span><span style="color:#999999;">[</span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">cstr</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">cstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">startsWith</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">一十</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cstr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//大写中文</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bigChinese</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">map</span><span style="color:#393A34;"> </span><span style="color:#999999;">={</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">一</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">壹</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">二</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">贰</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">三</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">叁</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">四</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">肆</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">五</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">伍</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">六</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">陆</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">七</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">柒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">八</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">捌</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">九</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">玖</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">十</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">拾</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">百</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">佰</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">千</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">仟</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">万</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">萬</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">亿</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">億</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">s</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">numberToChinese</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">s</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">item</span><span style="color:#999999;">]).</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bigChinese</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1000100001</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//拾億零壹拾萬零壹</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ n ]-66</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#999999;">)</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/常见算法.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>基础复习二</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>手写Promise</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.html" "b/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.html"
new file mode 100644
index 00000000..c031ed45
--- /dev/null
+++ "b/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.html"
@@ -0,0 +1,1179 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_手写Promise.md.fbddbbf5.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E6%89%8B%E5%86%99Promise" data-v-6b87e69f><div><h2 id="一、声名promise并绑定this" tabindex="-1">一、声名Promise并绑定this <a class="header-anchor" href="#一、声名promise并绑定this" aria-label="Permalink to &quot;一、声名Promise并绑定this&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PENDING</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pending</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">FUFILLED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fulfilled</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">REJECTED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">rejected</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">executor</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// 绑定this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">executor</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reject</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 3.成功状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FUFILLED</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 4.失败状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reason</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PENDING</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pending</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">FUFILLED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fulfilled</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">REJECTED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">rejected</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">executor</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//初始态</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// 绑定this</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">executor</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reject</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 3.成功状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FUFILLED</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 4.失败状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reason</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>问题一：能多次修改状态</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;!</span><span style="color:#4D9375;">DOCTYPE</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">html</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">head</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">title</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">My-Promise</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">title</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">    &lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./Promise.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">head</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">body</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">    &lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">大功告成！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">一败涂地！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">body</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">html</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;!</span><span style="color:#1E754F;">DOCTYPE</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">html</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">head</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">title</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">My-Promise</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">title</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">    &lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./Promise.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">head</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">body</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">    &lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">大功告成！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">一败涂地！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">body</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">html</span><span style="color:#999999;">&gt;</span></span></code></pre></div><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/codepic/20210708162731.png"><h2 id="二、状态保护与执行者异步捕获" tabindex="-1">二、状态保护与执行者异步捕获 <a class="header-anchor" href="#二、状态保护与执行者异步捕获" aria-label="Permalink to &quot;二、状态保护与执行者异步捕获&quot;">​</a></h2><blockquote><p>改变状态前先判断，让初始状态只能修改一次</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PENDING</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pending</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">FUFILLED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fulfilled</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">REJECTED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">rejected</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">executor</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// 绑定this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">executor</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reject</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 3.成功状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//判断是不是初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FUFILLED</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 4.失败状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//判断是不是初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reason</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PENDING</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pending</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">FUFILLED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fulfilled</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">REJECTED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">rejected</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">executor</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//初始态</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// 绑定this</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">executor</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reject</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 3.成功状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//判断是不是初始态</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FUFILLED</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 4.失败状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//判断是不是初始态</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reason</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="三、then方法构建" tabindex="-1">三、then方法构建 <a class="header-anchor" href="#三、then方法构建" aria-label="Permalink to &quot;三、then方法构建&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FUFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FUFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="四、实现then异步" tabindex="-1">四、实现then异步 <a class="header-anchor" href="#四、实现then异步" aria-label="Permalink to &quot;四、实现then异步&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FUFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FUFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="五、解决同步代码需要等待执行问题" tabindex="-1">五、解决同步代码需要等待执行问题 <a class="header-anchor" href="#五、解决同步代码需要等待执行问题" aria-label="Permalink to &quot;五、解决同步代码需要等待执行问题&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// resolve(&#39;大功告成！&#39;)S</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">一败涂地！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">反败为胜！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">p1</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">((</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">同步代码</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// resolve(&#39;大功告成！&#39;)S</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">一败涂地！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">反败为胜！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">p1</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">((</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">同步代码</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span></code></pre></div><blockquote><p>解决前输出： 同步代码 一败涂地！ 反败为胜！</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">callback</span><span style="color:#666666;">.</span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">callback</span><span style="color:#666666;">.</span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">callback</span><span style="color:#999999;">.</span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">callback</span><span style="color:#999999;">.</span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>解决后输出： 同步代码 反败为胜！ 一败涂地！</p></blockquote><h2 id="六、then的链式操作" tabindex="-1">六、then的链式操作 <a class="header-anchor" href="#六、then的链式操作" aria-label="Permalink to &quot;六、then的链式操作&quot;">​</a></h2><blockquote><p><strong>注意点：</strong></p><ol><li>then返回的时Promise，Promise需要改变</li><li>之前的Promise状态并不会影响之后的Promise状态</li></ol></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">大功告成！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// reject(&quot;一败涂地！&quot;);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">状态绑定成功！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">马到功成！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">优胜劣败！</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">同步代码</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">大功告成！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// reject(&quot;一败涂地！&quot;);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">状态绑定成功！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">马到功成！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">优胜劣败！</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">同步代码</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//then的穿透处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">         </span><span style="color:#758575DD;">//then的穿透处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//解决异常</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//解决异常</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//then的穿透处理</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">         </span><span style="color:#A0ADA0;">//then的穿透处理</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//解决异常</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//解决异常</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>执行结果：</strong></p><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/codepic/20210708174000.png"><h2 id="七、返回值的判断与处理" tabindex="-1">七、返回值的判断与处理 <a class="header-anchor" href="#七、返回值的判断与处理" aria-label="Permalink to &quot;七、返回值的判断与处理&quot;">​</a></h2><blockquote><p>判断并分别处理返回值为Promise、普通值的情况</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">// 判断并处理返回值 </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">// 判断并处理返回值 </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">// 判断并处理返回值 </span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">// 判断并处理返回值 </span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="八、代码优化及复用" tabindex="-1">八、代码优化及复用 <a class="header-anchor" href="#八、代码优化及复用" aria-label="Permalink to &quot;八、代码优化及复用&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// try {</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     let result = onFulfilled(value);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     resolve(result);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     reject(error);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// try {</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     let result = onRejected(value);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     resolve(result);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     //解决异常</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     reject(error);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// try {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     let result = onFulfilled(this.value);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     // resolve(result)</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     if (result instanceof Promise) {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//         result.then(resolve, reject);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     } else {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//         resolve(result);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     }</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     reject(error);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// try {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     let result = onRejected(this.value);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     if (result instanceof Promise) {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//         result.then(resolve, reject);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     } else {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//         resolve(result);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     }</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     reject(error);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//抽取方法</span></span>
+<span class="line"><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// try {</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     let result = onFulfilled(value);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     resolve(result);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     reject(error);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// try {</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     let result = onRejected(value);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     resolve(result);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     //解决异常</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     reject(error);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// try {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     let result = onFulfilled(this.value);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     // resolve(result)</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     if (result instanceof Promise) {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//         result.then(resolve, reject);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     } else {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//         resolve(result);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     }</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     reject(error);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// try {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     let result = onRejected(this.value);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     if (result instanceof Promise) {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//         result.then(resolve, reject);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     } else {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//         resolve(result);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     }</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     reject(error);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//抽取方法</span></span>
+<span class="line"><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="九、返回类型约束" tabindex="-1">九、返回类型约束 <a class="header-anchor" href="#九、返回类型约束" aria-label="Permalink to &quot;九、返回类型约束&quot;">​</a></h2><blockquote><p>当前Promise不能返回自己</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//原生的会报错:TypeError</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//原生的会报错:TypeError</span></span></code></pre></div></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TypeError</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Chaining cycle detected for promise</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TypeError</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Chaining cycle detected for promise</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="十、实现resolve和reject" tabindex="-1">十、实现resolve和reject <a class="header-anchor" href="#十、实现resolve和reject" aria-label="Permalink to &quot;十、实现resolve和reject&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">_</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">_</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="十一、promise-all-实现" tabindex="-1">十一、Promise.all()实现 <a class="header-anchor" href="#十一、promise-all-实现" aria-label="Permalink to &quot;十一、Promise.all()实现&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">all</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolves</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//判断数组长度，来看是否全部成功</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">all</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolves</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//判断数组长度，来看是否全部成功</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>测试</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">失败</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#758575DD;">//所有成功才会执行成功的回调函数</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">all</span><span style="color:#666666;">([</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#666666;">]).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">resolve:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reject:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">失败</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#A0ADA0;">//所有成功才会执行成功的回调函数</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">all</span><span style="color:#999999;">([</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#999999;">]).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">resolve:</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reject:</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">);</span></span></code></pre></div><h2 id="十二、实现promise-race" tabindex="-1">十二、实现Promise.race() <a class="header-anchor" href="#十二、实现promise-race" aria-label="Permalink to &quot;十二、实现Promise.race()&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">race</span><span style="color:#666666;">([</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p3</span><span style="color:#666666;">]);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">race</span><span style="color:#999999;">([</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p3</span><span style="color:#999999;">]);</span></span></code></pre></div><blockquote><p>只要<code>p1</code>、<code>p2</code>、<code>p3</code>之中有一个实例率先改变状态，<code>p</code>的状态就跟着改变；率先改变的 Promise 实例的返回值，就传递给<code>p</code>的回调函数。 <strong>(谁快用谁)</strong></p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">race</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">race</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><p><strong>测试</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setInterval</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">成功1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setInterval</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">成功2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">race</span><span style="color:#666666;">([</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#666666;">]).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setInterval</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">成功1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1000</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setInterval</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">成功2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">race</span><span style="color:#999999;">([</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#999999;">]).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">);</span></span></code></pre></div><h2 id="十三、完整代码" tabindex="-1">十三、完整代码 <a class="header-anchor" href="#十三、完整代码" aria-label="Permalink to &quot;十三、完整代码&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PENDING</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pending</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">FUFILLED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fulfilled</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">REJECTED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">rejected</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">executor</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 绑定this    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">executor</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reject</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//3.resolve改变状态并执行回调函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//遍历回调函数数组，传值并执行onFulfilled函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">callback</span><span style="color:#666666;">.</span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//3. reject改变状态并执行回调函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">             </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                 </span><span style="color:#758575DD;">//遍历回调函数数组，传值并执行onRejected函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">callback</span><span style="color:#666666;">.</span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          	  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//then方法</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//判断参数是否为函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//初始态把回调函数存入数组</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//成功</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//失败</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//解决链式调用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//不能返回自身promise</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TypeError</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Chaining cycle detected for promise</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">_</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">all</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolves</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//遍历每一个promise并执行</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//保存</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">race</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PENDING</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pending</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">FUFILLED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fulfilled</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">REJECTED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">rejected</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">executor</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//初始态</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 绑定this    </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">executor</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reject</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//3.resolve改变状态并执行回调函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//遍历回调函数数组，传值并执行onFulfilled函数</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">callback</span><span style="color:#999999;">.</span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//3. reject改变状态并执行回调函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">             </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                 </span><span style="color:#A0ADA0;">//遍历回调函数数组，传值并执行onRejected函数</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">callback</span><span style="color:#999999;">.</span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          	  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//then方法</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//判断参数是否为函数</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//初始态把回调函数存入数组</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//成功</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//失败</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//解决链式调用</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//不能返回自身promise</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TypeError</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Chaining cycle detected for promise</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">_</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">all</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolves</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//遍历每一个promise并执行</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//保存</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">race</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/手写Promise.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>常见算法</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>数据去重</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.html" "b/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.html"
new file mode 100644
index 00000000..83cccb70
--- /dev/null
+++ "b/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.html"
@@ -0,0 +1,559 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_数据去重.md.f1eaba48.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-6b87e69f><div><blockquote><p>去重的核心：要根据实际业务怎么定义&#39;重&#39;</p></blockquote><h2 id="基本数据类型" tabindex="-1">基本数据类型 <a class="header-anchor" href="#基本数据类型" aria-label="Permalink to &quot;基本数据类型&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#758575DD;">//用Set去重</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)];</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 3]</span></span>
+<span class="line"><span style="color:#758575DD;">//用filter去重</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 相同的元素只保留一个</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">//indexOf</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//或 !newArr.includes(arr[i])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//==&gt; reduce与 includes</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">item</span><span style="color:#666666;">],[])</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//双重循环遍历数组去重</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">isDuplicate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">isDuplicate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">break</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">isDuplicate</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">uniqueArr</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 3]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#A0ADA0;">//用Set去重</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)];</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 3]</span></span>
+<span class="line"><span style="color:#A0ADA0;">//用filter去重</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 相同的元素只保留一个</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">//indexOf</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//或 !newArr.includes(arr[i])</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//==&gt; reduce与 includes</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">item</span><span style="color:#999999;">],[])</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//双重循环遍历数组去重</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">isDuplicate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">isDuplicate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">break</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">isDuplicate</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">uniqueArr</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 3]</span></span></code></pre></div><p>如果要去重一个包含不同数据类型的数组，需要添加一些额外的检查。</p><p>Date类型转换成Unix时间戳，RegExp类型转换成字符串。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">a</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">b</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">a</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">abc</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">abc</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">()];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isObject</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Object</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">;</span><span style="color:#758575DD;">//判断是否为对象</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#80A665;">isObject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//不是</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Date</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">getTime</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">RegExp</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}))];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [&#39;a&#39;, &#39;b&#39;, 1, &#39;/abc/&#39;, 1678519417983]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">a</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">b</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">a</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">abc</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">abc</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(),</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">()];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isObject</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Object</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">//判断是否为对象</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#59873A;">isObject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//不是</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Date</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">getTime</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">RegExp</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}))];</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [&#39;a&#39;, &#39;b&#39;, 1, &#39;/abc/&#39;, 1678519417983]</span></span></code></pre></div><h2 id="对象数组去重" tabindex="-1">对象数组去重 <a class="header-anchor" href="#对象数组去重" aria-label="Permalink to &quot;对象数组去重&quot;">​</a></h2><h3 id="对象相同比较" tabindex="-1">对象相同比较 <a class="header-anchor" href="#对象相同比较" aria-label="Permalink to &quot;对象相同比较&quot;">​</a></h3><p><strong>基本思路</strong>：</p><ol><li>首先判断两个值的类型是否相同，如果不同，则返回 <code>false</code>；</li><li>处理特殊情况 <code>null、undefined、Date、function</code>；</li><li>处理数组类型，对比项的数量，再递归对比每个项是否相等；</li><li>处理朴素对象，对比键的数量，相等则再递归对比值是否相等。</li></ol><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">equalType</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">val1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">val2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Object</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toString</span><span style="color:#666666;">.</span><span style="color:#80A665;">call</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val1</span><span style="color:#666666;">)</span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Object</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toString</span><span style="color:#666666;">.</span><span style="color:#80A665;">call</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断类型是否一致</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#80A665;">equalType</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断 null 和 undefined:只要有一个为 null 或 undefined，则直接比较值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断基本类型是否相等</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">number</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">string</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">boolean</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Date</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Date</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">.</span><span style="color:#80A665;">getTime</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">.</span><span style="color:#80A665;">getTime</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断数组是否相等</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">.</span><span style="color:#80A665;">every</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">,</span><span style="color:#BD976A;">index</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">index</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// for (let i = 0; i &lt; obj1.length; i++) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   if (!isEqual(obj1[i], obj2[i])) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     return false;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   }</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// return true;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//比较对象是否相等</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//Object.keys: 返回对象自身的所有可枚举的属性的键名,不包含 Symbol 类型键名</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//Reflect.ownKeys(): 返回所有类型的键名，包括常规键名和 Symbol 键名。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">keys</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">keys</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">keys1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">key</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">equalType</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">val1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">val2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#998418;">Object</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toString</span><span style="color:#999999;">.</span><span style="color:#59873A;">call</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val1</span><span style="color:#999999;">)</span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Object</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toString</span><span style="color:#999999;">.</span><span style="color:#59873A;">call</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断类型是否一致</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#59873A;">equalType</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断 null 和 undefined:只要有一个为 null 或 undefined，则直接比较值</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断基本类型是否相等</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">number</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">string</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">boolean</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Date</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Date</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">.</span><span style="color:#59873A;">getTime</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">.</span><span style="color:#59873A;">getTime</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断数组是否相等</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">.</span><span style="color:#59873A;">every</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">,</span><span style="color:#B07D48;">index</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">index</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// for (let i = 0; i &lt; obj1.length; i++) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   if (!isEqual(obj1[i], obj2[i])) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     return false;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   }</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// return true;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//比较对象是否相等</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//Object.keys: 返回对象自身的所有可枚举的属性的键名,不包含 Symbol 类型键名</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//Reflect.ownKeys(): 返回所有类型的键名，包括常规键名和 Symbol 键名。</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">keys</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">keys</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">keys1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">key</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary><strong>测试示例</strong></summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 示例</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dance</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//date:new Date(&#39;2022-02-13&#39;),</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// func:function(){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  console.log(1)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// true</span></span>
+<span class="line"><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj3</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// false</span></span>
+<span class="line"><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#CB7676;">undefined</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#758575DD;">// false</span></span>
+<span class="line"><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 示例</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dance</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//date:new Date(&#39;2022-02-13&#39;),</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// func:function(){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  console.log(1)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// true</span></span>
+<span class="line"><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj3</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// false</span></span>
+<span class="line"><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#AB5959;">undefined</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">// false</span></span>
+<span class="line"><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span></span></code></pre></div></details><h3 id="对象数组去重-1" tabindex="-1">对象数组去重 <a class="header-anchor" href="#对象数组去重-1" aria-label="Permalink to &quot;对象数组去重&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//深拷贝</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">object</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Date</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">RegExp</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">RegExp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">key</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#80A665;">hasOwnProperty</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#DBD7CAEE;">(arr){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">])){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">splice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//深拷贝</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">object</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Date</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">RegExp</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">RegExp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">key</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#59873A;">hasOwnProperty</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#393A34;">(arr){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">])){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">splice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><details class="details custom-block"><summary>测试数据</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">objArr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#B8A965;">b</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#B8A965;">b</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">b</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#B8A965;">a</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#B8A965;">b</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dance</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//date:new Date(&#39;2022-02-13&#39;),</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// func:function(){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  console.log(1)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dance</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dance</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-11</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#758575DD;">//uniqueArr(objArr1)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">objArr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">a</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#998418;">b</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">a</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#998418;">b</span><span style="color:#999999;">:</span><span style="color:#2F798A;">3</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">b</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#998418;">a</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">a</span><span style="color:#999999;">:</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#998418;">b</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dance</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//date:new Date(&#39;2022-02-13&#39;),</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// func:function(){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  console.log(1)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dance</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dance</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-11</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#A0ADA0;">//uniqueArr(objArr1)</span></span></code></pre></div></details></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/数据去重.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>手写Promise</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>数组求集合</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.html" "b/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.html"
new file mode 100644
index 00000000..10fd6f9d
--- /dev/null
+++ "b/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.html"
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>JS常用的求交集、并集、差集的方法 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_数组求集合.md.9e71e873.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-6b87e69f><div><h1 id="js常用的求交集、并集、差集的方法" tabindex="-1">JS常用的求交集、并集、差集的方法 <a class="header-anchor" href="#js常用的求交集、并集、差集的方法" aria-label="Permalink to &quot;JS常用的求交集、并集、差集的方法&quot;">​</a></h1><h2 id="普通数组" tabindex="-1">普通数组 <a class="header-anchor" href="#普通数组" aria-label="Permalink to &quot;普通数组&quot;">​</a></h2><blockquote><p>示例数组</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">];</span></span></code></pre></div><h3 id="一、并集-a∪b" tabindex="-1">一、并集(A∪B) <a class="header-anchor" href="#一、并集-a∪b" aria-label="Permalink to &quot;一、并集(A∪B)&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方法一：</span></span>
+<span class="line"><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">// 虽然 NaN 和 NaN 不相等，但是在 Set 集合里面只会存在一个</span></span>
+<span class="line"><span style="color:#758575DD;">// undefined 和 Infinity 在 Set 集合里面也只会存在一个</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">NaN</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">NaN</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">([...</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">])]</span><span style="color:#758575DD;">// [1, 2, 3, NaN, 4, 5]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方法二：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">from</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//先b筛选a中没有的，再连接数组</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)))</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方法一：</span></span>
+<span class="line"><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 虽然 NaN 和 NaN 不相等，但是在 Set 集合里面只会存在一个</span></span>
+<span class="line"><span style="color:#A0ADA0;">// undefined 和 Infinity 在 Set 集合里面也只会存在一个</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">NaN</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">NaN</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">([...</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">])]</span><span style="color:#A0ADA0;">// [1, 2, 3, NaN, 4, 5]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">from</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//先b筛选a中没有的，再连接数组</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)))</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span></span></code></pre></div><h3 id="二、交集-a∩b" tabindex="-1">二、交集（<em>A</em>∩B） <a class="header-anchor" href="#二、交集-a∩b" aria-label="Permalink to &quot;二、交集（*A*∩B）&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">intersection</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)))];</span><span style="color:#758575DD;">//[2, NaN]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">intersection</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)))];</span><span style="color:#A0ADA0;">//[2, NaN]</span></span></code></pre></div><h3 id="三、差集-a-b" tabindex="-1">三、差集(A-B) <a class="header-anchor" href="#三、差集-a-b" aria-label="Permalink to &quot;三、差集(A-B)&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-diff vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 差集（a 相对于 b 的差集） 属于a不属于b的元素</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">difference</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)))];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">//返回a与b数组区别的集合（交集取反） </span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">difference</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">b</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">difference</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">)));</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">difference</span><span style="color:#666666;">)</span><span style="color:#758575DD;">// [1,3,4,5]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方法二：先转为 Set</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">aSet</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bSet</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//  </span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">difference</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">from</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">aSet</span><span style="color:#666666;">.</span><span style="color:#80A665;">has</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">bSet</span><span style="color:#666666;">.</span><span style="color:#80A665;">has</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">))));</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">difference</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1,3,4,5]</span></span></code></pre><pre class="shiki vitesse-light has-diff vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 差集（a 相对于 b 的差集） 属于a不属于b的元素</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">difference</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)))];</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">//返回a与b数组区别的集合（交集取反） </span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">difference</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">b</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">difference</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">)));</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">difference</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">// [1,3,4,5]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二：先转为 Set</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">aSet</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bSet</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//  </span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">difference</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">from</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">aSet</span><span style="color:#999999;">.</span><span style="color:#59873A;">has</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">bSet</span><span style="color:#999999;">.</span><span style="color:#59873A;">has</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">))));</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">difference</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1,3,4,5]</span></span></code></pre></div><h2 id="对象数组" tabindex="-1">对象数组 <a class="header-anchor" href="#对象数组" aria-label="Permalink to &quot;对象数组&quot;">​</a></h2><blockquote><p>示例数组</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">=[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">01</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product01</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">02</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product02</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">03</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product03</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">04</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product04</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">05</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product05</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">=[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">03</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product03</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">06</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product06</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">07</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product07</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">08</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product08</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">=[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">01</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product01</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">02</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product02</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">03</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product03</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">04</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product04</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">05</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product05</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">=[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">03</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product03</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">06</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product06</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">07</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product07</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">08</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product08</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">];</span></span></code></pre></div><h3 id="一、并集-a∪b-1" tabindex="-1">一、并集（A∪B） <a class="header-anchor" href="#一、并集-a∪b-1" aria-label="Permalink to &quot;一、并集（A∪B）&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 用额外对象记录当前项 id 相同的是否收集，此 id 未收集，则进行收集</span></span>
+<span class="line"><span style="color:#758575DD;">//写法一：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">obj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},[])</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//写法二：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">findIndex</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">].</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span><span style="color:#CB7676;">===-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//简化</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//判断目标在数组中相同的 id 是否存在</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isExist</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">target</span><span style="color:#666666;">,</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">findIndex</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">target</span><span style="color:#666666;">[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">//合并数组并遍历，判断新数组不存在当前项，则收集</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">).</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isExist</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">id</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">],[])</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 用额外对象记录当前项 id 相同的是否收集，此 id 未收集，则进行收集</span></span>
+<span class="line"><span style="color:#A0ADA0;">//写法一：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{};</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">obj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},[])</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//写法二：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">findIndex</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">].</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span><span style="color:#AB5959;">===-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//简化</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//判断目标在数组中相同的 id 是否存在</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isExist</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">target</span><span style="color:#999999;">,</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">findIndex</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">target</span><span style="color:#999999;">[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">//合并数组并遍历，判断新数组不存在当前项，则收集</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">).</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isExist</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">id</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">],[])</span></span></code></pre></div><h3 id="二、交集-a∩b-1" tabindex="-1">二、交集（<em>A</em>∩B） <a class="header-anchor" href="#二、交集-a∩b-1" aria-label="Permalink to &quot;二、交集（*A*∩B）&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方法一：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">intersection</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">aids</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">aids</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//方法二：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">intersection</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">findIndex</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,[])</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方法一：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">intersection</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">aids</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">aids</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">intersection</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">findIndex</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,[])</span></span></code></pre></div><h3 id="三、差集-a-b-1" tabindex="-1">三、差集(A-B) <a class="header-anchor" href="#三、差集-a-b-1" aria-label="Permalink to &quot;三、差集(A-B)&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-diff vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//找出arr1数组中，arr2数组没有的对象</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">diff</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">every</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">diff</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">some</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light has-diff vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//找出arr1数组中，arr2数组没有的对象</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">diff</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">every</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">diff</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">some</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">))</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/数组求集合.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>数据去重</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>文件系统</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.html" "b/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.html"
new file mode 100644
index 00000000..9fe7e0dd
--- /dev/null
+++ "b/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.html"
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_文件系统.md.1488f287.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-6b87e69f><div><h2 id="blob与-file" tabindex="-1">Blob与 File <a class="header-anchor" href="#blob与-file" aria-label="Permalink to &quot;Blob与 File&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blob</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Blob</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1,2,3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">File</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1,2,3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text/plain</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blob</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Blob</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1,2,3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">File</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1,2,3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text/plain</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span></code></pre></div><h2 id="arraybuffer" tabindex="-1">ArrayBuffer <a class="header-anchor" href="#arraybuffer" aria-label="Permalink to &quot;ArrayBuffer&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blob</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Blob</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1,2,3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">File</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1,2,3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text/plain</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//ArrayBuffer</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blobArrayBuffer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blob</span><span style="color:#666666;">.</span><span style="color:#80A665;">arrayBuffer</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileArrayBuffer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">arrayBuffer</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ blobArrayBuffer ]-6</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blobArrayBuffer</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ fileArrayBuffer ]-8</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileArrayBuffer</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blob</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Blob</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1,2,3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">File</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1,2,3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text/plain</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//ArrayBuffer</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blobArrayBuffer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blob</span><span style="color:#999999;">.</span><span style="color:#59873A;">arrayBuffer</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileArrayBuffer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">arrayBuffer</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ blobArrayBuffer ]-6</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blobArrayBuffer</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ fileArrayBuffer ]-8</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileArrayBuffer</span><span style="color:#999999;">)</span></span></code></pre></div><div class="demo wide" data-v-9caf4c6f><p class="demo-source-link" data-v-9caf4c6f><a href="https://github.com/fxzer/zerdocs/blob/master/docs/FrontEnd/JavaScript/demo/demo1.vue" target="_blank" data-v-9caf4c6f>源码地址</a></p><!----><!----></div><h2 id="filereader" tabindex="-1">FileReader <a class="header-anchor" href="#filereader" aria-label="Permalink to &quot;FileReader&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileReader</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">FileReader</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">fileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsArrayBuffer</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">fileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ e ]-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ e.target ]-14</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ e.target.result ]-15</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileArrayBuffer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// false</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileReader</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">FileReader</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">fileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsArrayBuffer</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">fileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ e ]-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ e.target ]-14</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ e.target.result ]-15</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#393A34;">  </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileArrayBuffer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// false</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-02-11-18-18-03.png" alt="2023-02-11-18-18-03"></p><h2 id="dataview" tabindex="-1">DataView <a class="header-anchor" href="#dataview" aria-label="Permalink to &quot;DataView&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dataView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">DataView</span><span style="color:#666666;">(</span><span style="color:#BD976A;">blobArrayBuffer</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ dataView ]-19</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dataView</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ dataView.getUint8(0) ]-20</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dataView</span><span style="color:#666666;">.</span><span style="color:#80A665;">getUint8</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#BD976A;">dataView</span><span style="color:#666666;">.</span><span style="color:#80A665;">setUint8</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ dataView.getUint8(0) ]-20</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dataView</span><span style="color:#666666;">.</span><span style="color:#80A665;">getUint8</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dataView</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">DataView</span><span style="color:#999999;">(</span><span style="color:#B07D48;">blobArrayBuffer</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ dataView ]-19</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dataView</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ dataView.getUint8(0) ]-20</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dataView</span><span style="color:#999999;">.</span><span style="color:#59873A;">getUint8</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#B07D48;">dataView</span><span style="color:#999999;">.</span><span style="color:#59873A;">setUint8</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ dataView.getUint8(0) ]-20</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dataView</span><span style="color:#999999;">.</span><span style="color:#59873A;">getUint8</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">))</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-02-11-18-25-32.png" alt="2023-02-11-18-25-32"></p><h2 id="filepicker" tabindex="-1">FilePicker <a class="header-anchor" href="#filepicker" aria-label="Permalink to &quot;FilePicker&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">openFilePicker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">: </span><span style="color:#5DA994;">any</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Open File</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">accept</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">image/*</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.png</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.jpg</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.jpeg</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">fileHandle</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">any</span><span style="color:#666666;">).</span><span style="color:#80A665;">showOpenFilePicker</span><span style="color:#666666;">(</span><span style="color:#BD976A;">option</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileHandle</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFile</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileReader</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">FileReader</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsArrayBuffer</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ e ]-11</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">openFilePicker</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Open File</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">accept</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">image/*</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.png</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.jpg</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.jpeg</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">fileHandle</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">as</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">).</span><span style="color:#59873A;">showOpenFilePicker</span><span style="color:#999999;">(</span><span style="color:#B07D48;">option</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileHandle</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFile</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileReader</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">FileReader</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsArrayBuffer</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ e ]-11</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="文件操作" tabindex="-1">文件操作 <a class="header-anchor" href="#文件操作" aria-label="Permalink to &quot;文件操作&quot;">​</a></h2><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">textarea</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">ref</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Hello World</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">fh</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">ref</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//创建文件</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">openCreate</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const  </span><span style="color:#BD976A;">fileHandle</span><span style="color:#CB7676;">  </span><span style="color:#666666;">=</span><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;">  </span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">any</span><span style="color:#666666;">).</span><span style="color:#80A665;">showSaveFilePicker</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">fileSteam</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileHandle</span><span style="color:#666666;">.</span><span style="color:#80A665;">createWritable</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileSteam</span><span style="color:#666666;">.</span><span style="color:#80A665;">write</span><span style="color:#666666;">(</span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileSteam</span><span style="color:#666666;">.</span><span style="color:#80A665;">close</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//打开文件</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">openShow</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#666666;">[</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileHandle</span><span style="color:#CB7676;"> </span><span style="color:#666666;">]</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;">  </span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">any</span><span style="color:#666666;">).</span><span style="color:#80A665;">showOpenFilePicker</span><span style="color:#666666;">(</span><span style="color:#BD976A;">option</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">fh</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileHandle</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">file</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;">  </span><span style="color:#BD976A;">fileHandle</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFile</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">text</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//保存文件</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">openSave</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">fh</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">fileSteam</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fh</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">createWritable</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileSteam</span><span style="color:#666666;">.</span><span style="color:#80A665;">write</span><span style="color:#666666;">(</span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileSteam</span><span style="color:#666666;">.</span><span style="color:#80A665;">close</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//保存为文件</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">openSaveAs</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#80A665;">openCreate</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">textarea</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">ref</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Hello World</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">fh</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">ref</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//创建文件</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">openCreate</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const  </span><span style="color:#B07D48;">fileHandle</span><span style="color:#AB5959;">  </span><span style="color:#999999;">=</span><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;">  </span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">).</span><span style="color:#59873A;">showSaveFilePicker</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">fileSteam</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileHandle</span><span style="color:#999999;">.</span><span style="color:#59873A;">createWritable</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileSteam</span><span style="color:#999999;">.</span><span style="color:#59873A;">write</span><span style="color:#999999;">(</span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileSteam</span><span style="color:#999999;">.</span><span style="color:#59873A;">close</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//打开文件</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">openShow</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#999999;">[</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileHandle</span><span style="color:#AB5959;"> </span><span style="color:#999999;">]</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;">  </span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">).</span><span style="color:#59873A;">showOpenFilePicker</span><span style="color:#999999;">(</span><span style="color:#B07D48;">option</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">fh</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileHandle</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">file</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;">  </span><span style="color:#B07D48;">fileHandle</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFile</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">text</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//保存文件</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">openSave</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">fh</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">fileSteam</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fh</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">createWritable</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileSteam</span><span style="color:#999999;">.</span><span style="color:#59873A;">write</span><span style="color:#999999;">(</span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileSteam</span><span style="color:#999999;">.</span><span style="color:#59873A;">close</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//保存为文件</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">openSaveAs</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#59873A;">openCreate</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>filepicker</strong></p><div class="demo wide" data-v-9caf4c6f><p class="demo-source-link" data-v-9caf4c6f><a href="https://github.com/fxzer/zerdocs/blob/master/docs/FrontEnd/JavaScript/demo/FilePicker.vue" target="_blank" data-v-9caf4c6f>源码地址</a></p><!----><!----></div><h2 id="url" tabindex="-1">URL <a class="header-anchor" href="#url" aria-label="Permalink to &quot;URL&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//Blob URL</span></span>
+<span class="line"><span style="color:#BD976A;">URL</span><span style="color:#666666;">.</span><span style="color:#80A665;">createObjectURL</span><span style="color:#666666;">(</span><span style="color:#BD976A;">blob</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//Data  URL</span></span>
+<span class="line"><span style="color:#BD976A;">FileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsDataURL</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#BD976A;">canvas</span><span style="color:#666666;">.</span><span style="color:#80A665;">toDataURL</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//Blob URL</span></span>
+<span class="line"><span style="color:#B07D48;">URL</span><span style="color:#999999;">.</span><span style="color:#59873A;">createObjectURL</span><span style="color:#999999;">(</span><span style="color:#B07D48;">blob</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//Data  URL</span></span>
+<span class="line"><span style="color:#B07D48;">FileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsDataURL</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#B07D48;">canvas</span><span style="color:#999999;">.</span><span style="color:#59873A;">toDataURL</span><span style="color:#999999;">()</span></span></code></pre></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#80A665;">href</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">url</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">a</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#80A665;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">url</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">iframe</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#80A665;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">url</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">iframe</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#59873A;">href</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">url</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">a</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#59873A;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">url</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">iframe</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#59873A;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">url</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">iframe</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">TYPE</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">image</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">url</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">ref</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">onFetch</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">(</span><span style="color:#BD976A;">type</span><span style="color:#666666;">: </span><span style="color:#5DA994;">TYPE</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">response</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//BLOB URL</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// const data = await response.blob()</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// url.value = URL.createObjectURL(data)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//Data URL</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">fr</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">FileReader</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">fr</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">url</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">string</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">fr</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsDataURL</span><span style="color:#666666;">(</span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">response</span><span style="color:#666666;">.</span><span style="color:#80A665;">blob</span><span style="color:#666666;">())</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">TYPE</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">image</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">url</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">ref</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">onFetch</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">(</span><span style="color:#B07D48;">type</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">TYPE</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">response</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//BLOB URL</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// const data = await response.blob()</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// url.value = URL.createObjectURL(data)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//Data URL</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">fr</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">FileReader</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">fr</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">url</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">fr</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsDataURL</span><span style="color:#999999;">(</span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">response</span><span style="color:#999999;">.</span><span style="color:#59873A;">blob</span><span style="color:#999999;">())</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="demo wide" data-v-9caf4c6f><p class="demo-source-link" data-v-9caf4c6f><a href="https://github.com/fxzer/zerdocs/blob/master/docs/FrontEnd/JavaScript/demo/DemoUrl.vue" target="_blank" data-v-9caf4c6f>源码地址</a></p><!----><!----></div><h2 id="参考资料" tabindex="-1">参考资料 <a class="header-anchor" href="#参考资料" aria-label="Permalink to &quot;参考资料&quot;">​</a></h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob" target="_blank" rel="noreferrer">MDN Blob API 参考</a><br><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/File" target="_blank" rel="noreferrer">MDN File API 参考</a><br><a href="https://zhuanlan.zhihu.com/p/568915443" target="_blank" rel="noreferrer">谈谈JS二进制：File、Blob、FileReader、ArrayBuffer、Base64</a></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/文件系统.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>数组求集合</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>正则表达式</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.html" "b/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.html"
new file mode 100644
index 00000000..d5635db2
--- /dev/null
+++ "b/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.html"
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_正则表达式.md.a9560fb8.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-6b87e69f><div><h2 id="资料参考-learnregex" tabindex="-1">资料参考：<a href="https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md" target="_blank" rel="noreferrer">LearnRegex</a> <a class="header-anchor" href="#资料参考-learnregex" aria-label="Permalink to &quot;资料参考：[LearnRegex](https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md)&quot;">​</a></h2><h2 id="应用场景" tabindex="-1">应用场景 <a class="header-anchor" href="#应用场景" aria-label="Permalink to &quot;应用场景&quot;">​</a></h2><ol><li>表单校验</li><li>字符串匹配和替换、解析(vue模板解析)</li></ol><h2 id="可视化工具" tabindex="-1">可视化工具： <a class="header-anchor" href="#可视化工具" aria-label="Permalink to &quot;可视化工具：&quot;">​</a></h2><ol><li><a href="https://jex.im/regulex/#!flags=&amp;re=" target="_blank" rel="noreferrer">Regulex</a></li><li><a href="https://regexper.com/" target="_blank" rel="noreferrer">Regexper</a></li></ol><h2 id="_1-或者" tabindex="-1">1. 或者 <code>|</code> <a class="header-anchor" href="#_1-或者" aria-label="Permalink to &quot;1. 或者 `|`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tel</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">020-99999999</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">010</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">020</span><span style="color:#666666;">)</span><span style="color:#E6CC77;">\-</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">{8}</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tel</span><span style="color:#666666;">));</span><span style="color:#758575DD;">//true</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tel</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">020-99999999</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">010</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">020</span><span style="color:#999999;">)</span><span style="color:#BDA437;">\-</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">{8}</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tel</span><span style="color:#999999;">));</span><span style="color:#A0ADA0;">//true</span></span></code></pre></div><h2 id="_2-原子表-、原子组" tabindex="-1">2. 原子表<code>[]</code>、原子组<code>()</code> <a class="header-anchor" href="#_2-原子表-、原子组" aria-label="Permalink to &quot;2. 原子表`[]`、原子组`()`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//原子表</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">123456</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//出现在其中就匹配成功</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//true</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">9</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//[()] [.+] 特殊符号放在原子表里就是普通符号(保留字符本意）</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">www.baidu.com+</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">.+</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gi</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//[&#39;.&#39;, &#39;.&#39;, &#39;+&#39;]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//原子组</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">34</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">56</span><span style="color:#666666;">)</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hdjfaks34fjj</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//true 满足组合才行</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hdjfaks35fjj</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//false</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//原子表</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">123456</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//出现在其中就匹配成功</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//true</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">9</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//[()] [.+] 特殊符号放在原子表里就是普通符号(保留字符本意）</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">www.baidu.com+</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">.+</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gi</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//[&#39;.&#39;, &#39;.&#39;, &#39;+&#39;]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//原子组</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">34</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">56</span><span style="color:#999999;">)</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hdjfaks34fjj</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//true 满足组合才行</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hdjfaks35fjj</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//false</span></span></code></pre></div><h2 id="_3-边界符-、" tabindex="-1">3. 边界符<code>^</code>、<code>$</code> <a class="header-anchor" href="#_3-边界符-、" aria-label="Permalink to &quot;3. 边界符`^`、`$`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tel</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">12020-99999999</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">(</span><span style="color:#C4704F;">010</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">020</span><span style="color:#666666;">)</span><span style="color:#E6CC77;">\-</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">{8}</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tel</span><span style="color:#666666;">));</span><span style="color:#758575DD;">//false 以010开头</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tel</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">020-999999998</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">(</span><span style="color:#C4704F;">010</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">020</span><span style="color:#666666;">)</span><span style="color:#E6CC77;">\-</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">{8}</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tel</span><span style="color:#666666;">));</span><span style="color:#758575DD;">//false 以8位数结尾</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tel</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">12020-99999999</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">010</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">020</span><span style="color:#999999;">)</span><span style="color:#BDA437;">\-</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">{8}</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tel</span><span style="color:#999999;">));</span><span style="color:#A0ADA0;">//false 以010开头</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tel</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">020-999999998</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">010</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">020</span><span style="color:#999999;">)</span><span style="color:#BDA437;">\-</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">{8}</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tel</span><span style="color:#999999;">));</span><span style="color:#A0ADA0;">//false 以8位数结尾</span></span></code></pre></div><h2 id="_4-元字符" tabindex="-1">4. 元字符 <a class="header-anchor" href="#_4-元字符" aria-label="Permalink to &quot;4. 元字符&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032157146.png" alt="image.png"></p><h2 id="_5-匹配所有字符" tabindex="-1">5. 匹配所有字符 <a class="header-anchor" href="#_5-匹配所有字符" aria-label="Permalink to &quot;5. 匹配所有字符&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">\s\S</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">\d\D</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">\s\S</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">\d\D</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span></span></code></pre></div><h2 id="_6-模式修正符号i、g" tabindex="-1">6. 模式修正符号<code>i</code>、<code>g</code> <a class="header-anchor" href="#_6-模式修正符号i、g" aria-label="Permalink to &quot;6. 模式修正符号`i`、`g`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">djfkdjakDJFKJD</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">hd</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">ig</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//i 不区分大小写</span></span>
+<span class="line"><span style="color:#758575DD;">//g 全局匹配</span></span>
+<span class="line"><span style="color:#758575DD;">//m 每一行单独处理(^,$)检测字符串的开头或结尾,如果想要它在每行的开头和结尾生效,则用m</span></span>
+<span class="line"><span style="color:#758575DD;">//u 宽字节匹配</span></span>
+<span class="line"><span style="color:#758575DD;">//y 匹配完不匹配后面（提升效率）</span></span>
+<span class="line"><span style="color:#758575DD;">//字符属性</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hdstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">dfa2332,hello! 正则表达式，哈！</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#BD976A;">hdstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\p</span><span style="color:#C4704F;">{sc=Han}</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gu</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//按语言系统匹配中文 [&#39;正&#39;, &#39;则&#39;, &#39;表&#39;, &#39;达&#39;, &#39;式&#39;,  &#39;哈&#39;]</span></span>
+<span class="line"><span style="color:#BD976A;">hdstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\p</span><span style="color:#C4704F;">{P}</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gu</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//匹配所有标点符号  //[&#39;,&#39;, &#39;!&#39;, &#39;，&#39;, &#39;！&#39;]</span></span>
+<span class="line"><span style="color:#BD976A;">hdstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\p</span><span style="color:#C4704F;">{L}</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gu</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//匹配所有字母</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hd</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">djfkdjakDJFKJD</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">hd</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">ig</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//i 不区分大小写</span></span>
+<span class="line"><span style="color:#A0ADA0;">//g 全局匹配</span></span>
+<span class="line"><span style="color:#A0ADA0;">//m 每一行单独处理(^,$)检测字符串的开头或结尾,如果想要它在每行的开头和结尾生效,则用m</span></span>
+<span class="line"><span style="color:#A0ADA0;">//u 宽字节匹配</span></span>
+<span class="line"><span style="color:#A0ADA0;">//y 匹配完不匹配后面（提升效率）</span></span>
+<span class="line"><span style="color:#A0ADA0;">//字符属性</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hdstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">dfa2332,hello! 正则表达式，哈！</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B07D48;">hdstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\p</span><span style="color:#AB5E3F;">{sc=Han}</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gu</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//按语言系统匹配中文 [&#39;正&#39;, &#39;则&#39;, &#39;表&#39;, &#39;达&#39;, &#39;式&#39;,  &#39;哈&#39;]</span></span>
+<span class="line"><span style="color:#B07D48;">hdstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\p</span><span style="color:#AB5E3F;">{P}</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gu</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//匹配所有标点符号  //[&#39;,&#39;, &#39;!&#39;, &#39;，&#39;, &#39;！&#39;]</span></span>
+<span class="line"><span style="color:#B07D48;">hdstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\p</span><span style="color:#AB5E3F;">{L}</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gu</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//匹配所有字母</span></span></code></pre></div><h2 id="_7-原子组中的原子表" tabindex="-1">7. 原子组中的原子表<code>([-\/])</code> <a class="header-anchor" href="#_7-原子组中的原子表" aria-label="Permalink to &quot;7. 原子组中的原子表`([-\/])`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dateStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-08-30</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">或</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022/08/30</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#758575DD;">//true </span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">{4}</span><span style="color:#666666;">([</span><span style="color:#C99076;">-</span><span style="color:#E6CC77;">\/</span><span style="color:#666666;">])</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">{2}</span><span style="color:#4D9375;">\1</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">{2}</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-08/30</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#C99076;">\w</span><span style="color:#CB7676;">{3,7}</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gi</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//校验用户名</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hhtml</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;h2&gt;www.sougou.com&lt;/h2&gt;</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">&lt;</span><span style="color:#666666;">(</span><span style="color:#C4704F;">h</span><span style="color:#666666;">[</span><span style="color:#C99076;">1-6</span><span style="color:#666666;">])</span><span style="color:#C4704F;">&gt;</span><span style="color:#666666;">([</span><span style="color:#C99076;">\s\S</span><span style="color:#666666;">]</span><span style="color:#CB7676;">*</span><span style="color:#666666;">)</span><span style="color:#C4704F;">&lt;</span><span style="color:#E6CC77;">\/</span><span style="color:#4D9375;">\1</span><span style="color:#C4704F;">&gt;</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span><span style="color:#DBD7CAEE;">;</span></span>
+<span class="line"><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//匹配到的第一个</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">h1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//原子组1   </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">www.baidu.com</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//原子组2</span></span>
+<span class="line"><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//替换操作</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hhtml</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;p&gt;$1&lt;/p&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hhtml</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">p0</span><span style="color:#666666;">,</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">p2</span><span style="color:#666666;">)=&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;p&gt;</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">p1</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">&lt;/p&gt;</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span></span>
+<span class="line"><span style="color:#BD976A;">$</span><span style="color:#CB7676;">&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//找到内容本身 (\0)</span></span>
+<span class="line"><span style="color:#80A665;">$</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;"> //内容前面的字符</span></span>
+<span class="line"><span style="color:#C98A7D;">$&#39; //内容后面的字符</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">let reg = /&lt;(h[1-6])&gt;([</span><span style="color:#C99076;">\s\S</span><span style="color:#C98A7D;">]*)&lt;</span><span style="color:#C99076;">\/\1</span><span style="color:#C98A7D;">&gt;/gi; //全局匹配</span></span>
+<span class="line"><span style="color:#C98A7D;">[</span></span>
+<span class="line"><span style="color:#C98A7D;">    &quot;&lt;h1&gt;www.baidu.com&lt;/h1&gt;&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">    &quot;&lt;h2&gt;www.sougou.com&lt;/h2&gt;&quot;</span></span>
+<span class="line"><span style="color:#C98A7D;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">let mailReg =  /^</span><span style="color:#C99076;">\w</span><span style="color:#C98A7D;">[</span><span style="color:#C99076;">\w</span><span style="color:#C98A7D;">-]+@[</span><span style="color:#C99076;">\w</span><span style="color:#C98A7D;">]([</span><span style="color:#C99076;">\w</span><span style="color:#C98A7D;">-]+.)+(com|cn|cc|net|org)/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">//不记录分组(?:) 原子组中使用?:则（match,exec输出结果中）不会记录此原子组</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dateStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-08-30</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">或</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022/08/30</span><span style="color:#B5695999;">&#39;</span><span style="color:#A0ADA0;">//true </span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">{4}</span><span style="color:#999999;">([</span><span style="color:#A65E2B;">-</span><span style="color:#BDA437;">\/</span><span style="color:#999999;">])</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">{2}</span><span style="color:#1E754F;">\1</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">{2}</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-08/30</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#A65E2B;">\w</span><span style="color:#AB5959;">{3,7}</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gi</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//校验用户名</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hhtml</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;h2&gt;www.sougou.com&lt;/h2&gt;</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">h</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">1-6</span><span style="color:#999999;">])</span><span style="color:#AB5E3F;">&gt;</span><span style="color:#999999;">([</span><span style="color:#A65E2B;">\s\S</span><span style="color:#999999;">]</span><span style="color:#AB5959;">*</span><span style="color:#999999;">)</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#BDA437;">\/</span><span style="color:#1E754F;">\1</span><span style="color:#AB5E3F;">&gt;</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span><span style="color:#393A34;">;</span></span>
+<span class="line"><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//匹配到的第一个</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">h1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//原子组1   </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">www.baidu.com</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//原子组2</span></span>
+<span class="line"><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//替换操作</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hhtml</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">,</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;p&gt;$1&lt;/p&gt;</span><span style="color:#B5695999;">`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hhtml</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">p0</span><span style="color:#999999;">,</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">p2</span><span style="color:#999999;">)=&gt;</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;p&gt;</span><span style="color:#999999;">${</span><span style="color:#B56959;">p1</span><span style="color:#999999;">}</span><span style="color:#B56959;">&lt;/p&gt;</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#393A34;">                        </span></span>
+<span class="line"><span style="color:#B07D48;">$</span><span style="color:#AB5959;">&amp;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//找到内容本身 (\0)</span></span>
+<span class="line"><span style="color:#59873A;">$</span><span style="color:#B5695999;">`</span><span style="color:#B56959;"> //内容前面的字符</span></span>
+<span class="line"><span style="color:#B56959;">$&#39; //内容后面的字符</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">let reg = /&lt;(h[1-6])&gt;([</span><span style="color:#A65E2B;">\s\S</span><span style="color:#B56959;">]*)&lt;</span><span style="color:#A65E2B;">\/\1</span><span style="color:#B56959;">&gt;/gi; //全局匹配</span></span>
+<span class="line"><span style="color:#B56959;">[</span></span>
+<span class="line"><span style="color:#B56959;">    &quot;&lt;h1&gt;www.baidu.com&lt;/h1&gt;&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">    &quot;&lt;h2&gt;www.sougou.com&lt;/h2&gt;&quot;</span></span>
+<span class="line"><span style="color:#B56959;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">let mailReg =  /^</span><span style="color:#A65E2B;">\w</span><span style="color:#B56959;">[</span><span style="color:#A65E2B;">\w</span><span style="color:#B56959;">-]+@[</span><span style="color:#A65E2B;">\w</span><span style="color:#B56959;">]([</span><span style="color:#A65E2B;">\w</span><span style="color:#B56959;">-]+.)+(com|cn|cc|net|org)/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">//不记录分组(?:) 原子组中使用?:则（match,exec输出结果中）不会记录此原子组</span></span></code></pre></div><h2 id="_8-贪婪匹配-、-、" tabindex="-1">8.贪婪匹配<code>+</code>、<code>*</code>、<code>?</code> <a class="header-anchor" href="#_8-贪婪匹配-、-、" aria-label="Permalink to &quot;8.贪婪匹配`+`、`*`、`?`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//一个或多个</span></span>
+<span class="line"><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//0个或多个</span></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//0个或1个</span></span>
+<span class="line"><span style="color:#666666;">{</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//0-10个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//禁止贪婪（往少的一方倾斜）</span></span>
+<span class="line"><span style="color:#CB7676;">+?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//一个 let reg = /(.*?at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;The fat&#39;]</span></span>
+<span class="line"><span style="color:#CB7676;">*?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//匹配到一个就停止let reg = /(.*?at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;The fat&#39;]</span></span>
+<span class="line"><span style="color:#CB7676;">??</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// let reg = /(.??at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;fat&#39;]</span></span>
+<span class="line"><span style="color:#666666;">{</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,}</span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">}</span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//3个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//案例练习</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">html</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;span&gt;www.baidu.com&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;span&gt;www.map.baidu.com&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;span&gt;www.know.baidu.com&lt;/span&gt;</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">regbaidu</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">&lt;span&gt;</span><span style="color:#666666;">[</span><span style="color:#C99076;">\s\S</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+</span><span style="color:#C4704F;">&lt;</span><span style="color:#E6CC77;">\/</span><span style="color:#C4704F;">span&gt;</span><span style="color:#C98A7D99;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//贪婪到最后</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">regbaidu1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">&lt;span&gt;</span><span style="color:#666666;">([</span><span style="color:#C99076;">\s\S</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+?</span><span style="color:#666666;">)</span><span style="color:#C4704F;">&lt;</span><span style="color:#E6CC77;">\/</span><span style="color:#C4704F;">span&gt;</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gi</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newhtml</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">html</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">regbaidu1</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">,</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">)=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;h2 style=&#39;color:red&#39;&gt;</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">p1</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">&lt;/h2&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//&quot;&lt;h2 style=&#39;color:red&#39;&gt;www.baidu.com&lt;/h2&gt;\n&lt;h2 style=&#39;color:red&#39;&gt;www.map.baidu.com&lt;/h2&gt;\n&lt;h2 style=&#39;color:red&#39;&gt;www.know.baidu.com&lt;/h2&gt;&quot;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//一个或多个</span></span>
+<span class="line"><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//0个或多个</span></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//0个或1个</span></span>
+<span class="line"><span style="color:#999999;">{</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">10</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//0-10个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//禁止贪婪（往少的一方倾斜）</span></span>
+<span class="line"><span style="color:#AB5959;">+?</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//一个 let reg = /(.*?at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;The fat&#39;]</span></span>
+<span class="line"><span style="color:#AB5959;">*?</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//匹配到一个就停止let reg = /(.*?at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;The fat&#39;]</span></span>
+<span class="line"><span style="color:#AB5959;">??</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// let reg = /(.??at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;fat&#39;]</span></span>
+<span class="line"><span style="color:#999999;">{</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,}</span><span style="color:#AB5959;">?</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">10</span><span style="color:#999999;">}</span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//3个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//案例练习</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">html</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;span&gt;www.baidu.com&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;span&gt;www.map.baidu.com&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;span&gt;www.know.baidu.com&lt;/span&gt;</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">regbaidu</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">&lt;span&gt;</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">\s\S</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#BDA437;">\/</span><span style="color:#AB5E3F;">span&gt;</span><span style="color:#B5695999;">/</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//贪婪到最后</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">regbaidu1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">&lt;span&gt;</span><span style="color:#999999;">([</span><span style="color:#A65E2B;">\s\S</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+?</span><span style="color:#999999;">)</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#BDA437;">\/</span><span style="color:#AB5E3F;">span&gt;</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gi</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newhtml</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">html</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">regbaidu1</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">,</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">)=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;h2 style=&#39;color:red&#39;&gt;</span><span style="color:#999999;">${</span><span style="color:#B56959;">p1</span><span style="color:#999999;">}</span><span style="color:#B56959;">&lt;/h2&gt;</span><span style="color:#B5695999;">`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//&quot;&lt;h2 style=&#39;color:red&#39;&gt;www.baidu.com&lt;/h2&gt;\n&lt;h2 style=&#39;color:red&#39;&gt;www.map.baidu.com&lt;/h2&gt;\n&lt;h2 style=&#39;color:red&#39;&gt;www.know.baidu.com&lt;/h2&gt;&quot;</span></span></code></pre></div><h3 id="批量验证密码" tabindex="-1">批量验证密码 <a class="header-anchor" href="#批量验证密码" aria-label="Permalink to &quot;批量验证密码&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">psdRegs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">[</span><span style="color:#C99076;">0-9a-z</span><span style="color:#666666;">]</span><span style="color:#CB7676;">{6,10}</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">A-Z</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">0-9</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">psdRegs</span><span style="color:#666666;">.</span><span style="color:#80A665;">every</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fdkafad</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//false</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">psdRegs</span><span style="color:#666666;">.</span><span style="color:#80A665;">every</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1f12aA</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//true</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">psdRegs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">0-9a-z</span><span style="color:#999999;">]</span><span style="color:#AB5959;">{6,10}</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span><span style="color:#999999;">,</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">A-Z</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">0-9</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">psdRegs</span><span style="color:#999999;">.</span><span style="color:#59873A;">every</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fdkafad</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">psdRegs</span><span style="color:#999999;">.</span><span style="color:#59873A;">every</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1f12aA</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//true</span></span></code></pre></div><h2 id="_9-matchall" tabindex="-1">9. matchAll <a class="header-anchor" href="#_9-matchall" aria-label="Permalink to &quot;9. matchAll&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;h2&gt;www.map.baidu.com&lt;/h2&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;h3&gt;百度一下&lt;/h3&gt;</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">breg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">&lt;</span><span style="color:#666666;">(</span><span style="color:#C4704F;">h</span><span style="color:#666666;">[</span><span style="color:#C99076;">1-6</span><span style="color:#666666;">])</span><span style="color:#C4704F;">&gt;</span><span style="color:#666666;">([</span><span style="color:#C99076;">\S\s</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+</span><span style="color:#666666;">)</span><span style="color:#C4704F;">&lt;</span><span style="color:#E6CC77;">\/</span><span style="color:#4D9375;">\1</span><span style="color:#C4704F;">&gt;</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gi</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">hstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#BD976A;">breg</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//全局匹配拿不到它每个原子组</span></span>
+<span class="line"><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">&lt;h2&gt;www.map.baidu.com&lt;/h2&gt;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">&lt;h3&gt;百度一下&lt;/h3&gt;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//解决方法：使用matchAll</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#BD976A;">it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">matchAll</span><span style="color:#666666;">(</span><span style="color:#BD976A;">breg</span><span style="color:#666666;">)){</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">dir</span><span style="color:#666666;">(</span><span style="color:#BD976A;">it</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">content</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">it</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//每个匹配项信息</span></span>
+<span class="line"><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">h1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//原子组1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">www.baidu.com</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//原子组2</span></span>
+<span class="line"><span style="color:#666666;">]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;h2&gt;www.map.baidu.com&lt;/h2&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;h3&gt;百度一下&lt;/h3&gt;</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">breg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">h</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">1-6</span><span style="color:#999999;">])</span><span style="color:#AB5E3F;">&gt;</span><span style="color:#999999;">([</span><span style="color:#A65E2B;">\S\s</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+</span><span style="color:#999999;">)</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#BDA437;">\/</span><span style="color:#1E754F;">\1</span><span style="color:#AB5E3F;">&gt;</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gi</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">hstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B07D48;">breg</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//全局匹配拿不到它每个原子组</span></span>
+<span class="line"><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">&lt;h2&gt;www.map.baidu.com&lt;/h2&gt;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">&lt;h3&gt;百度一下&lt;/h3&gt;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//解决方法：使用matchAll</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#B07D48;">it</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">matchAll</span><span style="color:#999999;">(</span><span style="color:#B07D48;">breg</span><span style="color:#999999;">)){</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">dir</span><span style="color:#999999;">(</span><span style="color:#B07D48;">it</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">content</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">it</span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//每个匹配项信息</span></span>
+<span class="line"><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">h1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//原子组1</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">www.baidu.com</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//原子组2</span></span>
+<span class="line"><span style="color:#999999;">]</span></span></code></pre></div><h2 id="" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155273.png" alt="image.png"> <a class="header-anchor" href="#" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155273.png)&quot;">​</a></h2><h2 id="_10-断言匹配" tabindex="-1">10. 断言匹配`` <a class="header-anchor" href="#_10-断言匹配" aria-label="Permalink to &quot;10. 断言匹配``&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">百度</span><span style="color:#666666;">(?=</span><span style="color:#C4704F;">地图</span><span style="color:#666666;">)</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span></span>
+<span class="line"><span style="color:#758575DD;">// 只有百度后面有地图两字的才满足要求</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">htm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">百度一下，百度地图</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#BD976A;">innerHTML</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">&lt;a href=&quot;www.map.baidu.com&quot;&gt;$&amp;&lt;/a&gt;</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//判断 </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//判断前面内容是..</span></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#666666;">&lt;=</span><span style="color:#BD976A;">href</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//前面是href=&quot;www.baidu.com&quot;符合</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?!</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//限制不是..</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;">  </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+</span><span style="color:#666666;">(?!</span><span style="color:#C99076;">\d</span><span style="color:#666666;">)</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//限制最后一位不是数字</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?!</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//限定不包含关键词,必须以字母结束</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">(?!</span><span style="color:#C99076;">.</span><span style="color:#CB7676;">*</span><span style="color:#C4704F;">百度</span><span style="color:#C99076;">.</span><span style="color:#CB7676;">*</span><span style="color:#666666;">)[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#CB7676;">{4,5}</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//前面不是数字 </span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(?&lt;!</span><span style="color:#C99076;">\d</span><span style="color:#CB7676;">+</span><span style="color:#666666;">)[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span></span>
+<span class="line"><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">baidu88baidu</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//baidu</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">百度</span><span style="color:#999999;">(?=</span><span style="color:#AB5E3F;">地图</span><span style="color:#999999;">)</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 只有百度后面有地图两字的才满足要求</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">htm</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">百度一下，百度地图</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#B07D48;">innerHTML</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">,</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">&lt;a href=&quot;www.map.baidu.com&quot;&gt;$&amp;&lt;/a&gt;</span><span style="color:#B5695999;">`</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//判断 </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//判断前面内容是..</span></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#999999;">&lt;=</span><span style="color:#B07D48;">href</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//前面是href=&quot;www.baidu.com&quot;符合</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?!</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//限制不是..</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;">  </span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+</span><span style="color:#999999;">(?!</span><span style="color:#A65E2B;">\d</span><span style="color:#999999;">)</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//限制最后一位不是数字</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?!</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//限定不包含关键词,必须以字母结束</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">(?!</span><span style="color:#A65E2B;">.</span><span style="color:#AB5959;">*</span><span style="color:#AB5E3F;">百度</span><span style="color:#A65E2B;">.</span><span style="color:#AB5959;">*</span><span style="color:#999999;">)[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#AB5959;">{4,5}</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//前面不是数字 </span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#999999;">(?&lt;!</span><span style="color:#A65E2B;">\d</span><span style="color:#AB5959;">+</span><span style="color:#999999;">)[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span></span>
+<span class="line"><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">baidu88baidu</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//baidu</span></span></code></pre></div><h3 id="将链接替换为想要的网址" tabindex="-1">将链接替换为想要的网址 <a class="header-anchor" href="#将链接替换为想要的网址" aria-label="Permalink to &quot;将链接替换为想要的网址&quot;">​</a></h3><h2 id="-1" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155274.png" alt="image.png"> <a class="header-anchor" href="#-1" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155274.png)&quot;">​</a></h2><h3 id="将不含oss的替换" tabindex="-1">将不含oss的替换 <a class="header-anchor" href="#将不含oss的替换" aria-label="Permalink to &quot;将不含oss的替换&quot;">​</a></h3><h2 id="-2" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155275.png" alt="image.png"> <a class="header-anchor" href="#-2" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155275.png)&quot;">​</a></h2><h3 id="模糊电话后四位" tabindex="-1">模糊电话后四位 <a class="header-anchor" href="#模糊电话后四位" aria-label="Permalink to &quot;模糊电话后四位&quot;">​</a></h3><h2 id="-3" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155277.png" alt="image.png"> <a class="header-anchor" href="#-3" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155277.png)&quot;">​</a></h2><h2 id="案例练习" tabindex="-1">案例练习 <a class="header-anchor" href="#案例练习" aria-label="Permalink to &quot;案例练习&quot;">​</a></h2><h3 id="替换练习" tabindex="-1">替换练习 <a class="header-anchor" href="#替换练习" aria-label="Permalink to &quot;替换练习&quot;">​</a></h3><h2 id="-4" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155279.png" alt="image.png"> <a class="header-anchor" href="#-4" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155279.png)&quot;">​</a></h2><h3 id="给原子组起别名" tabindex="-1">给原子组起别名 <a class="header-anchor" href="#给原子组起别名" aria-label="Permalink to &quot;给原子组起别名&quot;">​</a></h3><h2 id="-5" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155280.png" alt="image.png"> <a class="header-anchor" href="#-5" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155280.png)&quot;">​</a></h2></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/正则表达式.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>文件系统</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>获取目录结构</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.html" "b/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.html"
new file mode 100644
index 00000000..d8e205a9
--- /dev/null
+++ "b/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.html"
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>获取目录结构(纯前端) | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_获取目录结构.md.f15b6a8f.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-6b87e69f><div><h1 id="获取目录结构-纯前端" tabindex="-1">获取目录结构(纯前端) <a class="header-anchor" href="#获取目录结构-纯前端" aria-label="Permalink to &quot;获取目录结构(纯前端)&quot;">​</a></h1><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">@</span><span style="color:#80A665;">click</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">onSelectDir</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">select-btn</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">选择文件夹</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">button</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#999999;">@</span><span style="color:#59873A;">click</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">onSelectDir</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">select-btn</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">选择文件夹</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">button</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onSelectDir</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dirHandle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">showDirectoryPicker</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getDirData</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dirHandle</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">directoryData</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">/*递归获取文件夹下的所有文件, 并生成树状结构 </span></span>
+<span class="line"><span style="color:#758575DD;"> {</span></span>
+<span class="line"><span style="color:#758575DD;">&quot;id&quot;: &quot;o6ukw45e&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">&quot;name&quot;: &quot;core&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">&quot;ftype&quot;: &quot;dir&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">&quot;children&quot;: [</span></span>
+<span class="line"><span style="color:#758575DD;">  {</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;id&quot;: &quot;bc41wb16&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;name&quot;: &quot;.eslintrc.cjs&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;ftype&quot;: &quot;cjs&quot;</span></span>
+<span class="line"><span style="color:#758575DD;">  },]</span></span>
+<span class="line"><span style="color:#758575DD;">}</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">exclude</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">node_modules</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.git</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.vscode</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.prettierignore</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">dist</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">];</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//排除的文件夹</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getDirData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">dirHandle</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dirData</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dirHandle</span><span style="color:#666666;">.</span><span style="color:#80A665;">values</span><span style="color:#666666;">())</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">kind</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//文件大小</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">kind</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">file</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFile</span><span style="color:#666666;">().</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ftype</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">).</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">unknown</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">dirData</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomId</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">value</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">ftype</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">kind</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">directory</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">exclude</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">continue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">children</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomId</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">ftype</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dir</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">children</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">dirData</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">children</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getDirData</span><span style="color:#666666;">(</span><span style="color:#BD976A;">entry</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">children</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onSelectDir</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dirHandle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">showDirectoryPicker</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getDirData</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dirHandle</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">directoryData</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*递归获取文件夹下的所有文件, 并生成树状结构 </span></span>
+<span class="line"><span style="color:#A0ADA0;"> {</span></span>
+<span class="line"><span style="color:#A0ADA0;">&quot;id&quot;: &quot;o6ukw45e&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">&quot;name&quot;: &quot;core&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">&quot;ftype&quot;: &quot;dir&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">&quot;children&quot;: [</span></span>
+<span class="line"><span style="color:#A0ADA0;">  {</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;id&quot;: &quot;bc41wb16&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;name&quot;: &quot;.eslintrc.cjs&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;ftype&quot;: &quot;cjs&quot;</span></span>
+<span class="line"><span style="color:#A0ADA0;">  },]</span></span>
+<span class="line"><span style="color:#A0ADA0;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">exclude</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">node_modules</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.git</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.vscode</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.prettierignore</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">dist</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">];</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//排除的文件夹</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getDirData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">dirHandle</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dirData</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dirHandle</span><span style="color:#999999;">.</span><span style="color:#59873A;">values</span><span style="color:#999999;">())</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">kind</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//文件大小</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">kind</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">file</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFile</span><span style="color:#999999;">().</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ftype</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">).</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">unknown</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">dirData</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomId</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">value</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">ftype</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">kind</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">directory</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">exclude</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">continue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">children</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomId</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">ftype</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dir</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">children</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">dirData</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">children</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getDirData</span><span style="color:#999999;">(</span><span style="color:#B07D48;">entry</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">children</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/获取目录结构.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>正则表达式</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>高阶函数</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.html" "b/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.html"
new file mode 100644
index 00000000..89dad3ad
--- /dev/null
+++ "b/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.html"
@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_JavaScript_高阶函数.md.f3e81d0b.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_JavaScript_%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-6b87e69f><div><h2 id="高阶函数之filter" tabindex="-1">高阶函数之filter <a class="header-anchor" href="#高阶函数之filter" aria-label="Permalink to &quot;高阶函数之filter&quot;">​</a></h2><h3 id="定义" tabindex="-1">定义 <a class="header-anchor" href="#定义" aria-label="Permalink to &quot;定义&quot;">​</a></h3><blockquote><ul><li>通过提供函数实现的依次测试的所有元素，true 则表示通过，如果为 false 则失败。</li><li>返回值是一个新数组，由通过测试为 true 的所有元素组成</li><li>如果没有任何数组元素通过测试，则返回空数组。</li></ul></blockquote><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li><strong>原始数组不发生改变</strong></li><li><strong>不会对空数组进行检测</strong></li><li><strong>满足条件的留下，是对原数组的过滤。</strong></li></ol></div><h3 id="语法" tabindex="-1">语法 <a class="header-anchor" href="#语法" aria-label="Permalink to &quot;语法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentValue</span><span style="color:#666666;">,</span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">, </span><span style="color:#80A665;">thisValue</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//currentValue  必须，遍历到的当前元素值</span></span>
+<span class="line"><span style="color:#758575DD;">//index         可选，当前元素的索引值</span></span>
+<span class="line"><span style="color:#758575DD;">//arr           可选，当前元素属于的数组对象</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentValue</span><span style="color:#999999;">,</span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">, </span><span style="color:#59873A;">thisValue</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//currentValue  必须，遍历到的当前元素值</span></span>
+<span class="line"><span style="color:#A0ADA0;">//index         可选，当前元素的索引值</span></span>
+<span class="line"><span style="color:#A0ADA0;">//arr           可选，当前元素属于的数组对象</span></span></code></pre></div><h3 id="用法" tabindex="-1">用法 <a class="header-anchor" href="#用法" aria-label="Permalink to &quot;用法&quot;">​</a></h3><h5 id="过滤小于-100" tabindex="-1">过滤小于 100 <a class="header-anchor" href="#过滤小于-100" aria-label="Permalink to &quot;过滤小于 100&quot;">​</a></h5><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">30</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">110</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">60</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">190</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">50</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNums</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#BD976A;">nums</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newNums</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//[20,30,60,50]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#2F798A;">30</span><span style="color:#999999;">,</span><span style="color:#2F798A;">110</span><span style="color:#999999;">,</span><span style="color:#2F798A;">60</span><span style="color:#999999;">,</span><span style="color:#2F798A;">190</span><span style="color:#999999;">,</span><span style="color:#2F798A;">50</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNums</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B07D48;">nums</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newNums</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//[20,30,60,50]</span></span></code></pre></div><h5 id="返回奇数元素" tabindex="-1">返回奇数元素 <a class="header-anchor" href="#返回奇数元素" aria-label="Permalink to &quot;返回奇数元素&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">=[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#CB7676;">%</span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;">!==</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//[1,3,5]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">=[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#AB5959;">%</span><span style="color:#2F798A;">2</span><span style="color:#AB5959;">!==</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//[1,3,5]</span></span></code></pre></div><h5 id="数组去重" tabindex="-1">数组去重 <a class="header-anchor" href="#数组去重" aria-label="Permalink to &quot;数组去重&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">apple</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">strawberry</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">banana</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pear</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">apple</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">orange</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">orange</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">strawberry</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//去除重复元素依靠的是indexOf总是返回第一个元素的位置，</span></span>
+<span class="line"><span style="color:#758575DD;">//后续的重复元素位置与indexOf返回的位置相等,表示是同一个元素</span></span>
+<span class="line"><span style="color:#758575DD;">//后续的重复元素位置与indexOf返回的位置不相等，表示元素重复并且过滤。</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">filterArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#CB7676;">===</span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;">;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">filterArr</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//[&quot;apple&quot;, &quot;strawberry&quot;, &quot;banana&quot;, &quot;pear&quot;, &quot;orange&quot;]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">apple</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">strawberry</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">banana</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pear</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">apple</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">orange</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">orange</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">strawberry</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//去除重复元素依靠的是indexOf总是返回第一个元素的位置，</span></span>
+<span class="line"><span style="color:#A0ADA0;">//后续的重复元素位置与indexOf返回的位置相等,表示是同一个元素</span></span>
+<span class="line"><span style="color:#A0ADA0;">//后续的重复元素位置与indexOf返回的位置不相等，表示元素重复并且过滤。</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">filterArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#AB5959;">===</span><span style="color:#B07D48;">index</span><span style="color:#393A34;">;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">filterArr</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//[&quot;apple&quot;, &quot;strawberry&quot;, &quot;banana&quot;, &quot;pear&quot;, &quot;orange&quot;]</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">element</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">self</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">self</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">element</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// [1, 2, 3, 5, 4]</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">element</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">self</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">self</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">element</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#393A34;"> </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// [1, 2, 3, 5, 4]</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]</span></span></code></pre></div><h5 id="找出素数" tabindex="-1">找出素数 <a class="header-anchor" href="#找出素数" aria-label="Permalink to &quot;找出素数&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//除了1和自身,不能被其他数整除的</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">=[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">8</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">9</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">37</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> 	</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">sqrt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//除了1和自身,不能被其他数整除的</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">=[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">7</span><span style="color:#999999;">,</span><span style="color:#2F798A;">8</span><span style="color:#999999;">,</span><span style="color:#2F798A;">9</span><span style="color:#999999;">,</span><span style="color:#2F798A;">11</span><span style="color:#999999;">,</span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#2F798A;">37</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;"> 	</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">sqrt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span></code></pre></div><h2 id="高阶函数之map" tabindex="-1">高阶函数之map <a class="header-anchor" href="#高阶函数之map" aria-label="Permalink to &quot;高阶函数之map&quot;">​</a></h2><h3 id="定义-1" tabindex="-1">定义 <a class="header-anchor" href="#定义-1" aria-label="Permalink to &quot;定义&quot;">​</a></h3><blockquote><p>原数组中的每个元素依次调用一个指定方法后，</p><p>返回值组成的新数组</p></blockquote><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li><strong>原始数组不发生改变</strong></li><li><strong>不会对空数组进行检测</strong></li><li><strong>对原数组的加工，返回加工后新数组</strong></li></ol></div><h3 id="语法-1" tabindex="-1">语法 <a class="header-anchor" href="#语法-1" aria-label="Permalink to &quot;语法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentValue</span><span style="color:#666666;">,</span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">, </span><span style="color:#80A665;">thisValue</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//currentValue  数组中正在处理的当前元素。</span></span>
+<span class="line"><span style="color:#758575DD;">//index可选  数组中正在处理的当前元素的索引。</span></span>
+<span class="line"><span style="color:#758575DD;">//array可选  map 方法被调用的数组。</span></span>
+<span class="line"><span style="color:#758575DD;">//thisArg可选 执行 callback 函数时使用的this 值。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentValue</span><span style="color:#999999;">,</span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">, </span><span style="color:#59873A;">thisValue</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//currentValue  数组中正在处理的当前元素。</span></span>
+<span class="line"><span style="color:#A0ADA0;">//index可选  数组中正在处理的当前元素的索引。</span></span>
+<span class="line"><span style="color:#A0ADA0;">//array可选  map 方法被调用的数组。</span></span>
+<span class="line"><span style="color:#A0ADA0;">//thisArg可选 执行 callback 函数时使用的this 值。</span></span></code></pre></div><h3 id="用法-1" tabindex="-1">用法 <a class="header-anchor" href="#用法-1" aria-label="Permalink to &quot;用法&quot;">​</a></h3><h5 id="返回数组元素平方后的新数组" tabindex="-1">返回数组元素平方后的新数组 <a class="header-anchor" href="#返回数组元素平方后的新数组" aria-label="Permalink to &quot;返回数组元素平方后的新数组&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">pow</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//定义一个平方函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#CB7676;">*</span><span style="color:#BD976A;">x</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">=[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">8</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">9</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pow</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//map()传入的是函数对象本身</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">       </span><span style="color:#758575DD;">//结果：[1,4,9,16,25,36,49,64,81];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">pow</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">){</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//定义一个平方函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#AB5959;">*</span><span style="color:#B07D48;">x</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">=[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">7</span><span style="color:#999999;">,</span><span style="color:#2F798A;">8</span><span style="color:#999999;">,</span><span style="color:#2F798A;">9</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pow</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//map()传入的是函数对象本身</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span><span style="color:#393A34;">       </span><span style="color:#A0ADA0;">//结果：[1,4,9,16,25,36,49,64,81];</span></span></code></pre></div><h5 id="用给定函数创建新字符串" tabindex="-1">用给定函数创建新字符串 <a class="header-anchor" href="#用给定函数创建新字符串" aria-label="Permalink to &quot;用给定函数创建新字符串&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mapString</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fn</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">str</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">((</span><span style="color:#BD976A;">c</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#80A665;">mapString</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">lorem ipsum</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#666666;">.</span><span style="color:#80A665;">toUpperCase</span><span style="color:#666666;">());</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// &#39;LOREM IPSUM&#39;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mapString</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fn</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">str</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">((</span><span style="color:#B07D48;">c</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#59873A;">mapString</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">lorem ipsum</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#999999;">.</span><span style="color:#59873A;">toUpperCase</span><span style="color:#999999;">());</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// &#39;LOREM IPSUM&#39;</span></span></code></pre></div><h5 id="把二维数组变字符串" tabindex="-1">把二维数组变字符串 <a class="header-anchor" href="#把二维数组变字符串" aria-label="Permalink to &quot;把二维数组变字符串&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">]];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">row</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">row</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)).</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// &quot;1,2;3,4&quot;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">]];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">row</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">row</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)).</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// &quot;1,2;3,4&quot;</span></span></code></pre></div><h5 id="数字序列转为数组-删除符号" tabindex="-1">数字序列转为数组，删除符号 <a class="header-anchor" href="#数字序列转为数组-删除符号" aria-label="Permalink to &quot;数字序列转为数组，删除符号&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">digitize</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">abs</span><span style="color:#666666;">(</span><span style="color:#C98A7D;">n</span><span style="color:#666666;">)</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">].</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#80A665;">digitize</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">123</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 3]</span></span>
+<span class="line"><span style="color:#80A665;">digitize</span><span style="color:#666666;">(</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">123</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 3]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">digitize</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B5695999;">`</span><span style="color:#999999;">${</span><span style="color:#B56959;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">abs</span><span style="color:#999999;">(</span><span style="color:#B56959;">n</span><span style="color:#999999;">)</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">].</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#59873A;">digitize</span><span style="color:#999999;">(</span><span style="color:#2F798A;">123</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 3]</span></span>
+<span class="line"><span style="color:#59873A;">digitize</span><span style="color:#999999;">(</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">123</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 3]</span></span></code></pre></div><h5 id="拿到所有图片的图片名称并以数组形式返回" tabindex="-1">拿到所有图片的图片名称并以数组形式返回 <a class="header-anchor" href="#拿到所有图片的图片名称并以数组形式返回" aria-label="Permalink to &quot;拿到所有图片的图片名称并以数组形式返回&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getImages</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">includeDuplicates</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">images</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementsByTagName</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">img</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">srcList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">images</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">getAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">includeDuplicates</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">srcList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">srcList</span><span style="color:#666666;">)];</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">getImages</span><span style="color:#666666;">(</span><span style="color:#BD976A;">document</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">// [&#39;image1.jpg&#39;, &#39;image2.png&#39;, &#39;image1.png&#39;, &#39;...&#39;]</span></span>
+<span class="line"><span style="color:#80A665;">getImages</span><span style="color:#666666;">(</span><span style="color:#BD976A;">document</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// [&#39;image1.jpg&#39;, &#39;image2.png&#39;, &#39;...&#39;] 名字去重</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getImages</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">includeDuplicates</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">images</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementsByTagName</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">img</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">srcList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">images</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">getAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">includeDuplicates</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">srcList</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">srcList</span><span style="color:#999999;">)];</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">getImages</span><span style="color:#999999;">(</span><span style="color:#B07D48;">document</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">// [&#39;image1.jpg&#39;, &#39;image2.png&#39;, &#39;image1.png&#39;, &#39;...&#39;]</span></span>
+<span class="line"><span style="color:#59873A;">getImages</span><span style="color:#999999;">(</span><span style="color:#B07D48;">document</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// [&#39;image1.jpg&#39;, &#39;image2.png&#39;, &#39;...&#39;] 名字去重</span></span></code></pre></div><h5 id="vue中循环注册组件" tabindex="-1">vue中循环注册组件 <a class="header-anchor" href="#vue中循环注册组件" aria-label="Permalink to &quot;vue中循环注册组件&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">Vue</span><span style="color:#666666;">.</span><span style="color:#80A665;">component</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ele</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">render</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">createElement</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createElement</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">div</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			    </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">,{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">length</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}).</span><span style="color:#80A665;">map</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createElement</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Child</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">Vue</span><span style="color:#999999;">.</span><span style="color:#59873A;">component</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ele</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">render</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">createElement</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createElement</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">div</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			    </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">,{</span><span style="color:#393A34;"> </span><span style="color:#998418;">length</span><span style="color:#999999;">:</span><span style="color:#2F798A;">5</span><span style="color:#393A34;"> </span><span style="color:#999999;">}).</span><span style="color:#59873A;">map</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createElement</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Child</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">});</span></span></code></pre></div><h2 id="高阶函数之-reduce" tabindex="-1">高阶函数之 reduce <a class="header-anchor" href="#高阶函数之-reduce" aria-label="Permalink to &quot;高阶函数之 reduce&quot;">​</a></h2><h3 id="定义-2" tabindex="-1">定义 <a class="header-anchor" href="#定义-2" aria-label="Permalink to &quot;定义&quot;">​</a></h3><blockquote><p><strong>原始数组不发生改变</strong></p><p><strong>对于空数组是不会执行回调函数的</strong></p></blockquote><h3 id="语法-2" tabindex="-1">语法 <a class="header-anchor" href="#语法-2" aria-label="Permalink to &quot;语法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">initialValue</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#758575DD;">//callback （执行数组中每个值的函数，包含四个参数）</span></span>
+<span class="line"><span style="color:#758575DD;">//initialValue （作为第一次调用 callback 的第一个参数。）</span></span>
+<span class="line"><span style="color:#758575DD;">//如果没有提供initialValue，从索引1的地方开始执行callback方法，跳过第一个索引。</span></span>
+<span class="line"><span style="color:#758575DD;">//如果提供initialValue，从索引0开始</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">initialValue</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#A0ADA0;">//callback （执行数组中每个值的函数，包含四个参数）</span></span>
+<span class="line"><span style="color:#A0ADA0;">//initialValue （作为第一次调用 callback 的第一个参数。）</span></span>
+<span class="line"><span style="color:#A0ADA0;">//如果没有提供initialValue，从索引1的地方开始执行callback方法，跳过第一个索引。</span></span>
+<span class="line"><span style="color:#A0ADA0;">//如果提供initialValue，从索引0开始</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//执行数组中每个值的callback 函数，包含四个参数</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">previousValue</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentValue</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">previousValue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentValue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">，</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//执行数组中每个值的callback 函数，包含四个参数</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">previousValue</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentValue</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">previousValue</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentValue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span><span style="color:#393A34;">，</span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>1、<strong>previousValue</strong> ：上一次调用回调返回的值，或者是提供的初始值（initialValue）</p><p>2、<strong>currentValue</strong> ：数组中当前被处理的元素</p><p>3、<strong>index</strong> ：当前元素在数组中的索引</p><p>4、<strong>array</strong> ：调用 reduce 函数 的数组</p></div><h3 id="用法-2" tabindex="-1">用法 <a class="header-anchor" href="#用法-2" aria-label="Permalink to &quot;用法&quot;">​</a></h3><h5 id="数组求和" tabindex="-1">数组求和 <a class="header-anchor" href="#数组求和" aria-label="Permalink to &quot;数组求和&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">].</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">acc</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">acc</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#80A665;">sum</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 10</span></span>
+<span class="line"><span style="color:#80A665;">sum</span><span style="color:#666666;">(...[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">]);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 10</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">].</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">acc</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">acc</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#59873A;">sum</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 10</span></span>
+<span class="line"><span style="color:#59873A;">sum</span><span style="color:#999999;">(...[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">]);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 10</span></span></code></pre></div><h5 id="数组去重-1" tabindex="-1">数组去重 <a class="header-anchor" href="#数组去重-1" aria-label="Permalink to &quot;数组去重&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">],[])</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">);</span><span style="color:#758575DD;">// [1, 2, 3, 4]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">],[])</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">// [1, 2, 3, 4]</span></span></code></pre></div><h5 id="计算两个或多个数字的平均值" tabindex="-1">计算两个或多个数字的平均值 <a class="header-anchor" href="#计算两个或多个数字的平均值" aria-label="Permalink to &quot;计算两个或多个数字的平均值&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">average</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">nums</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">nums</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">acc</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">acc</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#80A665;">average</span><span style="color:#666666;">(...[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">]);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 2</span></span>
+<span class="line"><span style="color:#80A665;">average</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 2</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">average</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">nums</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">nums</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">acc</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">acc</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#59873A;">average</span><span style="color:#999999;">(...[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">]);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 2</span></span>
+<span class="line"><span style="color:#59873A;">average</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 2</span></span></code></pre></div><h5 id="将多维数组转化为一维" tabindex="-1">将多维数组转化为一维 <a class="header-anchor" href="#将多维数组转化为一维" aria-label="Permalink to &quot;将多维数组转化为一维&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">]]]</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">convertArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,...</span><span style="color:#80A665;">convertArr</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">],[])</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">convertArr</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//[0, 1, 2, 3, 4, 5, 6, 7]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">7</span><span style="color:#999999;">]]]</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">convertArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,...</span><span style="color:#59873A;">convertArr</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">],[])</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">convertArr</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//[0, 1, 2, 3, 4, 5, 6, 7]</span></span></code></pre></div><h5 id="对象里的属性求和" tabindex="-1">对象里的属性求和 <a class="header-anchor" href="#对象里的属性求和" aria-label="Permalink to &quot;对象里的属性求和&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">subject</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">math</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">score</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">subject</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">chinese</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">score</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">subject</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">english</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">score</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">prev</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#BD976A;">score</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prev</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sum</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//60</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">subject</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">math</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">score</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">subject</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">chinese</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">score</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">subject</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">english</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">score</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">prev</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#B07D48;">score</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prev</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sum</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//60</span></span></code></pre></div><h5 id="统计数组中每个元素出现的次数" tabindex="-1">统计数组中每个元素出现的次数 <a class="header-anchor" href="#统计数组中每个元素出现的次数" aria-label="Permalink to &quot;统计数组中每个元素出现的次数&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">arr11</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">111</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">22</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">111</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">234</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">999</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">999</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">111</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr11</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">item</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">item</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">item</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span></span>
+<span class="line"><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{})</span></span>
+<span class="line"><span style="color:#758575DD;">//{ &#39;22&#39;: 1, &#39;111&#39;: 3, &#39;234&#39;: 1, &#39;999&#39;: 2 }</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">arr11</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">111</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">22</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">111</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">234</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">999</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">999</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">111</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr11</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">item</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">item</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">item</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span></span>
+<span class="line"><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">{})</span></span>
+<span class="line"><span style="color:#A0ADA0;">//{ &#39;22&#39;: 1, &#39;111&#39;: 3, &#39;234&#39;: 1, &#39;999&#39;: 2 }</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">names</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Alice</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Bob</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tiff</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Bruce</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Alice</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nameNum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">names</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">]</span><span style="color:#CB7676;">++</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span></span>
+<span class="line"><span style="color:#666666;">},{})</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nameNum</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">names</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Alice</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Bob</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tiff</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Bruce</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Alice</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nameNum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">names</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">]</span><span style="color:#AB5959;">++</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span></span>
+<span class="line"><span style="color:#999999;">},{})</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nameNum</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}</span></span></code></pre></div><h2 id="高阶函数之-sort" tabindex="-1">高阶函数之 sort <a class="header-anchor" href="#高阶函数之-sort" aria-label="Permalink to &quot;高阶函数之 sort&quot;">​</a></h2><h3 id="定义-3" tabindex="-1">定义 <a class="header-anchor" href="#定义-3" aria-label="Permalink to &quot;定义&quot;">​</a></h3><blockquote><p><code>sort() </code>方法用原地算法对数组的元素进行排序，并返回数组，</p><p>该排序方法会在原数组上直接进行排序，并<strong>不会生成一个排好序的新数组</strong>。</p><p>排序算法现在是稳定的。默认排序顺序是根据字符串 Unicode 码点。</p></blockquote><h3 id="语法-3" tabindex="-1">语法 <a class="header-anchor" href="#语法-3" aria-label="Permalink to &quot;语法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">sort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sortby</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//sort() 在没有参数时，返回的结果是按升序来排列的</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//sortby	可选。规定排序顺序。必须是函数。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">sort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sortby</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//sort() 在没有参数时，返回的结果是按升序来排列的</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//sortby	可选。规定排序顺序。必须是函数。</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><strong>function(a, b)(return a- b)</strong></p><ul><li>如果指明了参数：compare (a, b) ，（a, b 是两个要比较的元素，a 在 b 前面）那么数组会按照该函数的返回值排序</li><li>如果 compare (a, b) 返回值 &lt; 0 ，a 会被排列到 b 之前，即参数 a, b 的顺序保存原样；</li><li>如果 compare (a, b) 返回值 = 0 ，a 和 b 的相对位置不变。（ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守）</li><li>如果 compare (a, b) 返回值 &gt; 0 ，b 会被排列到 a 之前。即交换参数 a, b 的顺序</li></ul></div><h3 id="用法-3" tabindex="-1">用法 <a class="header-anchor" href="#用法-3" aria-label="Permalink to &quot;用法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sortby</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">koala</span><span style="color:#666666;">=[</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">].</span><span style="color:#80A665;">sort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sortby</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">koala</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// [1 , 2 , 10 , 20]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sortby</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">koala</span><span style="color:#999999;">=[</span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">].</span><span style="color:#59873A;">sort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sortby</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">koala</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// [1 , 2 , 10 , 20]</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">sort</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 10, 20]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">sort</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 10, 20]</span></span></code></pre></div><h2 id="自定义高阶函数" tabindex="-1">自定义高阶函数 <a class="header-anchor" href="#自定义高阶函数" aria-label="Permalink to &quot;自定义高阶函数&quot;">​</a></h2><h4 id="字符串数组每项长度、并转换为整数数组" tabindex="-1">字符串数组每项长度、并转换为整数数组 <a class="header-anchor" href="#字符串数组每项长度、并转换为整数数组" aria-label="Permalink to &quot;字符串数组每项长度、并转换为整数数组&quot;">​</a></h4><h3 id="语法-4" tabindex="-1">语法 <a class="header-anchor" href="#语法-4" aria-label="Permalink to &quot;语法&quot;">​</a></h3><blockquote><ul><li>创建了一个高阶函数 mapForEach ，它接受一个数组和一个回调函数 fn。</li><li>它循环遍历传入的数组，并在每次迭代时在 newArray.push 方法调用回调函数 fn 。</li><li>回调函数 fn 接收数组的当前元素并返回该元素的长度，该元素存储在 newArray 中。</li><li>for 循环完成后，newArray 被返回并赋值给 lenArray。</li></ul></blockquote><h3 id="用法-4" tabindex="-1">用法 <a class="header-anchor" href="#用法-4" aria-label="Permalink to &quot;用法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">strArray</span><span style="color:#666666;">=[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">JavaScript</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">PHP</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">JAVA</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">C</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Python</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mapForEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">fn</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArray</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">newArray</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#80A665;">fn</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArray</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lenArray</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mapForEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">strArray</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">lenArray</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//[10,3,4,1,6]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">strArray</span><span style="color:#999999;">=[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">JavaScript</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">PHP</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">JAVA</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">C</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Python</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mapForEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">fn</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArray</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">newArray</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#59873A;">fn</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]));</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArray</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lenArray</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mapForEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">strArray</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">lenArray</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//[10,3,4,1,6]</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/JavaScript/高阶函数.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>获取目录结构</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>自动部署脚本</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.html" "b/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.html"
new file mode 100644
index 00000000..8fe4a838
--- /dev/null
+++ "b/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.html"
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>自动部署 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_Shell_自动部署脚本.md.7ce896dd.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_Shell_%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-6b87e69f><div><h1 id="自动部署" tabindex="-1">自动部署 <a class="header-anchor" href="#自动部署" aria-label="Permalink to &quot;自动部署&quot;">​</a></h1><h2 id="脚本" tabindex="-1">脚本 <a class="header-anchor" href="#脚本" aria-label="Permalink to &quot;脚本&quot;">​</a></h2><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#!/usr/bin/env sh</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">set</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-e</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docs:build</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">cd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docs/.vitepress/dist</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">init</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-A</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">commit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-m</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">🎉deploy gh-pages🎉</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@github.com:fxzer/zerdocs.git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">master:gh-pages</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">cd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">..</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-rf</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">dist</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">cd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">-</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#!/usr/bin/env sh</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">set</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-e</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docs:build</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">cd</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docs/.vitepress/dist</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">init</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">add</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-A</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">commit</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-m</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">🎉deploy gh-pages🎉</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-f</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@github.com:fxzer/zerdocs.git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">master:gh-pages</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">cd</span><span style="color:#393A34;"> </span><span style="color:#B56959;">..</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">rm</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-rf</span><span style="color:#393A34;">  </span><span style="color:#B56959;">dist</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">cd</span><span style="color:#393A34;"> </span><span style="color:#B56959;">-</span></span></code></pre></div><h2 id="action" tabindex="-1">Action <a class="header-anchor" href="#action" aria-label="Permalink to &quot;Action&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">主要流程</p><p>检查代码(Checkout) ===&gt; 启动node环境(Setup Node) ===&gt; 构建静态文件(Build) ===&gt; 把静态文件push到gh-pages,触发gh-pages自带的workflow部署(Push To GitHub Pages)===&gt; 把仓库同步到Gitee(Sync to Gitee) ===&gt; 触发Gitee Pages服务部署(Build Gitee Pages)</p></div><div class="language-yml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">yml</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Deploy GitHub Pages And Sync to Gitee</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;"># 触发条件：在 push 到 master 分支后</span></span>
+<span class="line"><span style="color:#4D9375;">on</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">push</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">branches</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">master</span></span>
+<span class="line"><span style="color:#758575DD;"># 任务</span></span>
+<span class="line"><span style="color:#B8A965;">jobs</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">build-and-deploy</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">runs-on</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ubuntu-latest</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#部署运行环境搭建</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">steps</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Checkout 🛎️</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">actions/checkout@main</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">persist-credentials</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fetch-depth</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#github代码拉取深度</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Setup Node  🎬</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">actions/setup-node@main</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">node-version</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">lts/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Build 🔧</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">run</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">|</span></span>
+<span class="line"><span style="color:#C98A7D;">          yarn</span></span>
+<span class="line"><span style="color:#C98A7D;">          yarn run build</span></span>
+<span class="line"><span style="color:#C98A7D;">          ls -lrth</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">📲 Push To GitHub Pages</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ftnext/action-push-ghpages@v1.0.0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">build_dir</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">dist</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">github_token</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">${{ secrets.DEPLOY_TOKEN }}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">🔁 Sync to Gitee</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#同步到Gitee</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">wearerequired/git-mirror-action@master</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">env</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意在此项目的 Settings-&gt;Actions-&gt; Secrets 配置 GITEE_RSA_PRIVATE_KEY</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">SSH_PRIVATE_KEY</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">${{ secrets.GITEE_RSA_PRIVATE_KEY }}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意替换为你的 GitHub 源仓库地址</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">source-repo</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">git@github.com:fxzer/zerdocs.git</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意替换为你的 Gitee 目标仓库地址</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">destination-repo</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">git@gitee.com:fxzer/zerdocs.git</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">✅ Build Gitee Pages</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#触发Gitee自动部署</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">yanglbme/gitee-pages-action@master</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意替换为你的 Gitee 用户名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">gitee-username</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">fxzer</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意在 Settings-&gt;Secrets 配置 GITEE_PASSWORD</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">gitee-password</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">${{ secrets.GITEE_PASSWORD }}</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意替换为你的 Gitee 仓库 </span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 坑点:https://gitee.com/fxzer/zerdocs --&gt;则填:fxzer/zerdocs,注意仓库名和路径名不一致问题</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">gitee-repo</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">fxzer/zerdocs</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 要部署的分支</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">branch</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">gh-pages</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Deploy GitHub Pages And Sync to Gitee</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;"># 触发条件：在 push 到 master 分支后</span></span>
+<span class="line"><span style="color:#1E754F;">on</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">push</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">branches</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#B56959;">master</span></span>
+<span class="line"><span style="color:#A0ADA0;"># 任务</span></span>
+<span class="line"><span style="color:#998418;">jobs</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">build-and-deploy</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">runs-on</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ubuntu-latest</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#部署运行环境搭建</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">steps</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Checkout 🛎️</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">actions/checkout@main</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">persist-credentials</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fetch-depth</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#github代码拉取深度</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Setup Node  🎬</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">actions/setup-node@main</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">node-version</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">lts/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Build 🔧</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">run</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">|</span></span>
+<span class="line"><span style="color:#B56959;">          yarn</span></span>
+<span class="line"><span style="color:#B56959;">          yarn run build</span></span>
+<span class="line"><span style="color:#B56959;">          ls -lrth</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">📲 Push To GitHub Pages</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ftnext/action-push-ghpages@v1.0.0</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">build_dir</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">dist</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">github_token</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">${{ secrets.DEPLOY_TOKEN }}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">🔁 Sync to Gitee</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#同步到Gitee</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">wearerequired/git-mirror-action@master</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">env</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意在此项目的 Settings-&gt;Actions-&gt; Secrets 配置 GITEE_RSA_PRIVATE_KEY</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">SSH_PRIVATE_KEY</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">${{ secrets.GITEE_RSA_PRIVATE_KEY }}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意替换为你的 GitHub 源仓库地址</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">source-repo</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">git@github.com:fxzer/zerdocs.git</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意替换为你的 Gitee 目标仓库地址</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">destination-repo</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">git@gitee.com:fxzer/zerdocs.git</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">✅ Build Gitee Pages</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#触发Gitee自动部署</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">yanglbme/gitee-pages-action@master</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意替换为你的 Gitee 用户名</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">gitee-username</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">fxzer</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意在 Settings-&gt;Secrets 配置 GITEE_PASSWORD</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">gitee-password</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">${{ secrets.GITEE_PASSWORD }}</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意替换为你的 Gitee 仓库 </span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 坑点:https://gitee.com/fxzer/zerdocs --&gt;则填:fxzer/zerdocs,注意仓库名和路径名不一致问题</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">gitee-repo</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">fxzer/zerdocs</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 要部署的分支</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">branch</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">gh-pages</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/Shell/自动部署脚本.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>高阶函数</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>初学笔记</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.html" "b/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.html"
new file mode 100644
index 00000000..dd6deb85
--- /dev/null
+++ "b/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.html"
@@ -0,0 +1,1017 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_TypeScript_初学笔记.md.a7be054a.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_TypeScript_%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-6b87e69f><div><h2 id="基础语法" tabindex="-1">基础语法 <a class="header-anchor" href="#基础语法" aria-label="Permalink to &quot;基础语法&quot;">​</a></h2><h3 id="一、基础类型" tabindex="-1">一、基础类型 <a class="header-anchor" href="#一、基础类型" aria-label="Permalink to &quot;一、基础类型&quot;">​</a></h3><h4 id="js类型" tabindex="-1">JS类型 <a class="header-anchor" href="#js类型" aria-label="Permalink to &quot;JS类型&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">boolean</span></span>
+<span class="line"><span style="color:#BD976A;">number</span></span>
+<span class="line"><span style="color:#BD976A;">string</span></span>
+<span class="line"><span style="color:#BD976A;">array</span></span>
+<span class="line"><span style="color:#BD976A;">object</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//对象: {}、 function(){}</span></span>
+<span class="line"><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#CB7676;">undefined</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//默认情况下null和undefined是所有类型的子类型。可以赋值给其他类型</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">boolean</span></span>
+<span class="line"><span style="color:#B07D48;">number</span></span>
+<span class="line"><span style="color:#B07D48;">string</span></span>
+<span class="line"><span style="color:#B07D48;">array</span></span>
+<span class="line"><span style="color:#B07D48;">object</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//对象: {}、 function(){}</span></span>
+<span class="line"><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#AB5959;">undefined</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//默认情况下null和undefined是所有类型的子类型。可以赋值给其他类型</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><strong>object 类型常见用法</strong></p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//1.严格要求</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#CB7676;"> </span><span style="color:#666666;">:{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> ,</span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= { </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">age </span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//1.严格要求</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#AB5959;"> </span><span style="color:#999999;">:{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> ,</span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">= { </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">age </span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span><span style="color:#999999;">}</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//2.可选</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#CB7676;"> </span><span style="color:#666666;">:{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> ,</span><span style="color:#BD976A;">age</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= { </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsna </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//2.可选</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#AB5959;"> </span><span style="color:#999999;">:{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> ,</span><span style="color:#B07D48;">age</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">= { </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsna </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//3.多个可选</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#CB7676;"> </span><span style="color:#666666;">:{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> ,[</span><span style="color:#BD976A;">porname</span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;">]:</span><span style="color:#5DA994;">string</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= { </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsna </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">上海</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">gender</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">男</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//3.多个可选</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#AB5959;"> </span><span style="color:#999999;">:{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> ,[</span><span style="color:#B07D48;">porname</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">]:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">= { </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsna </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">上海</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">gender</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">男</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//4.箭头函数设置函数结构</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#80A665;">d</span><span style="color:#666666;">: (</span><span style="color:#BD976A;">c</span><span style="color:#666666;">:</span><span style="color:#5DA994;">number</span><span style="color:#666666;">,</span><span style="color:#BD976A;">d</span><span style="color:#666666;">:</span><span style="color:#5DA994;">number</span><span style="color:#666666;">)=&gt;</span><span style="color:#5DA994;">number</span></span>
+<span class="line"><span style="color:#80A665;">d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">n2</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n1</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">n2</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//4.箭头函数设置函数结构</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#59873A;">d</span><span style="color:#999999;">: (</span><span style="color:#B07D48;">c</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">,</span><span style="color:#B07D48;">d</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">)=&gt;</span><span style="color:#2E8F82;">number</span></span>
+<span class="line"><span style="color:#59873A;">d</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">n2</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n1</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">n2</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><strong>数组</strong></p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">[] 	</span><span style="color:#758575DD;">//字符串数组 arr = [&#39;zhansan&#39;,&#39;lisi&#39;]</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Array</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">number</span><span style="color:#666666;">&gt;	</span><span style="color:#758575DD;">//数值数组 arr1 = [1,2,3,4,5]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">[] 	</span><span style="color:#A0ADA0;">//字符串数组 arr = [&#39;zhansan&#39;,&#39;lisi&#39;]</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">&gt;	</span><span style="color:#A0ADA0;">//数值数组 arr1 = [1,2,3,4,5]</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><strong>元组</strong></p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">h</span><span style="color:#666666;">: [</span><span style="color:#5DA994;">string</span><span style="color:#666666;"> ,</span><span style="color:#5DA994;">number</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#BD976A;">h</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hello</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">123</span><span style="color:#666666;">]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">h</span><span style="color:#999999;">: [</span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> ,</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#B07D48;">h</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hello</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">123</span><span style="color:#999999;">]</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><strong>枚举</strong></p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">enum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Red</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Green</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Blue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">c</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Color</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">Color</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Green</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//c为2</span></span>
+<span class="line"><span style="color:#BD976A;">Color</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// Green 枚举的值得到它的名字</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">enum</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Color</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Red</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Green</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Blue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">c</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Color</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">Color</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Green</span><span style="color:#999999;">;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//c为2</span></span>
+<span class="line"><span style="color:#B07D48;">Color</span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// Green 枚举的值得到它的名字</span></span></code></pre></div><h4 id="ts新增类型" tabindex="-1">TS新增类型 <a class="header-anchor" href="#ts新增类型" aria-label="Permalink to &quot;TS新增类型&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">字面量</span><span style="color:#DBD7CAEE;">	  </span><span style="color:#758575DD;">//限制类型在几个值之间（联合类型）例：let b : &#39;male&#39;|&#39;amale&#39; 、 </span></span>
+<span class="line"><span style="color:#BD976A;">enum</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//枚举类型</span></span>
+<span class="line"><span style="color:#BD976A;">tuple</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//元组 [string, number];</span></span>
+<span class="line"><span style="color:#CB7676;">void</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//表示没有返回值，不返回或返回undefined，和其他类型平等关系，不能直接赋值给其他类型	</span></span>
+<span class="line"><span style="color:#BD976A;">Any</span><span style="color:#DBD7CAEE;">		</span><span style="color:#758575DD;">//任意类型</span></span>
+<span class="line"><span style="color:#BD976A;">unknown</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//未知类型 </span></span>
+<span class="line"><span style="color:#BD976A;">never</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//永远不返回结果，没有类型是never的子类型、没有类型可以赋值给never类型（除了never本身之外）</span></span>
+<span class="line"><span style="color:#758575DD;">//函数用于执行不到返回值那一步，(抛出异常或死循环)的返回值类型</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">字面量</span><span style="color:#393A34;">	  </span><span style="color:#A0ADA0;">//限制类型在几个值之间（联合类型）例：let b : &#39;male&#39;|&#39;amale&#39; 、 </span></span>
+<span class="line"><span style="color:#B07D48;">enum</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//枚举类型</span></span>
+<span class="line"><span style="color:#B07D48;">tuple</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//元组 [string, number];</span></span>
+<span class="line"><span style="color:#AB5959;">void</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//表示没有返回值，不返回或返回undefined，和其他类型平等关系，不能直接赋值给其他类型	</span></span>
+<span class="line"><span style="color:#B07D48;">Any</span><span style="color:#393A34;">		</span><span style="color:#A0ADA0;">//任意类型</span></span>
+<span class="line"><span style="color:#B07D48;">unknown</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//未知类型 </span></span>
+<span class="line"><span style="color:#B07D48;">never</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//永远不返回结果，没有类型是never的子类型、没有类型可以赋值给never类型（除了never本身之外）</span></span>
+<span class="line"><span style="color:#A0ADA0;">//函数用于执行不到返回值那一步，(抛出异常或死循环)的返回值类型</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><code>unknown</code>与<code>any</code>区别</p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">a</span><span style="color:#666666;">: </span><span style="color:#5DA994;">any</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> </span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// OK  any类型可以赋值任意类型</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">a</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">any</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> </span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// OK  any类型可以赋值任意类型</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">e</span><span style="color:#666666;">: </span><span style="color:#5DA994;">unknown</span></span>
+<span class="line"><span style="color:#BD976A;">e</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">TypeScript</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">f</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span></span>
+<span class="line"><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">//Error 未知类型不能直接赋值给其他变量（类型安全的any）</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//处理方式一：</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">e</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">string</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//处理方式二：类型断言</span></span>
+<span class="line"><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">string</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">e</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">unknown</span></span>
+<span class="line"><span style="color:#B07D48;">e</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">TypeScript</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">f</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">//Error 未知类型不能直接赋值给其他变量（类型安全的any）</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//处理方式一：</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">e</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">string</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//处理方式二：类型断言</span></span>
+<span class="line"><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">as</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">string</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><code>|</code>和<code>&amp;</code> ：表示或，&amp;：表示且</p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">g</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> | </span><span style="color:#5DA994;">boolean</span></span>
+<span class="line"><span style="color:#BD976A;">g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">sdfj</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">h</span><span style="color:#CB7676;"> </span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;"> &amp; </span><span style="color:#5DA994;">number</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">i</span><span style="color:#666666;">: {</span><span style="color:#BD976A;">name</span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;">} &amp;{</span><span style="color:#BD976A;">age</span><span style="color:#666666;">:</span><span style="color:#5DA994;">number</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">h hh</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">g</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> | </span><span style="color:#2E8F82;">boolean</span></span>
+<span class="line"><span style="color:#B07D48;">g</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">sdfj</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">g</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">h</span><span style="color:#AB5959;"> </span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> &amp; </span><span style="color:#2E8F82;">number</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">i</span><span style="color:#999999;">: {</span><span style="color:#B07D48;">name</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">} &amp;{</span><span style="color:#B07D48;">age</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">= {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">h hh</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="二、类型声名" tabindex="-1">二、类型声名 <a class="header-anchor" href="#二、类型声名" aria-label="Permalink to &quot;二、类型声名&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">name</span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;">	 </span><span style="color:#758575DD;">//声名string类型变量</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">age</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">19</span><span style="color:#CB7676;">	 </span><span style="color:#758575DD;">//类型声名可省略，会自动类型推断，age推断为number</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">name</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">	 </span><span style="color:#A0ADA0;">//声名string类型变量</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">age</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">19</span><span style="color:#AB5959;">	 </span><span style="color:#A0ADA0;">//类型声名可省略，会自动类型推断，age推断为number</span></span></code></pre></div><h3 id="三、as-const-断言" tabindex="-1">三、as const 断言 <a class="header-anchor" href="#三、as-const-断言" aria-label="Permalink to &quot;三、as const 断言&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">a</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">99</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">const</span><span style="color:#CB7676;"> 	</span><span style="color:#758575DD;">//a值只能为99,指定明确的值、类型</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">asfghj</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">obj</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#BD976A;">b</span><span style="color:#666666;">,		</span><span style="color:#758575DD;">//值只能为string</span></span>
+<span class="line"><span style="color:#666666;">}</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> const</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">a</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">99</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">const</span><span style="color:#AB5959;"> 	</span><span style="color:#A0ADA0;">//a值只能为99,指定明确的值、类型</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">asfghj</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">obj</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B07D48;">b</span><span style="color:#999999;">,		</span><span style="color:#A0ADA0;">//值只能为string</span></span>
+<span class="line"><span style="color:#999999;">}</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> const</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">x</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">1024</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">y</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2048</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">arr</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#BD976A;">y</span><span style="color:#666666;">]</span><span style="color:#CB7676;"> 	</span><span style="color:#758575DD;">// arr[1]类型是 number|string</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">arr</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#BD976A;">y</span><span style="color:#666666;">]</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">const</span><span style="color:#CB7676;"> 	</span><span style="color:#758575DD;">// 指定为元组，arr[1]类型只能为 number</span></span>
+<span class="line"><span style="color:#758575DD;">//同：let arr = &lt;const&gt;[x,y]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">x</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">1024</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">y</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2048</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">arr</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#B07D48;">y</span><span style="color:#999999;">]</span><span style="color:#AB5959;"> 	</span><span style="color:#A0ADA0;">// arr[1]类型是 number|string</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">arr</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#B07D48;">y</span><span style="color:#999999;">]</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">const</span><span style="color:#AB5959;"> 	</span><span style="color:#A0ADA0;">// 指定为元组，arr[1]类型只能为 number</span></span>
+<span class="line"><span style="color:#A0ADA0;">//同：let arr = &lt;const&gt;[x,y]</span></span></code></pre></div><h2 id="面对对象" tabindex="-1">面对对象 <a class="header-anchor" href="#面对对象" aria-label="Permalink to &quot;面对对象&quot;">​</a></h2><h3 id="一、类" tabindex="-1">一、类 <a class="header-anchor" href="#一、类" aria-label="Permalink to &quot;一、类&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">类名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">属性名</span><span style="color:#666666;">: </span><span style="color:#5DA994;">类型</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">参数</span><span style="color:#666666;">: </span><span style="color:#5DA994;">类型</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">属性名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">参数</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">方法名</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">....</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">类名</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">属性名</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">类型</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">参数</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">类型</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">属性名</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">参数</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">方法名</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">....</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>栗子:</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#666666;">${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">大家好，我是</span><span style="color:#999999;">${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><h4 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;">​</a></h4><blockquote><p><strong>注1：在TS中只能有一个构造器方法！</strong></p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p><strong>注2：子类继承父类时，必须调用父类的构造方法（如果子类中也定义了构造方法）！</strong></p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">A</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">protected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">X</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">A</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">protected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">A</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">protected</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">X</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">A</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">protected</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="二、封装" tabindex="-1">二、封装 <a class="header-anchor" href="#二、封装" aria-label="Permalink to &quot;二、封装&quot;">​</a></h3><ul><li><p>静态属性（static）：</p><ul><li>声明为static的属性或方法不再属于实例，而是属于类的属性；</li></ul></li><li><p>只读属性（readonly）：</p><ul><li>如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改</li></ul></li><li><p>TS中属性具有三种修饰符：</p><ul><li>public（默认值），可以在类、子类和对象中修改</li><li>protected ，可以在类、子类中修改</li><li>private ，可以在类中修改</li></ul></li></ul><details class="details custom-block"><summary>public</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">public</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 写或什么都不写都是public</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">public</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 可以在类中修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#666666;">${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Employee</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//子类中可以修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">p</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span><span style="color:#758575DD;">// 可以通过对象修改</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">public</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 写或什么都不写都是public</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">public</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 可以在类中修改</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">大家好，我是</span><span style="color:#999999;">${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Employee</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//子类中可以修改</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">p</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">// 可以通过对象修改</span></span></code></pre></div></details><details class="details custom-block"><summary>protected</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">protected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">protected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 可以修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#666666;">${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Employee</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//子类中可以修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">p</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span><span style="color:#758575DD;">// 不能修改</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">protected</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">protected</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 可以修改</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">大家好，我是</span><span style="color:#999999;">${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Employee</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//子类中可以修改</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">p</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">// 不能修改</span></span></code></pre></div></details><details class="details custom-block"><summary>private</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 可以修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#666666;">${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Employee</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//子类中不能修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">p</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span><span style="color:#758575DD;">// 不能修改</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 可以修改</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">大家好，我是</span><span style="color:#999999;">${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Employee</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//子类中不能修改</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">p</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">// 不能修改</span></span></code></pre></div></details><h3 id="三、属性存取器" tabindex="-1">三、属性存取器 <a class="header-anchor" href="#三、属性存取器" aria-label="Permalink to &quot;三、属性存取器&quot;">​</a></h3><blockquote><p>对于一些不希望被任意修改的属性，可以将其设置为private</p><p>直接将其设置为private将导致无法再通过对象修改其中的属性</p><p>我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器</p><p>读取属性的方法叫做setter方法，设置属性的方法叫做getter方法</p></blockquote><details class="details custom-block"><summary>示例</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">_name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">_name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">name</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">_name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">set</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">name</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">_name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">p1</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// 实际通过调用getter方法读取name属性</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// 实际通过调用setter方法修改name属性 </span></span>
+<span class="line"><span style="color:#BD976A;">p1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">_name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">_name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">get</span><span style="color:#393A34;"> </span><span style="color:#59873A;">name</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">_name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">set</span><span style="color:#393A34;"> </span><span style="color:#59873A;">name</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">_name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">p1</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 实际通过调用getter方法读取name属性</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 实际通过调用setter方法修改name属性 </span></span>
+<span class="line"><span style="color:#B07D48;">p1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span></code></pre></div></details><h4 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-label="Permalink to &quot;静态属性&quot;">​</a></h4><blockquote><p>静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用</p><p>静态属性（方法）使用static开头</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Tools</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PI</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3.1415926</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num1</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num2</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num2</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Tools</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PI</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Tools</span><span style="color:#666666;">.</span><span style="color:#80A665;">sum</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">123</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">456</span><span style="color:#666666;">));</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Tools</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PI</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3.1415926</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num1</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num2</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num2</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Tools</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PI</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Tools</span><span style="color:#999999;">.</span><span style="color:#59873A;">sum</span><span style="color:#999999;">(</span><span style="color:#2F798A;">123</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">456</span><span style="color:#999999;">));</span></span></code></pre></div><h3 id="四、继承" tabindex="-1">四、继承 <a class="header-anchor" href="#四、继承" aria-label="Permalink to &quot;四、继承&quot;">​</a></h3><blockquote><p>通过继承可以将其他类中的属性和方法引入到当前类中，通过继承可以在不修改类的情况下完成对类的扩展</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">bark</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">在汪汪叫！</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">dog</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Dog</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">旺财</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">dog</span><span style="color:#666666;">.</span><span style="color:#80A665;">bark</span><span style="color:#666666;">();</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Dog</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">bark</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#999999;">${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">在汪汪叫！</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">dog</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Dog</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">旺财</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">dog</span><span style="color:#999999;">.</span><span style="color:#59873A;">bark</span><span style="color:#999999;">();</span></span></code></pre></div><h4 id="重写" tabindex="-1">重写 <a class="header-anchor" href="#重写" aria-label="Permalink to &quot;重写&quot;">​</a></h4><blockquote><p>发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">run</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">父类中的run方法！</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">bark</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">在汪汪叫！</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">run</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">子类中的run方法，会重写父类中的run方法！</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">dog</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Dog</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">旺财</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">dog</span><span style="color:#666666;">.</span><span style="color:#80A665;">bark</span><span style="color:#666666;">();</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">run</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">父类中的run方法！</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Dog</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">bark</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#999999;">${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">在汪汪叫！</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">run</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">子类中的run方法，会重写父类中的run方法！</span><span style="color:#B5695999;">`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">dog</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Dog</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">旺财</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">dog</span><span style="color:#999999;">.</span><span style="color:#59873A;">bark</span><span style="color:#999999;">();</span></span></code></pre></div><h3 id="五、抽象类-abstract-class" tabindex="-1">五、抽象类（abstract class） <a class="header-anchor" href="#五、抽象类-abstract-class" aria-label="Permalink to &quot;五、抽象类（abstract class）&quot;">​</a></h3><blockquote><p>抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例，用于抽取类的共同特点</p><p>使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现;</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">abstract</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">abstract</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">run</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">bark</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">动物在叫~</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Animals</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">run</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">狗在跑~</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">abstract</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">abstract</span><span style="color:#393A34;"> </span><span style="color:#59873A;">run</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">bark</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">动物在叫~</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Dog</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Animals</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">run</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">狗在跑~</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="六、接口" tabindex="-1">六、接口 <a class="header-anchor" href="#六、接口" aria-label="Permalink to &quot;六、接口&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//用于类型检查</span></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">firstName</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">lastName</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">address</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//可选属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">readonly</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//只读属性</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">greeter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">person</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Hello, </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">person</span><span style="color:#666666;">.</span><span style="color:#BD976A;">firstName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">person</span><span style="color:#666666;">.</span><span style="color:#BD976A;">lastName</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//用于类型检查</span></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">firstName</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">lastName</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">address</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//可选属性</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">readonly</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//只读属性</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">greeter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">person</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Hello, </span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">person</span><span style="color:#999999;">.</span><span style="color:#B07D48;">firstName</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">person</span><span style="color:#999999;">.</span><span style="color:#B07D48;">lastName</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="基本配置" tabindex="-1">基本配置 <a class="header-anchor" href="#基本配置" aria-label="Permalink to &quot;基本配置&quot;">​</a></h2><h3 id="一、ts编译配置" tabindex="-1">一、TS编译配置 <a class="header-anchor" href="#一、ts编译配置" aria-label="Permalink to &quot;一、TS编译配置&quot;">​</a></h3><blockquote><p><strong>但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json</strong></p></blockquote><details class="details custom-block"><summary>tsconfig.json详细配置</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#758575DD;">/* </span></span>
+<span class="line"><span style="color:#758575DD;">    tsconfig.json 是ts编译器的配置文件，ts编译器可以更具它的信息来对代码进行编译</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;include&quot; 用来表示指定哪些ts文件需要被编译</span></span>
+<span class="line"><span style="color:#758575DD;">        路径：</span></span>
+<span class="line"><span style="color:#758575DD;">            *表示任意文件，</span></span>
+<span class="line"><span style="color:#758575DD;">            **表示任意目录</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;exclude&quot; 用来表示不需要被编译的文件目录</span></span>
+<span class="line"><span style="color:#758575DD;">            默认值：{&quot;node_modules&quot;, &quot;bower_components&quot;, &quot;jspm_packages&quot;}</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">include</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./src/**/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// &quot;exclude&quot;: [</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     &quot;./src/hello/**/*&quot;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#758575DD;">/*</span></span>
+<span class="line"><span style="color:#758575DD;">        被继承的配置文件</span></span>
+<span class="line"><span style="color:#758575DD;">        例如：&quot;extends&quot;: &quot;。/configs/base&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">      */</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//  &quot;extends&quot;: &quot;&quot;,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#758575DD;">/*</span></span>
+<span class="line"><span style="color:#758575DD;">        指定被编译文件的列表，只有需要编译的文件少时才会用到</span></span>
+<span class="line"><span style="color:#758575DD;">      */</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  &quot;files&quot;: [],</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//compilerOptions 编译器的选项 </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">compilerOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//target 用来指定ts被编译为ES的版本</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//&#39;es3&#39;, &#39;es5&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es2016&#39;, &#39;es2017&#39;, &#39;es2018&#39;, &#39;es2019&#39;, &#39;es2020&#39;, &#39;esnext&#39;.</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">target</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ES2015</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//module 指定要使用的模块化的规范</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//&#39;none&#39;, &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es2020&#39;, &#39;esnext&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">module</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">es2015</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//lib 用来指定项目所用的库</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#758575DD;">/* &#39;es5&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es7&#39;, &#39;es2016&#39;, &#39;es2017&#39;, &#39;es2018&#39;, &#39;es2019&#39;, &#39;es2020&#39;, &#39;esnext&#39;, &#39;dom&#39;, </span></span>
+<span class="line"><span style="color:#758575DD;">       &#39;dom.iterable&#39;, &#39;webworker&#39;, &#39;webworker.importscripts&#39;, &#39;webworker.iterable&#39;, &#39;scripthost&#39;, &#39;es2015.core&#39;, &#39;es2015.collection&#39;, </span></span>
+<span class="line"><span style="color:#758575DD;">          &#39;es2015.generator&#39;, &#39;es2015.iterable&#39;, &#39;es2015.promise&#39;, &#39;es2015.proxy&#39;, &#39;es2015.reflect&#39;, &#39;es2015.symbol&#39;, &#39;es2015.symbol.wellknown&#39;, &#39;es2016.array.include&#39;,</span></span>
+<span class="line"><span style="color:#758575DD;">          &#39;es2017.object&#39;, &#39;es2017.sharedmemory&#39;, &#39;es2017.string&#39;, &#39;es2017.intl&#39;, &#39;es2017.typedarrays&#39;, &#39;es2018.asyncgenerator&#39;, &#39;es2018.asynciterable&#39;, &#39;es2018.intl&#39;, </span></span>
+<span class="line"><span style="color:#758575DD;">         &#39;es2018.promise&#39;, &#39;es2018.regexp&#39;, &#39;es2019.array&#39;, &#39;es2019.object&#39;, &#39;es2019.string&#39;, &#39;es2019.symbol&#39;, &#39;es2020.bigint&#39;, &#39;es2020.promise&#39;, </span></span>
+<span class="line"><span style="color:#758575DD;">         &#39;es2020.sharedmemory&#39;, &#39;es2020.string&#39;, &#39;es2020.symbol.wellknown&#39;, &#39;es2020.intl&#39;, &#39;esnext.array&#39;, &#39;esnext.symbol&#39;, &#39;esnext.asynciterable&#39;, &#39;esnext.intl&#39;, */</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//outDir 用来指定编译后文件所在的目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">outDir</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./dist</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//outFile 将代码合并为一个文件</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// &quot;outFile&quot;: &quot;./dist/app.js&quot;,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 是否对js文件进行编译，默认是false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">allowJs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 是否检查js代码是否符合语法规范，默认值是false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">checkJs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 是否移除注释</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">removeComments</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 不生成编译后的文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">noEmit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 当有错误时不生成编译文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">noEmitOnError</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 所有严格检查的总开关</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">strict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 用来设置编译后的文件是否使用严格模式，默认是false</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 在ES6中的模块化会自动使用严格模式，而无需在文件开头添加`&#39;use strict&#39;`</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">alwaysStrict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 不允许隐式的any类型</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">noImplicitAny</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 不允许不明确类型的this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">noImplicitThis</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 严格检查空值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">strictNullChecks</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#A0ADA0;">/* </span></span>
+<span class="line"><span style="color:#A0ADA0;">    tsconfig.json 是ts编译器的配置文件，ts编译器可以更具它的信息来对代码进行编译</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;include&quot; 用来表示指定哪些ts文件需要被编译</span></span>
+<span class="line"><span style="color:#A0ADA0;">        路径：</span></span>
+<span class="line"><span style="color:#A0ADA0;">            *表示任意文件，</span></span>
+<span class="line"><span style="color:#A0ADA0;">            **表示任意目录</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;exclude&quot; 用来表示不需要被编译的文件目录</span></span>
+<span class="line"><span style="color:#A0ADA0;">            默认值：{&quot;node_modules&quot;, &quot;bower_components&quot;, &quot;jspm_packages&quot;}</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">include</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./src/**/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// &quot;exclude&quot;: [</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     &quot;./src/hello/**/*&quot;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ]</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#A0ADA0;">/*</span></span>
+<span class="line"><span style="color:#A0ADA0;">        被继承的配置文件</span></span>
+<span class="line"><span style="color:#A0ADA0;">        例如：&quot;extends&quot;: &quot;。/configs/base&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">      */</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//  &quot;extends&quot;: &quot;&quot;,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A0ADA0;">/*</span></span>
+<span class="line"><span style="color:#A0ADA0;">        指定被编译文件的列表，只有需要编译的文件少时才会用到</span></span>
+<span class="line"><span style="color:#A0ADA0;">      */</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  &quot;files&quot;: [],</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//compilerOptions 编译器的选项 </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">compilerOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//target 用来指定ts被编译为ES的版本</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//&#39;es3&#39;, &#39;es5&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es2016&#39;, &#39;es2017&#39;, &#39;es2018&#39;, &#39;es2019&#39;, &#39;es2020&#39;, &#39;esnext&#39;.</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">target</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ES2015</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//module 指定要使用的模块化的规范</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//&#39;none&#39;, &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es2020&#39;, &#39;esnext&#39;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">module</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">es2015</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//lib 用来指定项目所用的库</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#A0ADA0;">/* &#39;es5&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es7&#39;, &#39;es2016&#39;, &#39;es2017&#39;, &#39;es2018&#39;, &#39;es2019&#39;, &#39;es2020&#39;, &#39;esnext&#39;, &#39;dom&#39;, </span></span>
+<span class="line"><span style="color:#A0ADA0;">       &#39;dom.iterable&#39;, &#39;webworker&#39;, &#39;webworker.importscripts&#39;, &#39;webworker.iterable&#39;, &#39;scripthost&#39;, &#39;es2015.core&#39;, &#39;es2015.collection&#39;, </span></span>
+<span class="line"><span style="color:#A0ADA0;">          &#39;es2015.generator&#39;, &#39;es2015.iterable&#39;, &#39;es2015.promise&#39;, &#39;es2015.proxy&#39;, &#39;es2015.reflect&#39;, &#39;es2015.symbol&#39;, &#39;es2015.symbol.wellknown&#39;, &#39;es2016.array.include&#39;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">          &#39;es2017.object&#39;, &#39;es2017.sharedmemory&#39;, &#39;es2017.string&#39;, &#39;es2017.intl&#39;, &#39;es2017.typedarrays&#39;, &#39;es2018.asyncgenerator&#39;, &#39;es2018.asynciterable&#39;, &#39;es2018.intl&#39;, </span></span>
+<span class="line"><span style="color:#A0ADA0;">         &#39;es2018.promise&#39;, &#39;es2018.regexp&#39;, &#39;es2019.array&#39;, &#39;es2019.object&#39;, &#39;es2019.string&#39;, &#39;es2019.symbol&#39;, &#39;es2020.bigint&#39;, &#39;es2020.promise&#39;, </span></span>
+<span class="line"><span style="color:#A0ADA0;">         &#39;es2020.sharedmemory&#39;, &#39;es2020.string&#39;, &#39;es2020.symbol.wellknown&#39;, &#39;es2020.intl&#39;, &#39;esnext.array&#39;, &#39;esnext.symbol&#39;, &#39;esnext.asynciterable&#39;, &#39;esnext.intl&#39;, */</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//outDir 用来指定编译后文件所在的目录</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">outDir</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./dist</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//outFile 将代码合并为一个文件</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// &quot;outFile&quot;: &quot;./dist/app.js&quot;,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 是否对js文件进行编译，默认是false</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">allowJs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 是否检查js代码是否符合语法规范，默认值是false</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">checkJs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 是否移除注释</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">removeComments</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 不生成编译后的文件</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">noEmit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 当有错误时不生成编译文件</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">noEmitOnError</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 所有严格检查的总开关</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">strict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 用来设置编译后的文件是否使用严格模式，默认是false</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 在ES6中的模块化会自动使用严格模式，而无需在文件开头添加`&#39;use strict&#39;`</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">alwaysStrict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 不允许隐式的any类型</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">noImplicitAny</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 不允许不明确类型的this</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">noImplicitThis</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 严格检查空值</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">strictNullChecks</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h3 id="二、webpack整合" tabindex="-1">二、webpack整合 <a class="header-anchor" href="#二、webpack整合" aria-label="Permalink to &quot;二、webpack整合&quot;">​</a></h3><p>步骤如下：</p><h4 id="_1-初始化项目" tabindex="-1">1. 初始化项目 <a class="header-anchor" href="#_1-初始化项目" aria-label="Permalink to &quot;1. 初始化项目&quot;">​</a></h4><p>进入项目根目录，执行命令 <code>npm init -y</code>，创建package.json文件</p><h4 id="_2-下载构建工具" tabindex="-1">2. 下载构建工具 <a class="header-anchor" href="#_2-下载构建工具" aria-label="Permalink to &quot;2. 下载构建工具&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">webpack</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">webpack-cli</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">webpack-dev-server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">typescript</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ts-loader</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">clean-webpack-plugin</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">i</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span><span style="color:#393A34;"> </span><span style="color:#B56959;">webpack</span><span style="color:#393A34;"> </span><span style="color:#B56959;">webpack-cli</span><span style="color:#393A34;"> </span><span style="color:#B56959;">webpack-dev-server</span><span style="color:#393A34;"> </span><span style="color:#B56959;">typescript</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ts-loader</span><span style="color:#393A34;"> </span><span style="color:#B56959;">clean-webpack-plugin</span></span></code></pre></div><h4 id="_3-配置webpack" tabindex="-1">3. 配置webpack <a class="header-anchor" href="#_3-配置webpack" aria-label="Permalink to &quot;3. 配置webpack&quot;">​</a></h4><details class="details custom-block"><summary>webpack.config.js详细配置</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 引入一个包</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// 引入html插件</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">HTMLWebpackPlugin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">html-webpack-plugin</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">//引入clean插件</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">CleanWebpackPlugin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">clean-webpack-plugin</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// npm init -y 初始化 创建package.json文件</span></span>
+<span class="line"><span style="color:#758575DD;">// npm i -D webpack webpack-cli typescript ts-loader  安装四个依赖</span></span>
+<span class="line"><span style="color:#758575DD;">// 编写webpack配置文件</span></span>
+<span class="line"><span style="color:#758575DD;">// 编写tsconfig.json文件</span></span>
+<span class="line"><span style="color:#758575DD;">// 修改package.json中加上build命令</span></span>
+<span class="line"><span style="color:#758575DD;">// npm i -D html-webpack-plugin //自动生成html</span></span>
+<span class="line"><span style="color:#758575DD;">// npm i -D webpack-dev-server //自动响应浏览器更新</span></span>
+<span class="line"><span style="color:#758575DD;">// npm i -D clean-webpack-plugin //清楚dist目录旧文件</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//webpack 中所有的配置信息都应该写在module.exports中</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 指定入口文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">entry</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./src/index.ts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 指定打包文件所在目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">output</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//指定打包文件的目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">path</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dist</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//打包后文件的名字</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">filename</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">bundle.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//告诉webpack不使用箭头函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">environment</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">arrowFunction</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//指定webpack打包时要使用的模块</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">module</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 指定要loader加载的规则</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">rules</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// test指定的时规则生效的文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">test</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\.</span><span style="color:#C4704F;">ts</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//以ts结尾的文件</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// 要使用的loader</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">use</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// 配置babel</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                        </span><span style="color:#758575DD;">//指定加载器</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#B8A965;">loader</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">babel-loader</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                        </span><span style="color:#758575DD;">// 设置babel</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#B8A965;">options</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                            </span><span style="color:#758575DD;">//设置预定义的环境</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#B8A965;">presets</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#666666;">                                    </span><span style="color:#758575DD;">//指定环境的插件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@babel/preset-env</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                                    </span><span style="color:#758575DD;">// 配置信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                                        </span><span style="color:#758575DD;">// 要兼容的目标浏览器及版本</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#B8A965;">targets</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                            </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">chrome</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">58</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                            </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ie</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">11</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">                                        </span><span style="color:#758575DD;">//指定corejs的版本</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">corejs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">3</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                                        </span><span style="color:#758575DD;">//使用corejs的方式 &quot;usage&quot;  表示按需加载</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">useBuiltIns</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">usage</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// &#39;babel-loader&#39;,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ts-loader</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// 要排除的文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">exclude</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">node-modules</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//配置Webpack 插件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">plugins</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">CleanWebpackPlugin</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">HTMLWebpackPlugin</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">// title: &quot;这是一个自定义的title&quot;、</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">template</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./src/index.html</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 用来设置引用模块，可以将这些文件识别为模块</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">resolve</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">extensions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.js</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 引入一个包</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 引入html插件</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">HTMLWebpackPlugin</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">html-webpack-plugin</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">//引入clean插件</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">CleanWebpackPlugin</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">clean-webpack-plugin</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// npm init -y 初始化 创建package.json文件</span></span>
+<span class="line"><span style="color:#A0ADA0;">// npm i -D webpack webpack-cli typescript ts-loader  安装四个依赖</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 编写webpack配置文件</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 编写tsconfig.json文件</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 修改package.json中加上build命令</span></span>
+<span class="line"><span style="color:#A0ADA0;">// npm i -D html-webpack-plugin //自动生成html</span></span>
+<span class="line"><span style="color:#A0ADA0;">// npm i -D webpack-dev-server //自动响应浏览器更新</span></span>
+<span class="line"><span style="color:#A0ADA0;">// npm i -D clean-webpack-plugin //清楚dist目录旧文件</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//webpack 中所有的配置信息都应该写在module.exports中</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 指定入口文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">entry</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./src/index.ts</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 指定打包文件所在目录</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">output</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//指定打包文件的目录</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">path</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dist</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//打包后文件的名字</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">filename</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">bundle.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//告诉webpack不使用箭头函数</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">environment</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">arrowFunction</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//指定webpack打包时要使用的模块</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">module</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 指定要loader加载的规则</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">rules</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// test指定的时规则生效的文件</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">test</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\.</span><span style="color:#AB5E3F;">ts</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//以ts结尾的文件</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// 要使用的loader</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">use</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// 配置babel</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                        </span><span style="color:#A0ADA0;">//指定加载器</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#998418;">loader</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">babel-loader</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                        </span><span style="color:#A0ADA0;">// 设置babel</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#998418;">options</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                            </span><span style="color:#A0ADA0;">//设置预定义的环境</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#998418;">presets</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#999999;">                                    </span><span style="color:#A0ADA0;">//指定环境的插件</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@babel/preset-env</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                                    </span><span style="color:#A0ADA0;">// 配置信息</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                                        </span><span style="color:#A0ADA0;">// 要兼容的目标浏览器及版本</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#998418;">targets</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                                            </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">chrome</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">58</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                                            </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ie</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">11</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">                                        </span><span style="color:#A0ADA0;">//指定corejs的版本</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">corejs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">3</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                                        </span><span style="color:#A0ADA0;">//使用corejs的方式 &quot;usage&quot;  表示按需加载</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">useBuiltIns</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">usage</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// &#39;babel-loader&#39;,</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ts-loader</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// 要排除的文件</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">exclude</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">node-modules</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//配置Webpack 插件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">plugins</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">CleanWebpackPlugin</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">HTMLWebpackPlugin</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">// title: &quot;这是一个自定义的title&quot;、</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">template</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./src/index.html</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 用来设置引用模块，可以将这些文件识别为模块</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">resolve</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">extensions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.js</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h4 id="_4-配置ts编译选项" tabindex="-1">4.配置TS编译选项 <a class="header-anchor" href="#_4-配置ts编译选项" aria-label="Permalink to &quot;4.配置TS编译选项&quot;">​</a></h4><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">compilerOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">target</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ES2015</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">module</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ES2015</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">strict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">compilerOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">target</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ES2015</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">module</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ES2015</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">strict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_5-修改package-json配置" tabindex="-1">5 .修改package.json配置 <a class="header-anchor" href="#_5-修改package-json配置" aria-label="Permalink to &quot;5 .修改package.json配置&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">scripts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;"> {</span></span>
+<span class="line"><span style="color:#666666;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">test</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">echo </span><span style="color:#C99076;">\&quot;</span><span style="color:#C98A7D;">Error: no test specified</span><span style="color:#C99076;">\&quot;</span><span style="color:#C98A7D;"> &amp;&amp; exit 1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">build</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">webpack</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line highlighted"><span style="color:#666666;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">start</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">webpack serve --open chrome.exe</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//使用chrome启动</span></span>
+<span class="line"><span style="color:#666666;">   },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">scripts</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">:</span><span style="color:#999999;"> {</span></span>
+<span class="line"><span style="color:#999999;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">test</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">echo </span><span style="color:#A65E2B;">\&quot;</span><span style="color:#B56959;">Error: no test specified</span><span style="color:#A65E2B;">\&quot;</span><span style="color:#B56959;"> &amp;&amp; exit 1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">build</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">webpack</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line highlighted"><span style="color:#999999;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">start</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">webpack serve --open chrome.exe</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//使用chrome启动</span></span>
+<span class="line"><span style="color:#999999;">   },</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_6-项目使用" tabindex="-1">6.项目使用 <a class="header-anchor" href="#_6-项目使用" aria-label="Permalink to &quot;6.项目使用&quot;">​</a></h4><p>在src下创建ts文件，并在并命令行执行<code>npm run build</code>对代码进行编译；</p><p>或者执行<code>npm start</code>来启动开发服务器；</p><h4 id="_7-babel" tabindex="-1">7.Babel <a class="header-anchor" href="#_7-babel" aria-label="Permalink to &quot;7.Babel&quot;">​</a></h4><div class="warning custom-block"><p class="custom-block-title">Babel作用</p><p>虽然TS在编译时也支持代码转换，但是只支持简单的代码转换；</p><p>对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换；</p></div><p><strong>7.1 安装依赖包：</strong></p><p><code>npm i -D @babel/core @babel/preset-env babel-loader core-js</code></p><p>共安装了4个包，分别是：</p><ul><li>@babel/core：babel的核心工具</li><li>@babel/preset-env：babel的预定义环境</li><li>@babel-loader：babel在webpack中的加载器</li><li>core-js：core-js用来使老版本的浏览器支持新版ES语法</li></ul><h4 id="_7-2-修改webpack-config-js配置文件" tabindex="-1">7.2 修改webpack.config.js配置文件 <a class="header-anchor" href="#_7-2-修改webpack-config-js配置文件" aria-label="Permalink to &quot;7.2 修改webpack.config.js配置文件&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#80A665;">module</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">rules</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">test</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\.</span><span style="color:#C4704F;">ts</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">use</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#B8A965;">loader</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">babel-loader</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#B8A965;">options</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#B8A965;">presets</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@babel/preset-env</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//支持的目标版本</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">targets</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">chrome</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">58</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ie</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">11</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">                                    </span><span style="color:#758575DD;">//corejs版本</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">corejs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">3</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">useBuiltIns</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">usage</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#B8A965;">loader</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ts-loader</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">exclude</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">node_modules</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">...</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#59873A;">module</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">rules</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">test</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\.</span><span style="color:#AB5E3F;">ts</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">use</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#998418;">loader</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">babel-loader</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#998418;">options</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#998418;">presets</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@babel/preset-env</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//支持的目标版本</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">targets</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">chrome</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">58</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ie</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">11</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">                                    </span><span style="color:#A0ADA0;">//corejs版本</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">corejs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">3</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">useBuiltIns</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">usage</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#998418;">loader</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ts-loader</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">exclude</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">node_modules</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">...</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/TypeScript/初学笔记.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>自动部署脚本</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>进阶使用技巧</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.html" "b/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.html"
new file mode 100644
index 00000000..53272956
--- /dev/null
+++ "b/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.html"
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_TypeScript_进阶使用技巧.md.21fda5ca.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_TypeScript_%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-6b87e69f><div><h2 id="松散类型自动推推导" tabindex="-1">松散类型自动推推导 <a class="header-anchor" href="#松散类型自动推推导" aria-label="Permalink to &quot;松散类型自动推推导&quot;">​</a></h2><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//1.</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IconProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Size</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 2.</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">string</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IconProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Size</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,但模版中使用失去类型提示</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//3.</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Omit</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IconProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Size</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,保留模版类型提示</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//4.封装为 type</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">LooseAutoComplete</span><span style="color:#666666;">&lt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">LooseAutoComplete</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Omit</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">T</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IconProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Size</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,保留模版类型提示</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//1.</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IconProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Size</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 2.</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IconProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Size</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,但模版中使用失去类型提示</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//3.</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Omit</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IconProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Size</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,保留模版类型提示</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//4.封装为 type</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">LooseAutoComplete</span><span style="color:#999999;">&lt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">LooseAutoComplete</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">T</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">T</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Omit</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">T</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IconProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Size</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,保留模版类型提示</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/TypeScript/进阶使用技巧.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>初学笔记</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>配置文件详解</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.html" "b/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.html"
new file mode 100644
index 00000000..39605b18
--- /dev/null
+++ "b/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.html"
@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Typescript 配置文件（tsconfig.json）解析 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/FrontEnd_TypeScript_配置文件详解.md.7a55465d.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Grid布局学习笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常用代码段</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>揭秘读书摘要</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Git</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Git常用操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Terminal终端美化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置多个平台SSH</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/async%E4%B8%8Eawait" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>async与await</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>代码分支优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习一</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础复习二</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见算法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>手写Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数据去重</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数组求集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>获取目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高阶函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Shell</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自动部署脚本</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>TypeScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>初学笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶使用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>配置文件详解</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_FrontEnd_TypeScript_%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3" data-v-6b87e69f><div><h1 id="typescript-配置文件-tsconfig-json-解析" tabindex="-1">Typescript 配置文件（tsconfig.json）解析 <a class="header-anchor" href="#typescript-配置文件-tsconfig-json-解析" aria-label="Permalink to &quot;Typescript 配置文件（tsconfig.json）解析&quot;">​</a></h1><p>TypeScript带来的类型系统以及强大的IDE支持，让前端开发也变得严谨而流畅。但TypeScript不是原生的Javascript代码，需要进行编译才能转换为Javascript代码。</p><p>tsconfig.json是编译TypeScript的配置文件，对书写TypeScript代码十分重要。因为有些选项如果你没配置，则需要严格按照TypeScript的规则来书写，对初期使用TypeScript的同学而言，稍不留神就会书写出不符合规则的代码，从而导致编译报错，打击自信心。其实早期可以通过关闭一些规则设置，从而更愉快的从js转为ts开发。笔者根据项目实战经历来解释一些常用的编译选项，文末也会附上笔者整理的所有tsconfig.json选项的解释。</p><h2 id="_1-experimentaldecorators" tabindex="-1">1. experimentalDecorators <a class="header-anchor" href="#_1-experimentaldecorators" aria-label="Permalink to &quot;1. experimentalDecorators&quot;">​</a></h2><p><code>是否启用实验性的ES装饰器</code>。boolean类型，默认值：false。<a href="https://www.typescriptlang.org/docs/handbook/decorators.html" target="_blank" rel="noreferrer">官方解释(opens new window)</a></p><p>TypeScript和ES6中引入了Class的概念，同时在<a href="https://github.com/tc39/proposal-decorators" target="_blank" rel="noreferrer">stage 2 proposal (opens new window)</a>提出了Java等服务器端语言早就有的装饰器模式。通过引入装饰器模式，能极大简化书写代码，把一些通用逻辑封装到装饰器中。很多库都有用到该特性，比如vue-class-component 及 vuex-class等库。<strong>当你使用这些库时，必须开启experimentalDecorators</strong>。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">f</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f(): evaluated</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">target</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">propertyKey</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">descriptor</span><span style="color:#666666;">: </span><span style="color:#5DA994;">PropertyDescriptor</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f(): called</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">C</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">@</span><span style="color:#80A665;">f</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">method</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">f</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f(): evaluated</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">target</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">propertyKey</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">descriptor</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">PropertyDescriptor</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f(): called</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">C</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">@</span><span style="color:#59873A;">f</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">method</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>启用 vuex-class同时需要设置<code>strictFunctionTypes</code>选项为false</p></blockquote><h2 id="_2-strictpropertyinitialization" tabindex="-1">2. strictPropertyInitialization <a class="header-anchor" href="#_2-strictpropertyinitialization" aria-label="Permalink to &quot;2. strictPropertyInitialization&quot;">​</a></h2><p><code>是否类的非undefined属性已经在构造函数里初始化</code>。 boolean类型，默认值：false</p><p>直白点，就是所有的属性值，都需要赋有初始值。<strong>建议把strictPropertyInitialization设置为false</strong>，这样就不需要定义一个变量就必须赋有初始值。对使用vuex-class库的同学，建议请把这个值设为false，绝对能省很多事。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Home</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">extend</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Vue</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">jobId</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// 如果开启strictPropertyInitialization，则这里会报错，因为没有赋值默认值</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">method1</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">jobId</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Home</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">extend</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Vue</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">jobId</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// 如果开启strictPropertyInitialization，则这里会报错，因为没有赋值默认值</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">method1</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">jobId</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>如果设置该选项为true，需要同时启用--strictNullChecks或启用--strict</p></blockquote><h2 id="_3-noimplicitany" tabindex="-1">3. noImplicitAny <a class="header-anchor" href="#_3-noimplicitany" aria-label="Permalink to &quot;3. noImplicitAny&quot;">​</a></h2><p><code>有隐含的 any类型时是否报错</code>。boolean值，默认值：false</p><p>ts是有默认推导的，同时还有any类型，所以不是每个变量或参数定义需要明确告知类型是什么。如果开启该值，当有隐含any类型时，会报错。<strong>建议初次上手TypeScript，把该选项设置为false。</strong></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 当开启noImplicitAny时，需要隐含当any需要明确指出</span></span>
+<span class="line"><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// error</span></span>
+<span class="line"><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">: </span><span style="color:#5DA994;">any</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// ok</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 当开启noImplicitAny时，需要隐含当any需要明确指出</span></span>
+<span class="line"><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// error</span></span>
+<span class="line"><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// ok</span></span></code></pre></div><h2 id="_4-target" tabindex="-1">4. target <a class="header-anchor" href="#_4-target" aria-label="Permalink to &quot;4. target&quot;">​</a></h2><p><code>指定编译的ECMAScript目标版本</code>。枚举值：&quot;ES3&quot;， &quot;ES5&quot;， &quot;ES6&quot;/ &quot;ES2015&quot;， &quot;ES2016&quot;， &quot;ES2017&quot;，&quot;ESNext&quot;。默认值： “ES3”</p><p>TypeScript是ES6的超集，所以你可以使用ES6来编写ts代码（通常我们也的确这么做）。然而，当编译ts代码时，可以把ts转为ES5或更早的js代码。所以需要选择一个编译的目标版本。vue-cli3的typescript模板，设置为“ESNext”，因为现代大部分应用项目都会使用Webpack（Parcel也很棒）进行打包，Webpack会把你的代码转换成在所有浏览器中可运行的代码。</p><blockquote><p>target: &quot;ESNext&quot; 是指tc39最新的<a href="https://github.com/tc39/proposals" target="_blank" rel="noreferrer">ES proposed features(opens new window)</a></p></blockquote><h2 id="_5-module" tabindex="-1">5. module <a class="header-anchor" href="#_5-module" aria-label="Permalink to &quot;5. module&quot;">​</a></h2><p><code>指定生成哪个模块系统代码</code>。枚举值：&quot;None&quot;， &quot;CommonJS&quot;， &quot;AMD&quot;， &quot;System&quot;， &quot;UMD&quot;， &quot;ES6&quot;， &quot;ES2015&quot;，&quot;ESNext&quot;。默认值根据--target选项不同而不同，当target设置为ES6时，默认module为“ES6”，否则为“commonjs”</p><p>通常使用ES6的模块来写ts代码，然而2016年1月以前，基本上没有浏览器原生支持ES6的模块系统，所以需要转换为不同的模块系统，如：CommonJS、AMD、SystemJS等，而module选项就是指定编译使用对应的模块系统。</p><h2 id="_6-lib" tabindex="-1">6. lib <a class="header-anchor" href="#_6-lib" aria-label="Permalink to &quot;6. lib&quot;">​</a></h2><p><code>编译过程中需要引入的库文件的列表</code>。string[]类型，可选的值有很多，常用的有ES5，ES6，ESNext，DOM，DOM.Iterable、WebWorker、ScriptHost等。该值默认值是根据--target选项不同而不同。当target为ES5时，默认值为[&#39;DOM &#39;, &#39;ES5&#39;, &#39;ScriptHost&#39;];当target为ES6时，默认值为[&#39;DOM&#39;, &#39;ES6&#39;, &#39;DOM.Iterable&#39;, &#39;ScriptHost&#39;]</p><p>为了在ts代码中使用ES6中的类，比如Array.form、Set、Reflect等，需要设置lib选项，在编译过程中把这些标准库引入。这样在编译过程中，如果遇到属于这些标准库的class或api时，ts编译器不会报错。</p><h2 id="_7-moduleresolution" tabindex="-1">7. moduleResolution <a class="header-anchor" href="#_7-moduleresolution" aria-label="Permalink to &quot;7. moduleResolution&quot;">​</a></h2><p><code>决定如何处理模块</code>。string类型，“node”或者“classic”，默认值：“classic”。<a href="https://www.typescriptlang.org/docs/handbook/module-resolution.html" target="_blank" rel="noreferrer">官方解释(opens new window)</a></p><p>说直白点，也就是遇到import { AAA } from &#39;./aaa&#39;该如何去找对应文件模块解析。对于工程项目，笔者<strong>建议大家使用node</strong>（vue-cli3 ts模板默认设置为node策略），因为这个更符合平时我们的书写习惯以及认知（平时都是webpack打包，webpack又基于node之上）。</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#dbd7caee;">// 在源文件/root/src/A.ts中import { b } from &quot;./moduleB&quot;</span></span>
+<span class="line"><span style="color:#dbd7caee;">// 两种解析方式查找文件方式不同</span></span>
+<span class="line"><span style="color:#dbd7caee;"></span></span>
+<span class="line"><span style="color:#dbd7caee;">// classic模块解析方式</span></span>
+<span class="line"><span style="color:#dbd7caee;">1. /root/src/moduleB.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;">2. /root/src/moduleB.d.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;"></span></span>
+<span class="line"><span style="color:#dbd7caee;">// node模块解析方式</span></span>
+<span class="line"><span style="color:#dbd7caee;">1. /root/src/moduleB.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;">2. /root/src/moduleB.tsx</span></span>
+<span class="line"><span style="color:#dbd7caee;">3. /root/src/moduleB.d.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;">4. /root/src/moduleB/package.json (if it specifies a &quot;types&quot; property)</span></span>
+<span class="line"><span style="color:#dbd7caee;">5. /root/src/moduleB/index.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;">6. /root/src/moduleB/index.tsx</span></span>
+<span class="line"><span style="color:#dbd7caee;">7. /root/src/moduleB/index.d.ts</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393a34;">// 在源文件/root/src/A.ts中import { b } from &quot;./moduleB&quot;</span></span>
+<span class="line"><span style="color:#393a34;">// 两种解析方式查找文件方式不同</span></span>
+<span class="line"><span style="color:#393a34;"></span></span>
+<span class="line"><span style="color:#393a34;">// classic模块解析方式</span></span>
+<span class="line"><span style="color:#393a34;">1. /root/src/moduleB.ts</span></span>
+<span class="line"><span style="color:#393a34;">2. /root/src/moduleB.d.ts</span></span>
+<span class="line"><span style="color:#393a34;"></span></span>
+<span class="line"><span style="color:#393a34;">// node模块解析方式</span></span>
+<span class="line"><span style="color:#393a34;">1. /root/src/moduleB.ts</span></span>
+<span class="line"><span style="color:#393a34;">2. /root/src/moduleB.tsx</span></span>
+<span class="line"><span style="color:#393a34;">3. /root/src/moduleB.d.ts</span></span>
+<span class="line"><span style="color:#393a34;">4. /root/src/moduleB/package.json (if it specifies a &quot;types&quot; property)</span></span>
+<span class="line"><span style="color:#393a34;">5. /root/src/moduleB/index.ts</span></span>
+<span class="line"><span style="color:#393a34;">6. /root/src/moduleB/index.tsx</span></span>
+<span class="line"><span style="color:#393a34;">7. /root/src/moduleB/index.d.ts</span></span></code></pre></div><h2 id="_8-paths" tabindex="-1">8. paths <a class="header-anchor" href="#_8-paths" aria-label="Permalink to &quot;8. paths&quot;">​</a></h2><p><code>模块名或路径映射的列表</code>。Object值</p><p>这是一个非常有用的选项，比如我们经常使用&#39;@/util/help&#39;来代替&#39;./src/util/help&#39;，省的每次在不同层级文件import模块时,都纠结于是&#39;./&#39;还是&#39;../&#39;。该选项告诉编译器遇到匹配的值时，去映射的路径下加载模块。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">baseUrl</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 注意：baseUrl不可少</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">paths</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;"> {</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">// 映射列表</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@/*</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: [</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">      ],</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">moduleA</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: [</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src/libs/moduleA</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">      ]</span></span>
+<span class="line"><span style="color:#666666;">    }</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// in ts code</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Setting</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@/components/Setting.vue</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 模块实际位置: src/components/Setting.vue</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">TestModule</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">moduleA/index.js</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 模块实际位置: src/libs/moduleA/index.js</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">baseUrl</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 注意：baseUrl不可少</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">paths</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">:</span><span style="color:#999999;"> {</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">// 映射列表</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@/*</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: [</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">      ],</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">moduleA</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: [</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src/libs/moduleA</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">      ]</span></span>
+<span class="line"><span style="color:#999999;">    }</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// in ts code</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Setting</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@/components/Setting.vue</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 模块实际位置: src/components/Setting.vue</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">TestModule</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">moduleA/index.js</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 模块实际位置: src/libs/moduleA/index.js</span></span></code></pre></div><h2 id="_9-strictnullchecks" tabindex="-1">9. strictNullChecks <a class="header-anchor" href="#_9-strictnullchecks" aria-label="Permalink to &quot;9. strictNullChecks&quot;">​</a></h2><p><code>是否启用严格的 null检查模式</code>。boolean值，默认值：false</p><p>未处理的null和undefined经常会导致BUG的产生，所以TypeScript包含了strictNullChecks选项来帮助我们减少对这种情况的担忧。当启用了strictNullChecks，null和undefined获得了它们自己各自的类型null和undefined。开启该模式有助于发现并处理可能为undefined的赋值。<strong>如果是正式项目，笔者建议开启该选项；如果只是练手TypeScirpt，可以关闭该选项</strong>，不然所有可能为null/undefined的赋值，都需要写联合类型。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 未开启strictNullChecks，number类型包含了null和undefined类型</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">foo</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">123</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">foo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// Okay</span></span>
+<span class="line"><span style="color:#BD976A;">foo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// Okay</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 开启strictNullChecks</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">foo</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">[] | </span><span style="color:#CB7676;">undefined</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">key</span><span style="color:#CB7676;"> === </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">// foo.push(&#39;1&#39;) // error - &#39;foo&#39; is possibly &#39;undefined&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">foo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">foo</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// okay</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 未开启strictNullChecks，number类型包含了null和undefined类型</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">foo</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">123</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">foo</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// Okay</span></span>
+<span class="line"><span style="color:#B07D48;">foo</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// Okay</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 开启strictNullChecks</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">foo</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">[] | </span><span style="color:#AB5959;">undefined</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">key</span><span style="color:#AB5959;"> === </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">// foo.push(&#39;1&#39;) // error - &#39;foo&#39; is possibly &#39;undefined&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">foo</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">foo</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// okay</span></span></code></pre></div><blockquote><p>注意：启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictNullChecks, --strictFunctionTypes和--strictPropertyInitialization</p></blockquote><h2 id="_10-nounusedlocals" tabindex="-1">10. noUnusedLocals <a class="header-anchor" href="#_10-nounusedlocals" aria-label="Permalink to &quot;10. noUnusedLocals&quot;">​</a></h2><p><code>有未使用的变量时，是否抛出错误</code>。boolean值，默认值： false</p><p>顾名思义，当发现变量定义但没有使用时，编译不报错。eslint的rule中也有该条，<strong>建议正式项目将该选项开启，设置为true</strong>，使得代码干净整洁。</p><h2 id="_11-nounusedparameters" tabindex="-1">11. noUnusedParameters <a class="header-anchor" href="#_11-nounusedparameters" aria-label="Permalink to &quot;11. noUnusedParameters&quot;">​</a></h2><p><code>有未使用的参数时，是否抛出错误</code>。boolean值，默认值： false</p><p><strong>建议正式项目开启该选项，设置为true</strong>，理由同上。</p><h2 id="_12-allowjs" tabindex="-1">12. allowJs <a class="header-anchor" href="#_12-allowjs" aria-label="Permalink to &quot;12. allowJs&quot;">​</a></h2><p><code>是否允许编译javascript文件</code>。boolean值，默认值：false</p><p>如果设置为true，js后缀的文件也会被typescript进行编译。</p><h2 id="_13-typeroots和types" tabindex="-1">13. typeRoots和types <a class="header-anchor" href="#_13-typeroots和types" aria-label="Permalink to &quot;13. typeRoots和types&quot;">​</a></h2><p>默认所有可见的&quot;@types&quot;包会在编译过程中被包含进来。如果指定了typeRoots，只有typeRoots下面的包才会被包含进来。如果指定了types，只有被列出来的npm包才会被包含进来。<a href="https://www.tslang.cn/docs/handbook/tsconfig-json.html#types-typeroots-and-types" target="_blank" rel="noreferrer">详细内容可看此处(opens new window)</a></p><blockquote><p>可以指定&quot;types&quot;: []来禁用自动引入@types包</p></blockquote><h2 id="_14-files、include和exclude" tabindex="-1">14. files、include和exclude <a class="header-anchor" href="#_14-files、include和exclude" aria-label="Permalink to &quot;14. files、include和exclude&quot;">​</a></h2><p><code>编译文件包含哪些文件以及排除哪些文件</code>。</p><p>未设置include时，编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx）。如果allowJs被设置成true，JS文件（.js和.jsx）也被包含进来。exclude排除那些不需要编译的文件或文件夹。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">compilerOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;"> {},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">include</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src/**/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">exclude</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">node_modules</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">**/*.spec.ts</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">compilerOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">:</span><span style="color:#999999;"> {},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">include</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src/**/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">exclude</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">node_modules</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">**/*.spec.ts</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="tsconfig-json全解析" tabindex="-1">tsconfig.json全解析 <a class="header-anchor" href="#tsconfig-json全解析" aria-label="Permalink to &quot;tsconfig.json全解析&quot;">​</a></h2><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">compilerOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 基本选项 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">target</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">es5</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 指定 ECMAScript 目标版本: &#39;ES3&#39; (default), &#39;ES5&#39;, &#39;ES2015&#39;, &#39;ES2016&#39;, &#39;ES2017&#39;, or &#39;ESNEXT&#39;（&quot;ESNext&quot;表示最新的ES语法，包括还处在stage X阶段）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">module</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">commonjs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                  </span><span style="color:#758575DD;">// 指定使用模块: &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39; or &#39;es2015&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">lib</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span><span style="color:#DBD7CAEE;">                             </span><span style="color:#758575DD;">// 指定要包含在编译中的库文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">allowJs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 允许编译 javascript 文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">checkJs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 报告 javascript 文件中的错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">jsx</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">preserve</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                     </span><span style="color:#758575DD;">// 指定 jsx 代码的生成: &#39;preserve&#39;, &#39;react-native&#39;, or &#39;react&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">declaration</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                   </span><span style="color:#758575DD;">// 生成相应的 &#39;.d.ts&#39; 文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">sourceMap</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                     </span><span style="color:#758575DD;">// 生成相应的 &#39;.map&#39; 文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">outFile</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 将输出文件合并为一个文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">outDir</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                        </span><span style="color:#758575DD;">// 指定输出目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">rootDir</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 用来控制输出目录结构 --outDir.</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">removeComments</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                </span><span style="color:#758575DD;">// 删除编译后的所有的注释</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noEmit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                        </span><span style="color:#758575DD;">// 不生成输出文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">importHelpers</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                 </span><span style="color:#758575DD;">// 从 tslib 导入辅助工具函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">isolatedModules</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">               </span><span style="color:#758575DD;">// 将每个文件做为单独的模块 （与 &#39;ts.transpileModule&#39; 类似）.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 严格的类型检查选项 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">strict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                        </span><span style="color:#758575DD;">// 启用所有严格类型检查选项</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noImplicitAny</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                 </span><span style="color:#758575DD;">// 在表达式和声明上有隐含的 any类型时报错</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">strictNullChecks</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">              </span><span style="color:#758575DD;">// 启用严格的 null 检查</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noImplicitThis</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                </span><span style="color:#758575DD;">// 当 this 表达式值为 any 类型的时候，生成一个错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">alwaysStrict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                  </span><span style="color:#758575DD;">// 以严格模式检查每个模块，并在每个文件里加入 &#39;use strict&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 额外的检查 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noUnusedLocals</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                </span><span style="color:#758575DD;">// 有未使用的变量时，抛出错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noUnusedParameters</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">            </span><span style="color:#758575DD;">// 有未使用的参数时，抛出错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noImplicitReturns</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">             </span><span style="color:#758575DD;">// 并不是所有函数里的代码都有返回值时，抛出错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noFallthroughCasesInSwitch</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">// 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 模块解析选项 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">moduleResolution</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">node</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">            </span><span style="color:#758575DD;">// 选择模块解析策略： &#39;node&#39; (Node.js) or &#39;classic&#39; (TypeScript pre-1.6)。默认是classic</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">baseUrl</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 用于解析非相对模块名称的基目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">paths</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span><span style="color:#DBD7CAEE;">                           </span><span style="color:#758575DD;">// 模块名到基于 baseUrl 的路径映射的列表</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">rootDirs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span><span style="color:#DBD7CAEE;">                        </span><span style="color:#758575DD;">// 根文件夹列表，其组合内容表示项目运行时的结构内容</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">typeRoots</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 包含类型声明的文件列表</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">types</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span><span style="color:#DBD7CAEE;">                           </span><span style="color:#758575DD;">// 需要包含的类型声明文件名列表</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">allowSyntheticDefaultImports</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 允许从没有设置默认导出的模块中默认导入。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* Source Map Options */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">sourceRoot</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                    </span><span style="color:#758575DD;">// 指定调试器应该找到 TypeScript 文件而不是源文件的位置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">mapRoot</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 指定调试器应该找到映射文件而不是生成文件的位置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">inlineSourceMap</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">               </span><span style="color:#758575DD;">// 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">inlineSources</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                 </span><span style="color:#758575DD;">// 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 其他选项 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">experimentalDecorators</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">// 启用装饰器</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">emitDecoratorMetadata</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">         </span><span style="color:#758575DD;">// 为装饰器提供元数据的支持</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">strictFunctionTypes</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">           </span><span style="color:#758575DD;">// 禁用函数参数双向协变检查。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 指定编译文件或排除指定编译文件 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">include</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src/**/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">exclude</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">node_modules</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">**/*.spec.ts</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">files</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">core.ts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sys.ts</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 从另一个配置文件里继承配置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">extends</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./config/base</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 让IDE在保存文件的时候根据tsconfig.json重新生成文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">compileOnSave</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">compilerOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 基本选项 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">target</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">es5</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 指定 ECMAScript 目标版本: &#39;ES3&#39; (default), &#39;ES5&#39;, &#39;ES2015&#39;, &#39;ES2016&#39;, &#39;ES2017&#39;, or &#39;ESNEXT&#39;（&quot;ESNext&quot;表示最新的ES语法，包括还处在stage X阶段）</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">module</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">commonjs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                  </span><span style="color:#A0ADA0;">// 指定使用模块: &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39; or &#39;es2015&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">lib</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span><span style="color:#393A34;">                             </span><span style="color:#A0ADA0;">// 指定要包含在编译中的库文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">allowJs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 允许编译 javascript 文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">checkJs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 报告 javascript 文件中的错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">jsx</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">preserve</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                     </span><span style="color:#A0ADA0;">// 指定 jsx 代码的生成: &#39;preserve&#39;, &#39;react-native&#39;, or &#39;react&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">declaration</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                   </span><span style="color:#A0ADA0;">// 生成相应的 &#39;.d.ts&#39; 文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">sourceMap</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                     </span><span style="color:#A0ADA0;">// 生成相应的 &#39;.map&#39; 文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">outFile</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 将输出文件合并为一个文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">outDir</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                        </span><span style="color:#A0ADA0;">// 指定输出目录</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">rootDir</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 用来控制输出目录结构 --outDir.</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">removeComments</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                </span><span style="color:#A0ADA0;">// 删除编译后的所有的注释</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noEmit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                        </span><span style="color:#A0ADA0;">// 不生成输出文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">importHelpers</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                 </span><span style="color:#A0ADA0;">// 从 tslib 导入辅助工具函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">isolatedModules</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">               </span><span style="color:#A0ADA0;">// 将每个文件做为单独的模块 （与 &#39;ts.transpileModule&#39; 类似）.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 严格的类型检查选项 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">strict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                        </span><span style="color:#A0ADA0;">// 启用所有严格类型检查选项</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noImplicitAny</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                 </span><span style="color:#A0ADA0;">// 在表达式和声明上有隐含的 any类型时报错</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">strictNullChecks</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">              </span><span style="color:#A0ADA0;">// 启用严格的 null 检查</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noImplicitThis</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                </span><span style="color:#A0ADA0;">// 当 this 表达式值为 any 类型的时候，生成一个错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">alwaysStrict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                  </span><span style="color:#A0ADA0;">// 以严格模式检查每个模块，并在每个文件里加入 &#39;use strict&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 额外的检查 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noUnusedLocals</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                </span><span style="color:#A0ADA0;">// 有未使用的变量时，抛出错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noUnusedParameters</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">            </span><span style="color:#A0ADA0;">// 有未使用的参数时，抛出错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noImplicitReturns</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">             </span><span style="color:#A0ADA0;">// 并不是所有函数里的代码都有返回值时，抛出错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noFallthroughCasesInSwitch</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">// 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 模块解析选项 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">moduleResolution</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">node</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">            </span><span style="color:#A0ADA0;">// 选择模块解析策略： &#39;node&#39; (Node.js) or &#39;classic&#39; (TypeScript pre-1.6)。默认是classic</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">baseUrl</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 用于解析非相对模块名称的基目录</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">paths</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span><span style="color:#393A34;">                           </span><span style="color:#A0ADA0;">// 模块名到基于 baseUrl 的路径映射的列表</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">rootDirs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span><span style="color:#393A34;">                        </span><span style="color:#A0ADA0;">// 根文件夹列表，其组合内容表示项目运行时的结构内容</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">typeRoots</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 包含类型声明的文件列表</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">types</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span><span style="color:#393A34;">                           </span><span style="color:#A0ADA0;">// 需要包含的类型声明文件名列表</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">allowSyntheticDefaultImports</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 允许从没有设置默认导出的模块中默认导入。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* Source Map Options */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">sourceRoot</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                    </span><span style="color:#A0ADA0;">// 指定调试器应该找到 TypeScript 文件而不是源文件的位置</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">mapRoot</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 指定调试器应该找到映射文件而不是生成文件的位置</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">inlineSourceMap</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">               </span><span style="color:#A0ADA0;">// 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">inlineSources</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                 </span><span style="color:#A0ADA0;">// 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 其他选项 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">experimentalDecorators</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">// 启用装饰器</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">emitDecoratorMetadata</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">         </span><span style="color:#A0ADA0;">// 为装饰器提供元数据的支持</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">strictFunctionTypes</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">           </span><span style="color:#A0ADA0;">// 禁用函数参数双向协变检查。</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 指定编译文件或排除指定编译文件 */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">include</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src/**/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">exclude</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">node_modules</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">**/*.spec.ts</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">files</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">core.ts</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sys.ts</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 从另一个配置文件里继承配置</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">extends</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./config/base</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 让IDE在保存文件的时候根据tsconfig.json重新生成文件</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">compileOnSave</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/FrontEnd/TypeScript/配置文件详解.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>进阶使用技巧</span></a></div><div class="pager" data-v-ef5dee53><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/GoodTool/index.html b/GoodTool/index.html
new file mode 100644
index 00000000..a16544c1
--- /dev/null
+++ b/GoodTool/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>实用工具集锦 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/GoodTool_index.md.2cde5d0e.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav fixed reached-top" data-v-5a346dfe data-v-79c8c1df><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><!----><div class="VPContent" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_GoodTool_" data-v-6b87e69f><div><h1 id="实用工具集锦" tabindex="-1">实用工具集锦 <a class="header-anchor" href="#实用工具集锦" aria-label="Permalink to &quot;实用工具集锦&quot;">​</a></h1><div class="tool-wrap" data-v-a04e210c><!--[--><!--[--><div class="tool-group-title" data-v-a04e210c>在线编程工具</div><div class="tool-group" data-v-a04e210c><!--[--><a class="tool-item" href="https://lightly.teamcode.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Lightly" src="https://lightly.teamcode.com/favicon.svg" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Lightly</p></a><a class="tool-item" href="https://code.juejin.cn" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="码上掘金" src="https://juejin.cn/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>码上掘金</p></a><a class="tool-item" href="https://glitch.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Glitch" src="https://glitch.com/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Glitch</p></a><a class="tool-item" href="https://codepen.io/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="CodePen" src="https://codepen.io/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>CodePen</p></a><a class="tool-item" href="https://codesandbox.io/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="CodeSandbox" src="https://codesandbox.io/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>CodeSandbox</p></a><a class="tool-item" href="https://stackblitz.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Stackblitz" src="https://c.staticblitz.com/assets/favicon-editor-675989317f34707a17fe9d649da3609d70f6f8abc9546445389238ddd570a1d4.png" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Stackblitz</p></a><!--]--></div><!--]--><!--[--><div class="tool-group-title" data-v-a04e210c>前端组件库</div><div class="tool-group" data-v-a04e210c><!--[--><a class="tool-item" href="https://element.eleme.cn/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Element-UI" src="https://element.eleme.cn/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Element-UI</p></a><a class="tool-item" href="https://ant.design/index-cn/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Ant Design" src="https://ng.ant.design/assets/img/logo.svg" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Ant Design</p></a><a class="tool-item" href="https://arco.design/vue/docs/start" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Arco Design" src="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Arco Design</p></a><a class="tool-item" href="https://vant-contrib.gitee.io/vant/#/zh-CN" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Vant" src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Vant</p></a><a class="tool-item" href="https://motion.vueuse.org/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Motion Vueuse" src="https://motion.vueuse.org/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Motion Vueuse</p></a><!--]--></div><!--]--><!--[--><div class="tool-group-title" data-v-a04e210c>作图工具</div><div class="tool-group" data-v-a04e210c><!--[--><a class="tool-item" href="www.figma.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Figma" src="https://static.figma.com/app/icon/1/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Figma</p></a><a class="tool-item" href="https://www.processon.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="ProcessOn" src="https://www.processon.com/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>ProcessOn</p></a><a class="tool-item" href="https://www.zhixi.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="知犀思维导图" src="https://www.zhixi.com/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>知犀思维导图</p></a><a class="tool-item" href="https://www.iodraw.com" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="ioDraw" src="https://www.iodraw.com/static/img/common/iodraw.svg" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>ioDraw</p></a><a class="tool-item" href="https://jsoncrack.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="jsoncrack" src="https://jsoncrack.com/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>jsoncrack</p></a><a class="tool-item" href="https://fxzer.gitee.io/json-viewer/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="JSON Viewer" src="https://fxzer.gitee.io/json-viewer/jvlogo.svg" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>JSON Viewer</p></a><!--]--></div><!--]--><!--[--><div class="tool-group-title" data-v-a04e210c>调色板</div><div class="tool-group" data-v-a04e210c><!--[--><a class="tool-item" href="https://flatuicolors.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="FlatuiColors" src="https://flatuicolors.com/static/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>FlatuiColors</p></a><a class="tool-item" href="https://www.colorhunt.co/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Color Hunt" src="https://www.colorhunt.co/img/colorhunt-favicon.svg?2" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Color Hunt</p></a><a class="tool-item" href="https://arco.design/palette/list" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Arco Palette" src="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Arco Palette</p></a><a class="tool-item" href="https://webkul.github.io/coolhue/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="ioDraw" src="https://webkul.github.io/coolhue/images/coolhue-logo.png" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>ioDraw</p></a><a class="tool-item" href="http://zhongguose.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="中国传统色" src="http://zhongguose.com/favicon.ico" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>中国传统色</p></a><a class="tool-item" href="https://gradienthunt.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="GradientHunt" src="https://gradienthunt.com/img/gradienthunt.png" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>GradientHunt</p></a><a class="tool-item" href="https://uigradients.com/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="uigradients" src="https://uigradients.com/static/images/favicon-32x32.png" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>uigradients</p></a><a class="tool-item" href="https://coolors.co/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="Coolors" src="https://coolors.co/assets/img/favicon.png" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>Coolors</p></a><a class="tool-item" href="https://mycolor.space/" target="blank" data-v-a04e210c data-v-2525f4e1><div class="loader tool-icon" style="" data-v-2525f4e1 data-v-4fdc7ada><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div><div data-v-4fdc7ada></div></div><img class="tool-icon" style="display:none;" alt="MyColor" src="https://mycolor.space/img/color-space-logo.png" data-v-2525f4e1><p class="tool-name" data-v-2525f4e1>MyColor</p></a><!--]--></div><!--]--><!--]--></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/GoodTool/index.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.html" "b/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.html"
new file mode 100644
index 00000000..5620e7a9
--- /dev/null
+++ "b/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>事件循环机制 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Brower_事件循环机制.md.9f053692.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Brower_%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-6b87e69f><div><h1 id="事件循环机制" tabindex="-1">事件循环机制 <a class="header-anchor" href="#事件循环机制" aria-label="Permalink to &quot;事件循环机制&quot;">​</a></h1><h2 id="进程与线程" tabindex="-1">进程与线程 <a class="header-anchor" href="#进程与线程" aria-label="Permalink to &quot;进程与线程&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">描述</p><p>进程是操作系统<strong>分配资源</strong>的基本单位，线程是操作<strong>系统调度</strong>的基本单位，线程可以看做轻量级的进程。</p></div><ol><li><p>一个进程中至少包含一个线程，线程不能包含进程，不能单独存在，必须由进程启动和管理</p></li><li><p>多个进程间不能共享资源，都有自己私有的程序计数器（记录执行指令地址）,线程可以共享同一个进程间的资源</p></li><li><p>上下文切换：进程慢，线程快（从一个切换到另一个）</p></li><li><p>操纵者不同：进程操纵者是操作系统，线程操纵者一般为程序员</p></li></ol><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302231653903.png" alt="image-20230223165307358"></p><h2 id="浏览器的线程与进程" tabindex="-1">浏览器的线程与进程 <a class="header-anchor" href="#浏览器的线程与进程" aria-label="Permalink to &quot;浏览器的线程与进程&quot;">​</a></h2><blockquote><p>浏览器是一个<strong>多进程多线程</strong>的应用程序</p></blockquote><ol><li>浏览器进程：负责浏览器界面展示、用户交互、子进程管理等；浏览器进程内部会启动多个线程处理不同的任务。</li><li>网络进程：负责加载网络资源，网络进程内部会启动多个线程来处理不同的网络任务。</li><li>渲染进程：渲染进程启动后，会启动一个渲染<strong>主进程</strong>，主进程负责执行 HTML、CSS、JS 代码。</li></ol><blockquote><p>默认每个标签页开启一个新进程，以保证标签页之间不互相影响。</p></blockquote><h2 id="渲染进程任务" tabindex="-1">渲染进程任务 <a class="header-anchor" href="#渲染进程任务" aria-label="Permalink to &quot;渲染进程任务&quot;">​</a></h2><ol><li>解析 HTML</li><li>解析 CSS</li><li>计算 样式</li><li>页面布局</li><li>处理图层</li><li>每秒把页面渲染 60 次</li><li>执行全局 JS 代码</li><li>执行事件处理函数</li><li>执行定时器的回调函数</li></ol><h2 id="事件循环" tabindex="-1">事件循环 <a class="header-anchor" href="#事件循环" aria-label="Permalink to &quot;事件循环&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-21-01-25.png" alt="2023-03-05-21-01-25"></p><details class="details custom-block"><summary>事件循环解释</summary><ol><li><p>在最开始的时候，渲染主线程会进入一个无限循环</p></li><li><p>每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。</p></li><li><p>其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的未尾。在添加新任务时，“如果主线程是休眠状态，则会将其唤醒以绁续循环拿取任务；如此循环往复，持续进行。</p></li></ol></details><div class="tip custom-block"><p class="custom-block-title">异步与事件循环理解</p><p>单线程是异步产生的原因，事件循环是异步的实现方式。</p></div><h2 id="如何理解异步" tabindex="-1">如何理解异步 <a class="header-anchor" href="#如何理解异步" aria-label="Permalink to &quot;如何理解异步&quot;">​</a></h2><blockquote><p>Js是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。</p><p>而渲染主线程承担渲染页面、执行 JS 等诸多的任务。</p><p>如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。</p><p>这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。</p><p>所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理;</p><p>自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的未尾排队，等待主线程调度执行。</p><p>在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。使用异步的方式，<strong>渲染主线程永不阻塞</strong>。</p></blockquote><h2 id="消息队列" tabindex="-1">消息队列 <a class="header-anchor" href="#消息队列" aria-label="Permalink to &quot;消息队列&quot;">​</a></h2><blockquote><p>任务没有优先级，在消息队列中先进先出。但是 <strong>消息队列有优先级</strong>。</p><p>每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。</p><p>在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。</p><p>浏览器必须准备好一个微队列，微队列中的任务<strong>优先</strong>所有其他任务执行。</p></blockquote><details class="details custom-block"><summary>JS 中的计时器能做到精确计时吗</summary><p>不行，因为有操作系统计时函数偏差、事件循环机制的损耗：</p><p>1．计算机硬件没有原子钟，无法做到精确计时</p><p>2．操作系统的计时函数本身就有少量偏差！ 由于 JS 的计时器最终调用的是操作系统的函数，也就携带了此偏养</p><p>3．按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，间隔时间少于 4 毫秒，则会增加到 4 毫秒 这又带来了偏差</p><p>4． 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差。</p></details><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-21-56-25.png" alt="2023-03-05-21-56-25"></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Brower/事件循环机制.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><!----></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>浏览器网页请求过程</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.html" "b/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.html"
new file mode 100644
index 00000000..24ace243
--- /dev/null
+++ "b/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>浏览器网页请求过程 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Brower_浏览器网页请求过程.md.1acb73dd.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Brower_%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-6b87e69f><div><h1 id="浏览器网页请求过程" tabindex="-1">浏览器网页请求过程 <a class="header-anchor" href="#浏览器网页请求过程" aria-label="Permalink to &quot;浏览器网页请求过程&quot;">​</a></h1><ol><li>网络：请求资源</li><li>渲染：处理渲染</li></ol><div class="tip custom-block"><p class="custom-block-title">完整的 HTTP 请求过程</p><p>域名解析 ==&gt; 与服务器建立连接 ==&gt; 发起 HTTP 请求 ==&gt; 服务器响应 HTTP 请求，浏览器得到 html 代码 ==&gt; 浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片） ==&gt; 浏览器对页面进行渲染呈现给用户</p></div><h2 id="一、域名解析" tabindex="-1">一、域名解析 <a class="header-anchor" href="#一、域名解析" aria-label="Permalink to &quot;一、域名解析&quot;">​</a></h2><ol><li>Chrome 浏览器 会首先搜索浏览器自身的 DNS 缓存，有且没有过期则解析到此结束。</li><li>如果浏览器自身的缓存里面没有找到对应的条目，会搜索操作系统自身的 DNS 缓存，有且没有过期则停止搜索解析到此结束</li></ol><blockquote><p>Windows 系统：<code>ipconfig/displaydns</code> 命令查看</p></blockquote><ol start="3"><li>如果在 Windows 系统的 DNS 缓存也没有找到，则读取 hosts 文件</li></ol><blockquote><p>hosts 位于 <code>‪C:\Windows\System32\drivers\etc\hosts</code></p></blockquote><ol start="4"><li><p>hosts 文件中也没有找到对应的条目，浏览器就会发起一个 DNS 的系统调用，就会向本地配置的首选 DNS 服务器发起域名解析请求</p><p>并返回给 Windows 系统内核，内核又把结果返回给浏览器。（这是递归的请求，也就是运营商的 DNS 服务器必须得提供并返回该域名的 IP 地址）</p></li><li><p>经过以上的 4 个步骤，还没有解析成功</p></li></ol><blockquote><p>注：一般会进行以下几步</p><p>操作系统就会查找 NetBIOS name Cache == &gt; WINS 服务器 ==&gt; 客户端就要进行广播查找 ==&gt; 客户端就读取 LMHOSTS 文件</p></blockquote><p>如果还没有解析成功，那么就宣告这次解析失败，那就无法跟目标计算机进行通信。只要其中有一步可以解析成功，那就可以成功和目标计算机进行通信。</p><h2 id="二、与服务器建立连接" tabindex="-1">二、与服务器建立连接 <a class="header-anchor" href="#二、与服务器建立连接" aria-label="Permalink to &quot;二、与服务器建立连接&quot;">​</a></h2><ol><li>TCP 连接的建立</li></ol><p>客户端的请求到达服务器，首先就是三次握手建立 TCP 连接</p><blockquote><p>三次握手的目的：试探一下对方是否遵循 TCP/IP 协议，为了在不可靠的信道上建立起可靠的连接</p></blockquote><blockquote><p><strong>为什么要进行第三次握手</strong>：为了防止服务器端开启一些无用的连接，增加服务器开销；</p><p>以及防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。</p></blockquote><p><img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="img"></p><h2 id="三、发起-http-请求" tabindex="-1">三、发起 HTTP 请求 <a class="header-anchor" href="#三、发起-http-请求" aria-label="Permalink to &quot;三、发起 HTTP 请求&quot;">​</a></h2><p>http 协议：计算机通过网络进行通信的规则，是一个基于请求与响应，无状态的，应用层的协议，常基于 TCP/IP 协议传输数据。</p><h3 id="请求报文结构" tabindex="-1">请求报文结构 <a class="header-anchor" href="#请求报文结构" aria-label="Permalink to &quot;请求报文结构&quot;">​</a></h3><p>请求报文包括四个部分：请求行，请求头，空行，请求体。</p><p><img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="img"></p><h2 id="四、服务器端响应-http-请求-浏览器得到-html-代码" tabindex="-1">四、服务器端响应 HTTP 请求，浏览器得到 HTML 代码 <a class="header-anchor" href="#四、服务器端响应-http-请求-浏览器得到-html-代码" aria-label="Permalink to &quot;四、服务器端响应 HTTP 请求，浏览器得到 HTML 代码&quot;">​</a></h2><p>HTTP 的响应报文也由四部分组成：响应行、响应头、空行、响应体</p><p><img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="img"></p><p><a href="https://blog.csdn.net/lyn_00/article/details/84953763" target="_blank" rel="noreferrer">报文结构参考</a></p><h2 id="五、浏览器渲染过程" tabindex="-1">五、浏览器渲染过程 <a class="header-anchor" href="#五、浏览器渲染过程" aria-label="Permalink to &quot;五、浏览器渲染过程&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-05-19.png" alt="2023-03-05-22-05-19"></p><ol><li>解析 html 结构，形成 Dom 树</li><li>解析 CSS，生成 cssom</li><li>将 CSSOM 和 DOM 合并形成 render 树</li><li>计算 layout 布局</li><li>将布局渲染到屏幕上</li></ol><p>整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画</p><h3 id="一、解析-html" tabindex="-1">一、解析 HTML <a class="header-anchor" href="#一、解析-html" aria-label="Permalink to &quot;一、解析 HTML&quot;">​</a></h3><p>解析过程中遇到 CSS 解析 CSS，遇到 JS执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和外部的JS 文件。</p><p>如果主线程解析到 link 位置，此时外部的CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 css 的工作是在预解析线程中进行的。这就是csS 不会阻塞 HTML 解析的根本原因。</p><p>如果主线程解析到 script 位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 Js 代码的执行过程可能会修改当前的DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阳塞 HTML 解析的根本原因。</p><p>第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。 <img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-07-54.png" alt="2023-03-05-22-07-54"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-29-15.png" alt="2023-03-05-22-29-15"></p><blockquote><p>解析成对象，提供 JS 可操作的能力</p></blockquote><h3 id="二、解析-css" tabindex="-1">二、解析 CSS <a class="header-anchor" href="#二、解析-css" aria-label="Permalink to &quot;二、解析 CSS&quot;">​</a></h3><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-10-48.png" alt="2023-03-05-22-10-48"></p><blockquote><p><code>document.styleSheets、document.styleSheets[0].addRule(&#39;div&#39;:&#39;border :2px solid red&#39;)</code> 可查看、操作浏览器样式表</p></blockquote><h3 id="三、样式计算" tabindex="-1">三、样式计算 <a class="header-anchor" href="#三、样式计算" aria-label="Permalink to &quot;三、样式计算&quot;">​</a></h3><p>主线程会遍历得到的DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 <code>Computed Style</code>。</p><p>在这一过程中，很多预设值会变成绝对值，比如 red 会变成 rgb；相对单位会变成绝对单位，比如 em 会变成 px</p><p>这一步完成后，会得到一棵带有样式的DOM 树</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-31-23.png" alt="2023-03-05-22-31-23"></p><h3 id="四、布局layout" tabindex="-1">四、布局Layout <a class="header-anchor" href="#四、布局layout" aria-label="Permalink to &quot;四、布局Layout&quot;">​</a></h3><p>DOM树和 Layout 不一定是一一对应的，比如<code>head</code>默认样式<code>display:none</code>,<code>::before</code>在 Layout 树阶段，布局完成后形成布局树。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-38-44.png" alt="2023-03-05-22-38-44"></p><h3 id="五、分层layer" tabindex="-1">五、分层Layer <a class="header-anchor" href="#五、分层layer" aria-label="Permalink to &quot;五、分层Layer&quot;">​</a></h3><p>主线程使用复杂的策略对布局树进行分层。</p><h3 id="六、绘制paint" tabindex="-1">六、绘制Paint <a class="header-anchor" href="#六、绘制paint" aria-label="Permalink to &quot;六、绘制Paint&quot;">​</a></h3><p>为每个层生成绘制指令</p><h3 id="七、分块tiling" tabindex="-1">七、分块Tiling <a class="header-anchor" href="#七、分块tiling" aria-label="Permalink to &quot;七、分块Tiling&quot;">​</a></h3><p>分块工作交给多个线程同时进行</p><h3 id="八、光栅化raster" tabindex="-1">八、光栅化Raster <a class="header-anchor" href="#八、光栅化raster" aria-label="Permalink to &quot;八、光栅化Raster&quot;">​</a></h3><p>合成线程将信息交给 GPU 进程，将每个快变成位图，优先处理靠近视口的块，此过程会用到 GPU 加速，提升运算速率。</p><h3 id="九、画draw" tabindex="-1">九、画Draw <a class="header-anchor" href="#九、画draw" aria-label="Permalink to &quot;九、画Draw&quot;">​</a></h3><p>合成线程计算出每个位图在屏幕上的位置，交给 GPU 进行呈现。变形（旋转，缩放，倾斜）等发生在合成线程，与渲染主线程无关，这是 <code>transform</code> 效率高的本质原因。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-06-21-54-14.png" alt="2023-03-06-21-54-14"></p><h3 id="回流reflow" tabindex="-1">回流reflow <a class="header-anchor" href="#回流reflow" aria-label="Permalink to &quot;回流reflow&quot;">​</a></h3><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-06-21-56-10.png" alt="2023-03-06-21-56-10"></p><p>reflow 的本质就是重新计算 layout 树。</p><p>当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。</p><p>为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 ref1ow 是异步完成的。</p><p>也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息浏览器在反复权衡下，最终决定获取属性立即 ref1ow。</p><div class="tip custom-block"><p class="custom-block-title">引起回流属性和方法：任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。</p><ol><li>页面首次渲染</li><li>添加或者删除可见的DOM元素</li><li>元素尺寸或位置发生改变</li><li>元素字体大小变化</li><li>浏览器窗口大小发生改变</li><li>激活CSS伪类（例如：:hover）</li><li>查询某些属性或调用某些方法</li></ol></div><h3 id="重绘repaint" tabindex="-1">重绘repaint <a class="header-anchor" href="#重绘repaint" aria-label="Permalink to &quot;重绘repaint&quot;">​</a></h3><p>repaint 的本质就是重新根据分层信息计算了绘制指令。</p><p>当改动了可见样式后，就需要重新计算，会引发 repaint。</p><p>由于元素的布局信息也属于可见样式，所以reflow 一定会引起 repaint。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-06-22-20-02.png" alt="2023-03-06-22-20-02"></p><details class="details custom-block"><summary>为什么 transform 的效率高?</summary><p>因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」 阶段由于 draw 阶段在合成线程中；</p><p>所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌．也不会影响 transform 的变化。</p></details><blockquote><p>需要更新属性，只是影响元素的外观、风格，不影响布局。改变 <code>​color​​​,​ ​background-color​​​, ​​visibility</code> 等属性</p></blockquote><p><a href="https://blog.51cto.com/u_15499114/4971560" target="_blank" rel="noreferrer">参考链接</a></p><h2 id="六、浏览器对页面进行渲染呈现给用户-关闭连接" tabindex="-1">六、浏览器对页面进行渲染呈现给用户，关闭连接 <a class="header-anchor" href="#六、浏览器对页面进行渲染呈现给用户-关闭连接" aria-label="Permalink to &quot;六、浏览器对页面进行渲染呈现给用户，关闭连接&quot;">​</a></h2><h3 id="四次挥手" tabindex="-1">四次挥手 <a class="header-anchor" href="#四次挥手" aria-label="Permalink to &quot;四次挥手&quot;">​</a></h3><p><img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="img"></p><p>问题一：</p><p>为什么连接的时候是三次握手，关闭的时候却是四次握手？</p><blockquote><p>为了保障数据发送完再断开连接</p></blockquote><p>问题二：</p><p>为什么要等待一段时间在关闭连接？</p><blockquote><p>因为客户端发送完 ack 包后中途可能丢失，此时服务端未收到 ack 包会重发 fin 包，客户端在发送 ack 包刷新等待时间，</p><p>确保服务端关闭再 关闭客户端</p></blockquote><p><a href="https://www.bilibili.com/video/BV1kV411j7hA?from=search&amp;seid=11094337157520488587" target="_blank" rel="noreferrer">参考视频 1</a></p><p><a href="https://www.bilibili.com/video/BV1BV411a72M?from=search&amp;seid=4937986881420888725" target="_blank" rel="noreferrer">参考视频 2</a></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Brower/浏览器网页请求过程.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>事件循环机制</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>计算机网络</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.html" "b/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.html"
new file mode 100644
index 00000000..8a866c1d
--- /dev/null
+++ "b/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Brower_计算机网络.md.73c84072.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Brower_%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-6b87e69f><div><h2 id="http与https区别" tabindex="-1">http与https区别 <a class="header-anchor" href="#http与https区别" aria-label="Permalink to &quot;http与https区别&quot;">​</a></h2><p>http：超文本传输协议，明文传输，信息不安全。用的是80端口</p><p>https：具有安全性的ssl加密传输协议，信息安全。用的443端口</p><h2 id="前端缓存" tabindex="-1">前端缓存 <a class="header-anchor" href="#前端缓存" aria-label="Permalink to &quot;前端缓存&quot;">​</a></h2><h3 id="http缓存" tabindex="-1">HTTP缓存 <a class="header-anchor" href="#http缓存" aria-label="Permalink to &quot;HTTP缓存&quot;">​</a></h3><p>在服务器代码上设置</p><ol><li>强缓存：使用Expires、Cache-Control（优先级高</li></ol><blockquote><p><strong>判断过程</strong>： 请求再次发起 -&gt; 浏览器根据 expires 和 cache-control 判断目标资源是否命中&quot;强缓存&quot; -&gt; 若命中，直接从缓存获取资源，不再与服务器发生通讯。</p></blockquote><ol><li>协商缓存：协商缓存主要有四个头字段，它们两两组合配合使用,当命中协商缓存的时候，服务器会返回HTTP状态码304，让客户端直接 从本地缓存里面读取文件。</li></ol><h3 id="浏览器缓存" tabindex="-1">浏览器缓存 <a class="header-anchor" href="#浏览器缓存" aria-label="Permalink to &quot;浏览器缓存&quot;">​</a></h3><blockquote><p>localStorage、sessionStorage、cookie</p></blockquote></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Brower/计算机网络.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>浏览器网页请求过程</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>基础面试题</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" "b/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html"
new file mode 100644
index 00000000..037dc930
--- /dev/null
+++ "b/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html"
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>CSS基础面试题 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_CSS_基础面试题.md.b72bdb12.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_CSS_%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-6b87e69f><div><h1 id="css基础面试题" tabindex="-1">CSS基础面试题 <a class="header-anchor" href="#css基础面试题" aria-label="Permalink to &quot;CSS基础面试题&quot;">​</a></h1><h2 id="伪类与伪元素" tabindex="-1"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements" target="_blank" rel="noreferrer">伪类与伪元素</a> <a class="header-anchor" href="#伪类与伪元素" aria-label="Permalink to &quot;[伪类与伪元素](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">解释</p><p>都不需要添加额外的HTML元素的情况下为文档添加样式和效果。</p><p><strong>伪类</strong>：开头为单冒号<code>:</code>，伪类是选择器的一种，用于给元素某种状态（滑动、点击等）添加对应的样式，在原本元素上修改</p><p><strong>伪元素</strong>：开头为双冒号<code>::</code>，用于创建一些不在文档树中的又可以通过 CSS 控制样式的虚拟元素，向元素添加额外的内容或样式。</p></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302271122474.png" alt="image-20230227112239445"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302271122320.png" alt="image-20230227112221284"></p><div class="tip custom-block"><p class="custom-block-title"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child" target="_blank" rel="noreferrer"><code>:nth-child()</code></a> 与<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type" target="_blank" rel="noreferrer"><code>:nth-of-type()</code></a></p><p><code>:nth-child(n) </code>：匹配到第 n 个兄弟</p><p><code>:nth-of-type(n)</code>：匹配到同类型的第 n 个兄弟元素</p></div><h2 id="水平垂直居中" tabindex="-1">水平垂直居中 <a class="header-anchor" href="#水平垂直居中" aria-label="Permalink to &quot;水平垂直居中&quot;">​</a></h2><ol><li>行内元素：<code>text-align 与 line-height</code> 块级元素：</li><li>flex + margin:auto、grid + margin:auto</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* grid */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#C99076;">auto</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* grid */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">auto</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="2"><li>flex布局</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-items</span><span style="color:#666666;">:</span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-items</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="3"><li>grid布局</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-items</span><span style="color:#666666;">:</span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/* 网格内项目垂直居中 */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">/* 或 */</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/* 容器内网格垂直居中 */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-items</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/* 网格内项目垂直居中 */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">/* 或 */</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/* 容器内网格垂直居中 */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="4"><li>绝对定位 + transform</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">translate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">-50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">   </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">translate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span><span style="color:#2F798A;">-50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">);</span><span style="color:#393A34;">   </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="5"><li>绝对定位 + margin</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">bottom</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#C99076;">auto</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">bottom</span><span style="color:#999999;">:</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">auto</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="盒模型的理解" tabindex="-1">盒模型的理解 <a class="header-anchor" href="#盒模型的理解" aria-label="Permalink to &quot;盒模型的理解&quot;">​</a></h2><p>当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准，把每个元素表示为一个矩形的盒子。</p><p>盒模型从内到外由 content(内容) + padding(内边距) + border(边框) + margin(外边距) 组成。</p><p>默认为W3C 标准盒模型 <code>content-box</code>，<code>box-sizing:content-box</code>: height = content 。</p><p>可以通过<code>box-sizing</code>改变其计算方式，通常改为怪异盒模型<code>box-sizing:border-box</code>: height = content + padding + border 。</p><p>这样能够更精确地控制元素的尺寸和定位，元素的宽度和高度可以直接指定为内容区域的尺寸，而无需考虑内边距和边框。</p><h2 id="bfc-及其应用" tabindex="-1"><em><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts" target="_blank" rel="noreferrer">BFC</a></em> 及其应用 <a class="header-anchor" href="#bfc-及其应用" aria-label="Permalink to &quot;*[BFC](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts)* 及其应用&quot;">​</a></h2><p>所谓 <em>BFC</em>（<strong>块格式化上下文</strong>），指的是一个独立的布局环境，<em>BFC</em> 内部的元素布局与外部互不影响。</p><ul><li>浮动元素(<code>float</code> 值不为 <code>none</code>)</li><li>块级元素的 overflow 属性不为 <code>visible,clip</code></li><li>绝对定位的元素 包含 <code>position: fixed</code> 或<code>position: absolute</code></li><li><code>display: inline-block</code>，<code>display: table-cell</code>，<code>flex，grid</code></li></ul><p><strong>应用</strong></p><ol><li>解决相邻元素外边距塌陷</li><li>清除浮动解决父元素高度塌陷</li></ol><h2 id="css-选择器" tabindex="-1">CSS 选择器 <a class="header-anchor" href="#css-选择器" aria-label="Permalink to &quot;CSS 选择器&quot;">​</a></h2><p><code>!important</code>权重最高</p><p><strong>权重</strong>：</p><p>1000：内联样式</p><p>100： id选择器</p><p>10：类、伪类、属性选择器</p><p>1：标签、伪元素选择器</p><p>0：子元素、后代、通配符、相邻选择器</p><p>多个可进行累加，相同属性后定义覆盖先定义。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-03-18-23-39-34.png" alt="2023-03-18-23-39-34"></p><h2 id="如何实现动画" tabindex="-1">如何实现动画 <a class="header-anchor" href="#如何实现动画" aria-label="Permalink to &quot;如何实现动画&quot;">​</a></h2><ol><li>用 CSS <code>@keyframes</code>关键帧</li><li>使用 JS 的 <code>setInterval</code> 或 <code>requestAnimationFrame</code>，手动控制元素的位置和样式来实现动画效果</li></ol><h2 id="实现渐变背景" tabindex="-1">实现渐变背景 <a class="header-anchor" href="#实现渐变背景" aria-label="Permalink to &quot;实现渐变背景&quot;">​</a></h2><ol><li><p>使用 CSS3 渐变，通过 <code>linear-gradient</code> 或 <code>radial-gradient</code> 属性来实现， <code>background: linear-gradient(to right, #ff00cc, #333399)</code></p></li><li><p>使用 SVG 渐变，通过定义一个 <code>&lt;linearGradient&gt;</code> 或 <code>&lt;radialGradient&gt;</code> 元素来实现</p></li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">svg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">linearGradient</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">gradient</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x1</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y1</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x2</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y2</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">stop</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">offset</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stop-color</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#f00</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">stop</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">offset</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stop-color</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#00f</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">linearGradient</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">rect</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fill</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">url(#gradient)</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">svg</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">svg</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">linearGradient</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">gradient</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x1</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y1</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x2</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y2</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0%</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">stop</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">offset</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stop-color</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#f00</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">stop</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">offset</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stop-color</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#00f</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">linearGradient</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">rect</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fill</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">url(#gradient)</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">svg</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="定位position" tabindex="-1">定位position <a class="header-anchor" href="#定位position" aria-label="Permalink to &quot;定位position&quot;">​</a></h2><p><strong>静态定位</strong><code>static</code>：默认值，此时 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 和 <code>z-index</code> 属性无效</p><p><strong>相对定位</strong><code>relative</code>：保留原来位置进行定位，定位时相对于原来位置进行定位</p><p><strong>绝对定位</strong><code>absolute</code>：元素会被移出正常文档流，并不为元素预留空间，相对于<em>最近的非 static 定位祖先元素</em>的偏移，直到 body</p><p><strong>固定定位</strong><code>fixed</code>：相对于浏览器视口进行定位，当元素祖先的 <code>transform</code>、<code>perspective</code>、<code>filter</code> 或 <code>backdrop-filter</code> 属性非 <code>none</code> 时，容器由视口改为该祖先。</p><p><strong>黏性定位</strong><code>sticky</code>：相对于<em>最近滚动祖先</em>定位，滚动到元素top小于设定值(top:20px;)则转为固定定位。（relative+fixed）</p><h2 id="隐藏元素的方式" tabindex="-1">隐藏元素的方式 <a class="header-anchor" href="#隐藏元素的方式" aria-label="Permalink to &quot;隐藏元素的方式&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302211729743.png" alt="image-20230221172950214"></p><h2 id="用css3实现饼图" tabindex="-1">用css3实现饼图 <a class="header-anchor" href="#用css3实现饼图" aria-label="Permalink to &quot;用css3实现饼图&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">pie</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 画饼图 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">conic-gradient</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">red</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">orange</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#CB7676;">deg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">yellow</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#CB7676;">deg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">45</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">green</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">45</span><span style="color:#CB7676;">deg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">110</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">blue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">110</span><span style="color:#CB7676;">deg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">purple</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">deg</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">pie</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 画饼图 */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">conic-gradient</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">red</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">orange</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#AB5959;">deg</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">yellow</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#AB5959;">deg</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">45</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">green</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">45</span><span style="color:#AB5959;">deg</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">110</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">blue</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">110</span><span style="color:#AB5959;">deg</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">purple</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">deg</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="margin和padding适用场景" tabindex="-1">margin和padding适用场景 <a class="header-anchor" href="#margin和padding适用场景" aria-label="Permalink to &quot;margin和padding适用场景&quot;">​</a></h2><table><thead><tr><th>margin</th><th>Padding</th></tr></thead><tbody><tr><td>需要在边框<strong>外</strong>留白</td><td>需要在边框<strong>内</strong>留白</td></tr><tr><td>留白处<strong>不需要</strong>背景色时</td><td>留白处<strong>需要</strong>背景色时</td></tr><tr><td>上下相连的元素，会相互<strong>抵消</strong>15px+20px的margin，得到20px的空白</td><td>上下相连的元素，会<strong>累加</strong>15px+20px的padding，得到35px的空白</td></tr></tbody></table><p><strong>清除margin塌陷</strong> 兄弟相邻元素：overflow: hidden、flex 布局</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">container</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">1</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#758575DD;">&lt;!--&lt;div class=&quot;wrap&quot;&gt;  1.额外包一层并加上 overflow: hidden;--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">2</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#758575DD;">&lt;!--&lt;/div&gt;--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">container</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">1</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A0ADA0;">&lt;!--&lt;div class=&quot;wrap&quot;&gt;  1.额外包一层并加上 overflow: hidden;--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">2</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A0ADA0;">&lt;!--&lt;/div&gt;--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">ccc</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 2.形成 BFC: display: flex; */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">wrap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">ccc</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">ccc</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 2.形成 BFC: display: flex; */</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">wrap</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">ccc</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>父子相邻 margin 重叠</p><p>（1）给父元素添加透明边框</p><p>（2）给父元素添加overflow: hidden;</p><p>（3）给父元素添加position: fixed;</p><p>（4）给父元素添加display: table/flex/grid;</p><p>（5）将子元素都margin改为父元素的padding</p><h2 id="可替换元素" tabindex="-1">可替换元素 <a class="header-anchor" href="#可替换元素" aria-label="Permalink to &quot;可替换元素&quot;">​</a></h2><p>在 HTML 中， 是指其内容不受文档流影响，而是由外部资源定义的元素。</p><p>这些元素的内容可以通过 CSS 样式或者 JavaScript 来修改，但是本身的标签和属性并不能直接控制其显示效果。</p><p>常见的可替换元素包括 img、input、textarea、select、video、audio</p><h2 id="canvas和svg区别" tabindex="-1">Canvas和SVG区别 <a class="header-anchor" href="#canvas和svg区别" aria-label="Permalink to &quot;Canvas和SVG区别&quot;">​</a></h2><p>Canvas和SVG都是用于创建图形的HTML5元素，但它们有着不同的工作原理和适用场景。</p><p>Canvas是一种基于位图的绘图技术，它使用JavaScript在HTML5画布中创建像素级别的图形，可以制作出非常复杂的动态效果。Canvas要求开发者掌握像素级别的操作，需要自己编写代码来实现各种绘图功能，因此相对较难掌握。</p><p>而SVG是基于矢量图形的绘图技术，它利用XML描述二维图形，并通过浏览器解析渲染出来。由于SVG是基于矢量图形的绘图技术，所以它具有无限放大和缩小不失真的优势。另外，SVG也具有更好的可访问性和SEO性能。</p><p>总的来说，如果需要制作交互式和复杂的图形应用程序，Canvas是更好的选择；而如果需要制作高质量的静态图形、图表或图标等，则SVG更适合。</p><div class="tip custom-block"><p class="custom-block-title">矢量图形</p><p>矢量图形是由数学方程描述的二维图形，通常使用直线、曲线、多边形和文本等基本几何形状来创建。相比于位图图像（如JPEG、PNG等），矢量图形不会失真或模糊，无论放大或缩小都保持清晰度，因为它们是基于数学公式创建的，并且可以被无限放大或缩小而不会失去精度。此外，矢量图形还可以编辑和修改，使得它们在设计、制作标志、海报、传单、名片、网站等方面的应用非常广泛。</p></div><h2 id="使用base64编码的图片具有以下优点" tabindex="-1">使用Base64编码的图片具有以下优点： <a class="header-anchor" href="#使用base64编码的图片具有以下优点" aria-label="Permalink to &quot;使用Base64编码的图片具有以下优点：&quot;">​</a></h2><ol><li><p>减少HTTP请求：将多个小图片合并为一个Base64编码字符串，可以减少浏览器与服务器之间的HTTP请求次数，提高页面加载速度。</p></li><li><p>更好的页面性能：由于Base64编码后的图片是直接嵌入在HTML或CSS中的，而不需要额外的文件下载，因此可以更快地加载页面，提高页面性能。</p></li><li><p>简单易用：使用Base64编码的图片无需考虑图片路径等问题，只需要将编码后的字符串嵌入到HTML或CSS代码中即可。</p></li><li><p>可减少服务器负载：由于使用Base64编码的图片无需额外的文件下载，减少了服务器的负载。这对于高流量网站来说非常重要。</p></li></ol><p><strong>缺点：</strong></p><ol><li><p>图片大小增大：由于Base64编码会将图片转换成文本形式，因此会使得图片的大小增加约1/3左右。</p></li><li><p>编码和解码需要计算资源：由于编码和解码都需要进行大量的计算，因此可能会影响页面加载速度。</p></li><li><p>不适合大型图片：对于较大的图片（尤其是超过几百KB的图片），使用Base64编码会导致HTML或CSS文件变得非常大，影响页面加载速度。</p></li></ol><h2 id="优化大量图片的加载方法-提高用户体验" tabindex="-1">优化大量图片的加载方法，提高用户体验： <a class="header-anchor" href="#优化大量图片的加载方法-提高用户体验" aria-label="Permalink to &quot;优化大量图片的加载方法，提高用户体验：&quot;">​</a></h2><ol><li><p>压缩图片：使用图片压缩工具，将图片大小进行压缩，可以减少图片文件的大小，从而加快加载速度。</p></li><li><p>使用图片CDN：将图片存储在专门的CDN（内容分发网络）服务器上，可以使得图片加载更快，同时也减轻了原始服务器的负载。</p></li><li><p>延迟加载：将页面上非关键图片设置为延迟加载，当用户滚动到页面的对应位置时再加载图片，可以减少初始加载时的负担，提高页面的加载速度和响应性。</p></li><li><p>使用矢量图形代替位图：对于一些简单的图标和装饰性元素，可以使用矢量图形代替位图。矢量图形在放大或缩小时不会失真，并且通常比位图更小。</p></li><li><p>利用浏览器缓存：将图片缓存在用户的浏览器中，可以减少重复加载同一张图片的次数，提高页面加载速度。</p></li><li><p>懒加载：懒加载可以避免在页面中加载不必要的图片，只有用户需要查看某张图片时才会被加载。这种方式可以大幅减少初始页面加载时间，提高用户体验。</p></li><li><p>合并多个小图片成一张大图：将多张小图片合并到一张大图中，通过CSS定位显示指定位置的小图片，可以减少请求次数，提高页面加载速度。</p></li></ol><h2 id="优雅降级和渐进增强" tabindex="-1">优雅降级和渐进增强 <a class="header-anchor" href="#优雅降级和渐进增强" aria-label="Permalink to &quot;优雅降级和渐进增强&quot;">​</a></h2><p>优雅降级：在编写项目时，直接针对最高级、最稳定的版本进行开发。然后在后续对低版本进行兼容。 渐进增强：在编写项目时，针对自己想个兼容的最低版本进行开发。然后在后续对高版本的新特性开发，或者更好的体验</p><h2 id="新项目css架构设计入手方向" tabindex="-1">新项目css架构设计入手方向 <a class="header-anchor" href="#新项目css架构设计入手方向" aria-label="Permalink to &quot;新项目css架构设计入手方向&quot;">​</a></h2><ol><li>公共变量（主题色/主要空隙/主要字号字体等）</li><li>编译器（scss/less/postcss/stylus）</li><li>自适应方案（栅格/rem/vw/pt）</li><li>目录约定（mixin/common/theme/module/response）</li><li>私有化方案（scoped/css module/css in js）</li></ol><h2 id="tailwindcss断点对应设备" tabindex="-1">Tailwindcss断点对应设备 <a class="header-anchor" href="#tailwindcss断点对应设备" aria-label="Permalink to &quot;Tailwindcss断点对应设备&quot;">​</a></h2><table><thead><tr><th>Breakpoint prefix</th><th>Minimum width</th><th>CSS</th><th>代表设备</th></tr></thead><tbody><tr><td>不写</td><td>-</td><td>-</td><td>手机</td></tr><tr><td><code>sm</code></td><td>640px</td><td><code>@media (min-width: 640px) { ... }</code></td><td>大屏手机</td></tr><tr><td><code>md</code></td><td>768px</td><td><code>@media (min-width: 768px) { ... }</code></td><td>768-1024代表 Ipad（Ipad Mini = 768）</td></tr><tr><td><code>lg</code></td><td>1024px</td><td><code>@media (min-width: 1024px) { ... }</code></td><td>iPad Pro</td></tr><tr><td><code>xl</code></td><td>1280px</td><td><code>@media (min-width: 1280px) { ... }</code></td><td>小型笔记本</td></tr><tr><td><code>2xl</code></td><td>1536px</td><td><code>@media (min-width: 1536px) { ... }</code></td><td>电脑显示器</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/CSS/基础面试题.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>计算机网络</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>进阶面试题</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" "b/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html"
new file mode 100644
index 00000000..c3643279
--- /dev/null
+++ "b/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html"
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_CSS_进阶面试题.md.6b9b42f1.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_CSS_%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-6b87e69f><div><h2 id="实现一个元素的宽高比" tabindex="-1">实现一个元素的宽高比 <a class="header-anchor" href="#实现一个元素的宽高比" aria-label="Permalink to &quot;实现一个元素的宽高比&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">wrapper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">padding-top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">56.25</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* 16:9 宽高比 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">bottom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">wrapper</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">padding-top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">56.25</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* 16:9 宽高比 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">content</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">bottom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>维持正方形</strong>: 宽度发生改变时，利用伪元素撑开高度，从而保持正方形。</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">square</span><span style="color:#666666;">::</span><span style="color:#BD976A;">after</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">block</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding-bottom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">square</span><span style="color:#999999;">::</span><span style="color:#B07D48;">after</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">block</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding-bottom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="sass-中-mixin-与-extend的区别" tabindex="-1">Sass 中@mixin 与@extend的区别 <a class="header-anchor" href="#sass-中-mixin-与-extend的区别" aria-label="Permalink to &quot;Sass 中@mixin 与@extend的区别&quot;">​</a></h2><details class="details custom-block"><summary>主要区别在于代码生成的方式</summary><p>@mixin会直接将@mixin中的样式复制到@include处，而@extend则会生成一个新的选择器，并继承被@extend的选择器的样式。 因此，@mixin适用于将一组样式应用于多个选择器，而@extend适用于继承现有样式并生成新的选择器。</p></details><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#758575DD;">/* @extend：在现有样式加上加上新类名 */</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-style</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-primary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">extend</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">.</span><span style="color:#BD976A;">button-style</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-secondary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">extend</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">.</span><span style="color:#BD976A;">button-style</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">/* @mixin：把样式复制到指定类名 */</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">mixin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">button-style</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-primary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">include</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">button-style</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-secondary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">include</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">button-style</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">/* @extend：在现有样式加上加上新类名 */</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-style</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-primary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">extend</span><span style="color:#393A34;"> </span><span style="color:#999999;">.</span><span style="color:#B07D48;">button-style</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-secondary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">extend</span><span style="color:#393A34;"> </span><span style="color:#999999;">.</span><span style="color:#B07D48;">button-style</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">/* @mixin：把样式复制到指定类名 */</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">mixin</span><span style="color:#393A34;"> </span><span style="color:#59873A;">button-style</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-primary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">include</span><span style="color:#393A34;"> </span><span style="color:#59873A;">button-style</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-secondary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">include</span><span style="color:#393A34;"> </span><span style="color:#59873A;">button-style</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>转化结果：</strong></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">charset</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">UTF-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">/* @extend：在现有样式加上加上新类名 */</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-style</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">.</span><span style="color:#BD976A;">button-secondary</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">.</span><span style="color:#BD976A;">button-primary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">/* @mixin：把样式复制到指定类名 */</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-primary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-secondary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">charset</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">UTF-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">/* @extend：在现有样式加上加上新类名 */</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-style</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">.</span><span style="color:#B07D48;">button-secondary</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">.</span><span style="color:#B07D48;">button-primary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">/* @mixin：把样式复制到指定类名 */</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-primary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-secondary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/CSS/进阶面试题.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>基础面试题</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>高级面试题</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/CSS/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" "b/Interview/CSS/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html"
new file mode 100644
index 00000000..bc54f78a
--- /dev/null
+++ "b/Interview/CSS/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_CSS_高级面试题.md.63a54546.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_CSS_%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-6b87e69f><div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/CSS/高级面试题.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>进阶面试题</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Promise相关</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/JavaScript/Promise\347\233\270\345\205\263.html" "b/Interview/JavaScript/Promise\347\233\270\345\205\263.html"
new file mode 100644
index 00000000..1d6a2fff
--- /dev/null
+++ "b/Interview/JavaScript/Promise\347\233\270\345\205\263.html"
@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_JavaScript_Promise相关.md.1015a7af.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_JavaScript_Promise%E7%9B%B8%E5%85%B3" data-v-6b87e69f><div><h2 id="前端如何做到并发请求" tabindex="-1">前端如何做到并发请求 <a class="header-anchor" href="#前端如何做到并发请求" aria-label="Permalink to &quot;前端如何做到并发请求&quot;">​</a></h2><ol><li>使用AJAX及其各种高级封装的异步技术，如jQuery的$.ajax()、axios等；</li><li>使用Promise(ES6)异步编程，如使用axios.all()或者Promise.all()多个请求并发发出；</li><li>使用Web Workers技术，将任务并发分发到多个Web Worker中执行；</li><li>使用WebSocket技术，可单个持久链接上进行多次请求；</li><li>使用Stream API技术，浏览器可以同时消费多个数据流，实现多个请求的并发；</li><li>使用定时器setInterval()及setTimeout()，可定时发出多个需要并发请求；</li></ol><h3 id="方法一-封装队列" tabindex="-1">方法一:封装队列 <a class="header-anchor" href="#方法一-封装队列" aria-label="Permalink to &quot;方法一:封装队列&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">taskQueue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">queue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">error</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">max</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">run</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">addTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">task</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">task</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">run</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">min</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">min</span><span style="color:#666666;">(</span><span style="color:#BD976A;">length</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">max</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">min</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">max</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//开始占用任务空间</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">task</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">shift</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">task</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[ res ]-131</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">error</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">finally</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">max</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//释放占用空间</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">run</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//测试</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">✅</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// delay % 3 ? resolve(&quot;✅&quot; + delay) : reject(&quot;❌&quot; + delay);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">task</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">taskQueue</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">100</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2600</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">400</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">300</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">600</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">900</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">700</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">times</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">task</span><span style="color:#666666;">.</span><span style="color:#80A665;">addTask</span><span style="color:#666666;">(</span><span style="color:#80A665;">createTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">taskQueue</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">queue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">error</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">max</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">run</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">addTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">task</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">task</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">run</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">min</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">min</span><span style="color:#999999;">(</span><span style="color:#B07D48;">length</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">max</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">min</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">max</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//开始占用任务空间</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">task</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">shift</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">task</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[ res ]-131</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">error</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">finally</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">max</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//释放占用空间</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">run</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//测试</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">✅</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// delay % 3 ? resolve(&quot;✅&quot; + delay) : reject(&quot;❌&quot; + delay);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">task</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">taskQueue</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">100</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2600</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">400</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">300</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">600</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">900</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">700</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1000</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">times</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">task</span><span style="color:#999999;">.</span><span style="color:#59873A;">addTask</span><span style="color:#999999;">(</span><span style="color:#59873A;">createTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span></code></pre></div><h3 id="方法二-函数封装" tabindex="-1">方法二:函数封装 <a class="header-anchor" href="#方法二-函数封装" aria-label="Permalink to &quot;方法二:函数封装&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 并发请求函数</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">concurrencyRequest</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">maxNum</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">([]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">results</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 下一个请求的下标</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">count</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 当前请求完成的数量</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 发送请求</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">request</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 保存序号，使result和tasks相对应</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">index</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[ resp ]-29</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resp</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">results</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resp</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">results</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">err</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">finally</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">count</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 判断是否所有的请求都已完成</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">count</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">完成了</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">results</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">request</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">min</span><span style="color:#666666;">(</span><span style="color:#BD976A;">maxNum</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">request</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//测试代码</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">✅</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// delay % 3 ? resolve(&quot;✅&quot; + delay) : reject(&quot;❌&quot; + delay);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">100</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2600</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">400</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">300</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">600</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">900</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">700</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[ tasks ]-141</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">concurrencyRequest</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">).</span><span style="color:#80A665;">then</span><span style="color:#666666;">((</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[ res ]-143</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 并发请求函数</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">concurrencyRequest</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">maxNum</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">([]);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">results</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 下一个请求的下标</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">count</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 当前请求完成的数量</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 发送请求</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">request</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 保存序号，使result和tasks相对应</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">index</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resp</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]();</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[ resp ]-29</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resp</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">results</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resp</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">results</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">err</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">finally</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">count</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 判断是否所有的请求都已完成</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">count</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">完成了</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">results</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">request</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">min</span><span style="color:#999999;">(</span><span style="color:#B07D48;">maxNum</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">request</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//测试代码</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">✅</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// delay % 3 ? resolve(&quot;✅&quot; + delay) : reject(&quot;❌&quot; + delay);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">100</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2600</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">400</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">300</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">600</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">900</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">700</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1000</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[ tasks ]-141</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">concurrencyRequest</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">).</span><span style="color:#59873A;">then</span><span style="color:#999999;">((</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[ res ]-143</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span></code></pre></div><h2 id="web-worker" tabindex="-1">Web Worker <a class="header-anchor" href="#web-worker" aria-label="Permalink to &quot;Web Worker&quot;">​</a></h2><p>可以创建一个独立线程, 因为不会阻塞主线程运行,可以将比较耗费资源操作放在里面执行,比如耗时计算,可以通过 <code>postMessage</code> 进行线程间通信</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 主线程</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">worker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Worker</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">worker.js</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">worker</span><span style="color:#666666;">.</span><span style="color:#80A665;">postMessage</span><span style="color:#666666;">([</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">24</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#BD976A;">worker</span><span style="color:#666666;">.</span><span style="color:#80A665;">onmessage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// Worker 线程</span></span>
+<span class="line"><span style="color:#80A665;">onmessage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">postMessage</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 主线程</span></span>
+<span class="line"><span style="color:#BD976A;">worker</span><span style="color:#666666;">.</span><span style="color:#80A665;">terminate</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 主线程</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">worker</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Worker</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">worker.js</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">worker</span><span style="color:#999999;">.</span><span style="color:#59873A;">postMessage</span><span style="color:#999999;">([</span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">24</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#B07D48;">worker</span><span style="color:#999999;">.</span><span style="color:#59873A;">onmessage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// Worker 线程</span></span>
+<span class="line"><span style="color:#59873A;">onmessage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">postMessage</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 主线程</span></span>
+<span class="line"><span style="color:#B07D48;">worker</span><span style="color:#999999;">.</span><span style="color:#59873A;">terminate</span><span style="color:#999999;">()</span></span></code></pre></div><p>在 Worker 线程中，self 和 this 都代表子线程的全局对象。对于监听 message 事件，以下的四种写法:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 写法 1</span></span>
+<span class="line"><span style="color:#BD976A;">self</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">message</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ...</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 写法 2</span></span>
+<span class="line"><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">message</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ...</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 写法 3</span></span>
+<span class="line"><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">message</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ...</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 写法 4</span></span>
+<span class="line"><span style="color:#80A665;">onmessage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ...</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 写法 1</span></span>
+<span class="line"><span style="color:#B07D48;">self</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">message</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ...</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 写法 2</span></span>
+<span class="line"><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">message</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ...</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 写法 3</span></span>
+<span class="line"><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">message</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ...</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 写法 4</span></span>
+<span class="line"><span style="color:#59873A;">onmessage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ...</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="service-worker" tabindex="-1">Service Worker <a class="header-anchor" href="#service-worker" aria-label="Permalink to &quot;Service Worker&quot;">​</a></h2><p>服务器与浏览器之间的中间人，如果网站中注册了<strong>Service Worker</strong>那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器,我们在<strong>Service Worker</strong> 中可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等先关操作，其中最重要且广泛的的作用就是离线资源缓存。</p><h2 id="特性" tabindex="-1">特性 <a class="header-anchor" href="#特性" aria-label="Permalink to &quot;特性&quot;">​</a></h2><ol><li>基于web worker（JavaScript主线程的独立线程，如果执行消耗大量资源的操作也不会堵塞主线程）</li><li>在web worker的基础上增加了离线缓存的能力</li><li>本质上充当Web应用程序（服务器）与浏览器之间的代理服务器</li><li>创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）</li><li>由事件驱动的,具有生命周期</li><li>可以访问cache和indexDB</li><li>支持消息推送</li><li>并且可以让开发者自己控制管理缓存的内容以及版本</li><li>可以通过 postMessage 接口把数据传递给其他JS 文件</li><li>更多无限可能</li></ol><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>不能访问 DOM、不能同步操作</p></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/JavaScript/Promise相关.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>高级面试题</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>原型与原型链</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.html" "b/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.html"
new file mode 100644
index 00000000..06f76e80
--- /dev/null
+++ "b/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.html"
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_JavaScript_原型与原型链.md.4ad216b5.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_JavaScript_%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-6b87e69f><div><h2 id="new-对象的执行过程" tabindex="-1">new 对象的执行过程 <a class="header-anchor" href="#new-对象的执行过程" aria-label="Permalink to &quot;new 对象的执行过程&quot;">​</a></h2><ol><li><p>创建一个新对象：new操作符会创建一个新对象，该对象会继承自构造函数的原型对象。</p></li><li><p>设置对象的原型：新对象的<code>__proto__</code>属性会被设置为构造函数的原型对象<code>prototype</code>。</p></li><li><p>执行构造函数：构造函数会被执行，<code>this</code> 指向新创建的对象。在构造函数内部，可以通过<code>this</code>关键字来添加属性和方法到新对象中。</p></li><li><p>对构造函数有返回值的处理判断：</p><ol><li>如果构造函数没有显式地返回对象，返回新创建的对象；(基本类型忽略)</li><li>如果构造函数返回了一个对象，则返回该对象。(引用类型返回)</li></ol></li></ol><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Alice</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">person</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// { name: &#39;Alice&#39;, age: 18 }</span></span>
+<span class="line"><span style="color:#758575DD;">//new Person(&#39;Alice&#39;, 18)会创建一个新的对象，并执行Person函数，将this关键字指向新对象。最后返回新对象，赋值给变量person。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">person</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Alice</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">person</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// { name: &#39;Alice&#39;, age: 18 }</span></span>
+<span class="line"><span style="color:#A0ADA0;">//new Person(&#39;Alice&#39;, 18)会创建一个新的对象，并执行Person函数，将this关键字指向新对象。最后返回新对象，赋值给变量person。</span></span></code></pre></div><h2 id="原型和原型链" tabindex="-1">原型和原型链 <a class="header-anchor" href="#原型和原型链" aria-label="Permalink to &quot;原型和原型链&quot;">​</a></h2><p>作用：解决构造函数浪费内存问题，实现对象属性和方法的共享。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Star</span><span style="color:#666666;">(){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">star1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Star</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">star1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">__proto__</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">star1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Star</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Start</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Object</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#B8A965;">__proto__</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Function</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">//Object顶级对象是 顶级构造器 Fcuntion 的实例</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Star</span><span style="color:#999999;">(){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">star1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Star</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">star1</span><span style="color:#999999;">.</span><span style="color:#998418;">__proto__</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">star1</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">Star</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#998418;">Start</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#998418;">Object</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#998418;">__proto__</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//null</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Function</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">//Object顶级对象是 顶级构造器 Fcuntion 的实例</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-14-31-08.png" alt="2023-03-03-14-31-08"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-14-55-44.png" alt="2023-03-03-14-55-44"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-16-50-56.png" alt="2023-03-03-16-50-56"></p><h3 id="函数的隐式原型对象" tabindex="-1">函数的隐式原型对象 <a class="header-anchor" href="#函数的隐式原型对象" aria-label="Permalink to &quot;函数的隐式原型对象&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">test</span><span style="color:#666666;">(){}</span></span>
+<span class="line"><span style="color:#BD976A;">test</span><span style="color:#666666;">.</span><span style="color:#B8A965;">__proto__</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Function</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">//ture</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">test</span><span style="color:#999999;">(){}</span></span>
+<span class="line"><span style="color:#B07D48;">test</span><span style="color:#999999;">.</span><span style="color:#998418;">__proto__</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Function</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">//ture</span></span></code></pre></div><p>本身 ---&gt; 构造函数.prototype(本身<code>.__proto__</code>) ---&gt; 构造函数原型对象的原型<code>.prototype.__proto__</code>...---&gt;Object.prototype ---&gt; null</p><h2 id="js继承有哪些方式" tabindex="-1">JS继承有哪些方式 <a class="header-anchor" href="#js继承有哪些方式" aria-label="Permalink to &quot;JS继承有哪些方式&quot;">​</a></h2><h3 id="方式一-es6" tabindex="-1">方式一：ES6 <a class="header-anchor" href="#方式一-es6" aria-label="Permalink to &quot;方式一：ES6&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">super</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">张三</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">o1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Child</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">o1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">o1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">o1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Child</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">super</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">张三</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">o1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Child</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">o1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">o1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">o1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">);</span></span></code></pre></div><h3 id="方式二-原型链继承" tabindex="-1">方式二：原型链继承 <a class="header-anchor" href="#方式二-原型链继承" aria-label="Permalink to &quot;方式二：原型链继承&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Parent</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Child</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">张三</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//子构造函数原型对象指向父构造函数实例</span></span>
+<span class="line"><span style="color:#B8A965;">Child</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Parent</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">o2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Child</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">o2</span><span style="color:#666666;">,</span><span style="color:#BD976A;">o2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">o2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Parent</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Child</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">张三</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//子构造函数原型对象指向父构造函数实例</span></span>
+<span class="line"><span style="color:#998418;">Child</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Parent</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">o2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Child</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">o2</span><span style="color:#999999;">,</span><span style="color:#B07D48;">o2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">o2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">);</span></span></code></pre></div><h3 id="方式三-借用构造函数继承" tabindex="-1">方式三：借用构造函数继承 <a class="header-anchor" href="#方式三-借用构造函数继承" aria-label="Permalink to &quot;方式三：借用构造函数继承&quot;">​</a></h3><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#dbd7caee;">function Parent(){</span></span>
+<span class="line"><span style="color:#dbd7caee;">	this.age = 22;</span></span>
+<span class="line"><span style="color:#dbd7caee;">}</span></span>
+<span class="line"><span style="color:#dbd7caee;">function Child(){</span></span>
+<span class="line"><span style="color:#dbd7caee;">	this.name = &#39;张三&#39;</span></span>
+<span class="line"><span style="color:#dbd7caee;">	Parent.call(this);</span></span>
+<span class="line"><span style="color:#dbd7caee;">}</span></span>
+<span class="line"><span style="color:#dbd7caee;">let o3 = new Child();</span></span>
+<span class="line"><span style="color:#dbd7caee;">console.log( o3,o3.name,o3.age );</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393a34;">function Parent(){</span></span>
+<span class="line"><span style="color:#393a34;">	this.age = 22;</span></span>
+<span class="line"><span style="color:#393a34;">}</span></span>
+<span class="line"><span style="color:#393a34;">function Child(){</span></span>
+<span class="line"><span style="color:#393a34;">	this.name = &#39;张三&#39;</span></span>
+<span class="line"><span style="color:#393a34;">	Parent.call(this);</span></span>
+<span class="line"><span style="color:#393a34;">}</span></span>
+<span class="line"><span style="color:#393a34;">let o3 = new Child();</span></span>
+<span class="line"><span style="color:#393a34;">console.log( o3,o3.name,o3.age );</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/JavaScript/原型与原型链.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Promise相关</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>基础面试题</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" "b/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html"
new file mode 100644
index 00000000..3a75fa2f
--- /dev/null
+++ "b/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html"
@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>常见基础面试题 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_JavaScript_基础面试题.md.0df982a7.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_JavaScript_%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-6b87e69f><div><h1 id="常见基础面试题" tabindex="-1">常见基础面试题 <a class="header-anchor" href="#常见基础面试题" aria-label="Permalink to &quot;常见基础面试题&quot;">​</a></h1><h2 id="数据类型" tabindex="-1">数据类型 <a class="header-anchor" href="#数据类型" aria-label="Permalink to &quot;数据类型&quot;">​</a></h2><p>原始类型：<code>number,string,boolean,null,undefined,bigint,symbol</code></p><p>引用类型：Object</p><ul><li>标准普通对象：<code>Object</code></li><li>标准准特殊对象：<code>Array,Date,Math,Error,RegExp</code></li><li>非标准特殊对象（包装类型）：<code>Number,String,Boolean</code></li><li>可执行对象：<code>Function</code></li></ul><div class="tip custom-block"><p class="custom-block-title">Symbol应用</p><ol><li>对象<strong>唯一值</strong>属性</li><li>唯一标识统一管理（pinia 中的 storeId）</li><li>iterator底层实现机制</li></ol></div><h3 id="类型检测方式" tabindex="-1">类型检测方式 <a class="header-anchor" href="#类型检测方式" aria-label="Permalink to &quot;类型检测方式&quot;">​</a></h3><ol><li>typeof：所有数据类型，在计算机底层都是按照‘64 位二进制’进行存储的， typeof是按照二进制值进行检测类型的<details class="details custom-block"><summary>详细转换机制</summary></details></li><li>若二进制前三位是‘0’,并且实现了 <code>call</code> 方法，则返回 <code>function</code>，没有实现则返回 <code>object</code></li><li>null是 64 个 ‘0’，<code>typeof null</code> ---&gt; &#39;object&#39;(局限性)</li><li>检测未被声明的变量，返回 <code>undefined</code> :::</li></ol><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">object</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">object</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><h2 id="数据类型转换" tabindex="-1">数据类型转换 <a class="header-anchor" href="#数据类型转换" aria-label="Permalink to &quot;数据类型转换&quot;">​</a></h2><h3 id="其他类型转为数字类型" tabindex="-1">其他类型转为数字类型 <a class="header-anchor" href="#其他类型转为数字类型" aria-label="Permalink to &quot;其他类型转为数字类型&quot;">​</a></h3><p>规则：</p><ol><li><p><strong>宇符串转换为数宇</strong>：空宇符串变为0，如果出现任何非有效数宇宇符，结果都是NaN</p></li><li><p><strong>把布尔转换为数宇</strong>：<code>true-&gt;1 ; false-&gt;0</code></p></li><li><p><code>null-&gt;0 ; undefined-&gt;NaN</code></p></li><li><p><strong>Symbol无法转换为数宇</strong>，会报错：<code>Uncaught TypeError</code></p></li><li><p><strong>BigInt转为数字</strong>，会去除“n”（超过安全数宇的，会按照科学计数法处理）</p></li><li><p><strong>把对象转换为数字</strong>：</p></li></ol><ul><li>先调用对線的 <code>Symbol.toPrimitive</code> 这个方法，如果不存在这个方法</li><li>再调用对泉的 <code>valueof</code> 获取原始值，如果获取的值不是原始值，比如数组</li><li>再调用对線的 <code>toString</code> 把其变为字符串</li><li>最后再把宇符串基于Number方法转换为数字</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">,</span><span style="color:#BD976A;">radix</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">parseFloat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">和</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#CB7676;">undefined</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">NaN</span></span>
+<span class="line"><span style="color:#758575DD;">/*  规则：val 必须是字符串，不是则自动转为字符串；</span></span>
+<span class="line"><span style="color:#758575DD;">      然后再 从左往右 找符合 radix（进制）有效数字，一个没找到则返回 NaN，</span></span>
+<span class="line"><span style="color:#758575DD;">      遇到一个非有效数字字符，则停止查找，并 parseInt(之前符合的字符串)  parseInt(&#39;12px&#39;) -&gt; 12</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">,</span><span style="color:#B07D48;">radix</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">parseFloat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">和</span><span style="color:#393A34;"> </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#AB5959;">undefined</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">NaN</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*  规则：val 必须是字符串，不是则自动转为字符串；</span></span>
+<span class="line"><span style="color:#A0ADA0;">      然后再 从左往右 找符合 radix（进制）有效数字，一个没找到则返回 NaN，</span></span>
+<span class="line"><span style="color:#A0ADA0;">      遇到一个非有效数字字符，则停止查找，并 parseInt(之前符合的字符串)  parseInt(&#39;12px&#39;) -&gt; 12</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-04-22-31-38.png" alt="2023-03-04-22-31-38"></p><h3 id="其他类型转为字符串" tabindex="-1">其他类型转为字符串 <a class="header-anchor" href="#其他类型转为字符串" aria-label="Permalink to &quot;其他类型转为字符串&quot;">​</a></h3><p>隐式转换：<code>String(val)</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">10</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#CB7676;">++</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 10（数字）  ++a / a++ 一定是数字运算</span></span>
+<span class="line"><span style="color:#758575DD;">//+出现在左边，转换为数字    +&#39;10&#39;-&gt;10</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">10</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#AB5959;">++</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 10（数字）  ++a / a++ 一定是数字运算</span></span>
+<span class="line"><span style="color:#A0ADA0;">//+出现在左边，转换为数字    +&#39;10&#39;-&gt;10</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-04-22-57-17.png" alt="2023-03-04-22-57-17"></p><h3 id="其他类型转为布尔类型" tabindex="-1">其他类型转为布尔类型 <a class="header-anchor" href="#其他类型转为布尔类型" aria-label="Permalink to &quot;其他类型转为布尔类型&quot;">​</a></h3><p>除了falsy值： <code>0、-0、NaN、null、undefined、空串</code>，其余都是 <code>true</code></p><h2 id="相等与全等区别" tabindex="-1">相等与全等区别 <a class="header-anchor" href="#相等与全等区别" aria-label="Permalink to &quot;相等与全等区别&quot;">​</a></h2><blockquote><p>相等(==)：两边数据类型不同，会先进行类型转换，再进行比较</p></blockquote><ol><li><strong>对象与字符串</strong>：对象转字符串 <code>Symbol.toPrimitive -&gt; valueOf -&gt; toString</code>，再比较</li><li><code>null == undefined --&gt; true </code> ；null/undefined 与其他任何值都不相等</li><li><strong>对象与对象</strong>，比较的是内存地址是否相同</li><li><strong>NaN 与其他</strong>，NaN 不与任何值相等，<code>NaN == NaN --&gt; false</code></li><li><strong>除了以上情况</strong>，只要两边类型不一致，剩下的都是转为数字，再进行比较</li></ol><blockquote><p>全等(===)：两个操作数类型相同，值也需相同才返回 true</p></blockquote><p><strong>可用==的情况</strong>：使用时相当于 <code>obj.a === null || obj.a === undefined</code></p><ol><li>判断对象的属性是否存在 <code>obj.a == null</code></li><li>判断函数的参数是否存在 <code>arg == null</code></li></ol><details class="details custom-block"><summary>面试题</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//题1：</span></span>
+<span class="line"><span style="color:#666666;">[]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#CB7676;">!</span><span style="color:#666666;">[]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//题2：</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;">;</span></span>
+<span class="line"><span style="color:#80A665;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  console.log(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">OK</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#B8A965;">)</span></span>
+<span class="line"><span style="color:#B8A965;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//解法一：利用==会进行类型转换，对象转为数字会经历:</span></span>
+<span class="line"><span style="color:#758575DD;">//Symbol.toPrimitive -&gt; valueOf -&gt; toString</span></span>
+<span class="line"><span style="color:#B8A965;">var a = {</span></span>
+<span class="line"><span style="color:#B8A965;">  i</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#BD976A;">Symbol</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toPrimitive</span><span style="color:#666666;">](){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">++</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">i</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//解法二：重写 toString</span></span>
+<span class="line"><span style="color:#BD976A;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toString</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#BD976A;">shift</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//解法三： 数据劫持</span></span>
+<span class="line"><span style="color:#BD976A;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">defineProperty</span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">a</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">get</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">++</span><span style="color:#BD976A;">i</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//题1：</span></span>
+<span class="line"><span style="color:#999999;">[]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">   </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;">   </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#AB5959;">!</span><span style="color:#999999;">[]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">   </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//题2：</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;">;</span></span>
+<span class="line"><span style="color:#59873A;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  console.log(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">OK</span><span style="color:#B5695999;">&#39;</span><span style="color:#998418;">)</span></span>
+<span class="line"><span style="color:#998418;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//解法一：利用==会进行类型转换，对象转为数字会经历:</span></span>
+<span class="line"><span style="color:#A0ADA0;">//Symbol.toPrimitive -&gt; valueOf -&gt; toString</span></span>
+<span class="line"><span style="color:#998418;">var a = {</span></span>
+<span class="line"><span style="color:#998418;">  i</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#B07D48;">Symbol</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toPrimitive</span><span style="color:#999999;">](){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">++</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">i</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//解法二：重写 toString</span></span>
+<span class="line"><span style="color:#B07D48;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toString</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#B07D48;">shift</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//解法三： 数据劫持</span></span>
+<span class="line"><span style="color:#B07D48;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">defineProperty</span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">a</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">get</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">++</span><span style="color:#B07D48;">i</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div></details><h2 id="怎么解决精度问题" tabindex="-1">怎么解决精度问题 <a class="header-anchor" href="#怎么解决精度问题" aria-label="Permalink to &quot;怎么解决精度问题&quot;">​</a></h2><blockquote><p><strong>根本原因</strong>：所有数据类型在计算机底层都是以<em>64位</em>二进制存储的，可能出现无限循环，超过 64 位部分被丢弃</p></blockquote><ol><li>将数字转为整数【扩大系数法】</li><li>第三方库：Math.js, decimal.js, big.js</li></ol><h2 id="var-let-const-区别" tabindex="-1">var/let/const 区别 <a class="header-anchor" href="#var-let-const-区别" aria-label="Permalink to &quot;var/let/const 区别&quot;">​</a></h2><table><thead><tr><th></th><th>var</th><th>let</th><th>const</th></tr></thead><tbody><tr><td>变量提升</td><td>支持</td><td>不支持</td><td>不支持</td></tr><tr><td>块级作用域</td><td>没有</td><td>有</td><td>有</td></tr><tr><td>暂存性死区</td><td>没有</td><td>存在</td><td>存在</td></tr><tr><td>能否修改</td><td></td><td></td><td>变量的值不能修改</td></tr><tr><td>变量的值不能修改</td><td>允许</td><td>不允许</td><td>不允许</td></tr></tbody></table><blockquote><p>函数声明会覆盖其他的同名的变量声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。</p></blockquote><h3 id="const" tabindex="-1">const <a class="header-anchor" href="#const" aria-label="Permalink to &quot;const&quot;">​</a></h3><ol><li><p>声明必须初始化</p></li><li><p>只读常量，变量的值不能修改</p><ul><li><p>简单类型 ：值就保存在变量指向的那个内存地址，等同于常量。</p></li><li><p>引用类型：变量指向的内存地址，保存的只是一个指向实际数据的指针；</p><p>const 只能保证指针固定，不能控制指向的数据结构。</p></li></ul></li></ol><h3 id="暂存性死区" tabindex="-1">暂存性死区 <a class="header-anchor" href="#暂存性死区" aria-label="Permalink to &quot;暂存性死区&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">暂存性死区</p><p>暂存性死区：使用 <code>let / const </code> 定义该变量之前的区域，</p><p>不能在声明前访问，作用域内被声明，不受外部影响</p><p>基于 let/const 变量声明，在词法解析阶段就已经明确了未来上下文中必定会有相关变量声明;</p><p>如果在声明前使用，则报错 <code>Uncaught ReferenceError</code></p></div><h2 id="this指向" tabindex="-1">this指向 <a class="header-anchor" href="#this指向" aria-label="Permalink to &quot;this指向&quot;">​</a></h2><ol><li>全局作用域中或者普通函数中指向全局对象window</li><li>立即执行函数必定指向window</li><li>构造函数中指向对象实例</li><li>事件绑定指向事件源对象</li><li>方法中谁调用就指向谁</li><li>定时器回调为普通函数指向window，箭头函数指向声明时所在外部作用域</li><li>forEach等回调函数默认指向<code>window</code>，指定第二个参数存在则指向第二个参数</li><li>严格模式指向<code>window</code>的变为<code>undefined</code></li></ol><h2 id="防抖与节流" tabindex="-1">防抖与节流 <a class="header-anchor" href="#防抖与节流" aria-label="Permalink to &quot;防抖与节流&quot;">​</a></h2><p>防抖：频繁触发某个事件时，在设定的时间内再次触发，会重新清除上一次定时器，重新开启定时器开始计时。</p><p>节流：频繁触发某个事件时，保证设定的时间内只会执行一次，只有等执行完才会打开节流阀执行下一个事件。</p><h3 id="防抖" tabindex="-1">防抖 <a class="header-anchor" href="#防抖" aria-label="Permalink to &quot;防抖&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//实现原理：每次触发事件时，取消之前的定时器，重新计时</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">debounce</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">clearTimeout</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//清除上一次</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//实现原理：每次触发事件时，取消之前的定时器，重新计时</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">debounce</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">clearTimeout</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//清除上一次</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>防抖拓展写法</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">debounce</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">immediate</span><span style="color:#666666;">=</span><span style="color:#4D9375;">false</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//参数判断处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">func</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TypeError</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">func is not a funciton</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//debounce(func,true)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">boolean</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">immediate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">isNaN</span><span style="color:#666666;">(</span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//若不是数字则默认 500</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">immediate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">boolean</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">immediate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//第一次自执行完，timer 已经有值，</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">now</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">immediate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">clearTimeout</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//清除上一次</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//结束边界触发</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">immediate</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//清除最后一个定时器</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">clearTimeout</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//若为立即执行，则第一次，开启边界触发</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">now</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">debounce</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">immediate</span><span style="color:#999999;">=</span><span style="color:#1E754F;">false</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//参数判断处理</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">func</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TypeError</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">func is not a funciton</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//debounce(func,true)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">boolean</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">immediate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">isNaN</span><span style="color:#999999;">(</span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//若不是数字则默认 500</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">immediate</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">boolean</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">immediate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//第一次自执行完，timer 已经有值，</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">now</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">immediate</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">clearTimeout</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//清除上一次</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//结束边界触发</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">immediate</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//清除最后一个定时器</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">clearTimeout</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//若为立即执行，则第一次，开启边界触发</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">now</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h3 id="节流" tabindex="-1">节流 <a class="header-anchor" href="#节流" aria-label="Permalink to &quot;节流&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//实现原理：每次触发事件时，判断当前是否存在等待执行的延时函数</span></span>
+<span class="line"><span style="color:#758575DD;">//方法一:定时器存在则什么都不做</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">throttle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//方法二:</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">throttle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">flag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//节流阀：开启状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">flag</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">flag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//已经在处理：关闭</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">flag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//处理完：重新打开</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//实现三：当前时间-上次执行时间 &gt; 设定时间，才执行</span></span>
+<span class="line"><span style="color:#BD976A;">funtion</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">throttle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">now</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Data</span><span style="color:#666666;">.</span><span style="color:#80A665;">now</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">now</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   		 </span><span style="color:#BD976A;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">now</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//实现原理：每次触发事件时，判断当前是否存在等待执行的延时函数</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法一:定时器存在则什么都不做</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">throttle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二:</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">throttle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">flag</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//节流阀：开启状态</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">flag</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">flag</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//已经在处理：关闭</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">flag</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//处理完：重新打开</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//实现三：当前时间-上次执行时间 &gt; 设定时间，才执行</span></span>
+<span class="line"><span style="color:#B07D48;">funtion</span><span style="color:#393A34;"> </span><span style="color:#59873A;">throttle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">start</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">now</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Data</span><span style="color:#999999;">.</span><span style="color:#59873A;">now</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">now</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">start</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   		 </span><span style="color:#B07D48;">start</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">now</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">应用</p><p>​ 防抖：输入框搜索、编辑框实时保存，（手机息屏策略，王者荣耀回城操作）</p><p>​ 节流：滚动到底部加载更多、图标跟随鼠标（地铁发车时间，王者荣耀技能冷却）</p></div><h2 id="前端本地存储方式" tabindex="-1">前端本地存储方式 <a class="header-anchor" href="#前端本地存储方式" aria-label="Permalink to &quot;前端本地存储方式&quot;">​</a></h2><h4 id="区别" tabindex="-1">区别 <a class="header-anchor" href="#区别" aria-label="Permalink to &quot;区别&quot;">​</a></h4><table><thead><tr><th></th><th>存储大小</th><th>存储时间</th><th>同源策略</th><th>在同一浏览器的相同域名、不同端口号下</th></tr></thead><tbody><tr><td><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage" target="_blank" rel="noreferrer">localStorage</a></td><td>5M</td><td>键值对以字符串形式存储，数据长期保留，不主动删除一直存在</td><td>受限制</td><td>不可以共享</td></tr><tr><td><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage" target="_blank" rel="noreferrer">sessionStorage</a></td><td>5M</td><td>会话结束自动清除（浏览器窗口关闭时）</td><td>协议隔离</td><td>跳转的页面可以共享</td></tr><tr><td><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie" target="_blank" rel="noreferrer">cookie</a></td><td>4kb</td><td>设置到期时间，过期清除</td><td>受限制</td><td>可以共享</td></tr></tbody></table><h3 id="用法" tabindex="-1">用法 <a class="header-anchor" href="#用法" aria-label="Permalink to &quot;用法&quot;">​</a></h3><p><strong>localStorage</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">localStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">setItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">//添加数据</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">localStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">getItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//读取数据</span></span>
+<span class="line"><span style="color:#BD976A;">localStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">removeItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">         </span><span style="color:#758575DD;">//移除单个</span></span>
+<span class="line"><span style="color:#BD976A;">localStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">clear</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;">                   </span><span style="color:#758575DD;">//移除所有</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">localStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">setItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">//添加数据</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">localStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">getItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//读取数据</span></span>
+<span class="line"><span style="color:#B07D48;">localStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">removeItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">         </span><span style="color:#A0ADA0;">//移除单个</span></span>
+<span class="line"><span style="color:#B07D48;">localStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">clear</span><span style="color:#999999;">();</span><span style="color:#393A34;">                   </span><span style="color:#A0ADA0;">//移除所有</span></span></code></pre></div><p><strong>sessionStorage</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">sessionStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">setItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 保存数据到 sessionStorage</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sessionStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">getItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//获取数据</span></span>
+<span class="line"><span style="color:#BD976A;">sessionStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">removeItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">//删除</span></span>
+<span class="line"><span style="color:#BD976A;">sessionStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">clear</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;">                  </span><span style="color:#758575DD;">//删除所有</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">sessionStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">setItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 保存数据到 sessionStorage</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sessionStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">getItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//获取数据</span></span>
+<span class="line"><span style="color:#B07D48;">sessionStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">removeItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">//删除</span></span>
+<span class="line"><span style="color:#B07D48;">sessionStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">clear</span><span style="color:#999999;">();</span><span style="color:#393A34;">                  </span><span style="color:#A0ADA0;">//删除所有</span></span></code></pre></div><p><strong>cookie</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cookies</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cookie</span><span style="color:#DBD7CAEE;">           </span><span style="color:#758575DD;">//同源下获取所有cookie</span></span>
+<span class="line"><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cookie</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key=value</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">           </span><span style="color:#758575DD;">//添加</span></span>
+<span class="line"><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cookie</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">key=; expires=xxx</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">//设定到期时间自动清除</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cookies</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cookie</span><span style="color:#393A34;">           </span><span style="color:#A0ADA0;">//同源下获取所有cookie</span></span>
+<span class="line"><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cookie</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key=value</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">           </span><span style="color:#A0ADA0;">//添加</span></span>
+<span class="line"><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cookie</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">key=; expires=xxx</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">//设定到期时间自动清除</span></span></code></pre></div><p><a href="https://zhuanlan.zhihu.com/p/95076534" target="_blank" rel="noreferrer"><strong>IndexedDB</strong></a></p><h2 id="generator" tabindex="-1">Generator <a class="header-anchor" href="#generator" aria-label="Permalink to &quot;Generator&quot;">​</a></h2><p>一是，<code>function</code>关键字与函数名之间有一个星号；</p><p>二是，函数体内部使用<code>yield</code>表达式，定义不同的内部状态。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">helloWorldGenerator</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">yield</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hello</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//123</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">yield</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">world</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//undefined</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ending</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">helloWorldGenerator</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#BD976A;">hw</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">hw</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">123</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//a = 123</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> </span><span style="color:#59873A;">helloWorldGenerator</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">yield</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hello</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//123</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">yield</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">world</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//undefined</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ending</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hw</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">helloWorldGenerator</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#B07D48;">hw</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">hw</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">(</span><span style="color:#2F798A;">123</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//a = 123</span></span></code></pre></div><p><code>nex()</code>传参会赋值给上一次<code>yield</code>的的返回值</p><h3 id="异步流程同步化" tabindex="-1">异步流程同步化 <a class="header-anchor" href="#异步流程同步化" aria-label="Permalink to &quot;异步流程同步化&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">test</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">yield</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">第一秒执行</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//第一秒执行</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">yield</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">第二秒执行</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">generatorRunner</span><span style="color:#666666;">(</span><span style="color:#BD976A;">fn</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">generator</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">step</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">generator</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//定义递归函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">loop</span><span style="color:#666666;">(</span><span style="color:#BD976A;">stepArg</span><span style="color:#666666;">,</span><span style="color:#BD976A;">generator</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//获取本次 yield 右侧的结果</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stepArg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//如果是 Promise 对象就在 then 函数的回调中获取本次程序结果</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//并且等待回调执行的时候进入下一次递归</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">((</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promiseValue</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">stepArg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">done</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">loop</span><span style="color:#666666;">(</span><span style="color:#BD976A;">generator</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promiseValue</span><span style="color:#666666;">),</span><span style="color:#BD976A;">generator</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    }</span><span style="color:#BD976A;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">//判断程序没有执行完就将本次结果传入下一步进入下一次递归</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  		</span><span style="color:#80A665;">if</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">!stepArg.done</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">loop</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">generator.next(stepArg.value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;">generator)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> 	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">loop</span><span style="color:#666666;">(</span><span style="color:#BD976A;">step</span><span style="color:#666666;">,</span><span style="color:#BD976A;">generator</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> </span><span style="color:#59873A;">test</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">yield</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">第一秒执行</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#2F798A;">1000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//第一秒执行</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">yield</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">第二秒执行</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#2F798A;">1000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">generatorRunner</span><span style="color:#999999;">(</span><span style="color:#B07D48;">fn</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">generator</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">step</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">generator</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//定义递归函数</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">loop</span><span style="color:#999999;">(</span><span style="color:#B07D48;">stepArg</span><span style="color:#999999;">,</span><span style="color:#B07D48;">generator</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//获取本次 yield 右侧的结果</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stepArg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//如果是 Promise 对象就在 then 函数的回调中获取本次程序结果</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//并且等待回调执行的时候进入下一次递归</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">((</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promiseValue</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">stepArg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">done</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">loop</span><span style="color:#999999;">(</span><span style="color:#B07D48;">generator</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promiseValue</span><span style="color:#999999;">),</span><span style="color:#B07D48;">generator</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    }</span><span style="color:#B07D48;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">//判断程序没有执行完就将本次结果传入下一步进入下一次递归</span></span>
+<span class="line"><span style="color:#393A34;">  		</span><span style="color:#59873A;">if</span><span style="color:#999999;">(</span><span style="color:#393A34;">!stepArg.done</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">loop</span><span style="color:#999999;">(</span><span style="color:#393A34;">generator.next(stepArg.value</span><span style="color:#999999;">),</span><span style="color:#393A34;">generator)</span></span>
+<span class="line"><span style="color:#393A34;"> 	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  }</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">loop</span><span style="color:#999999;">(</span><span style="color:#B07D48;">step</span><span style="color:#999999;">,</span><span style="color:#B07D48;">generator</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><h2 id="requestanimationframe" tabindex="-1">requestAnimationFrame <a class="header-anchor" href="#requestanimationframe" aria-label="Permalink to &quot;requestAnimationFrame&quot;">​</a></h2><p>60HZ/1000ms = 16.67ms(显示屏每毫秒刷新频率)</p><p><strong>起因</strong>：setTimeout/setInterval是异步 API，设置的时间间隔没办法保证。</p><p><strong>解决</strong>：为了设置更精确动画时间间隔、达到平滑动画效果。用法类似 <code>setTimeout</code> API， 本质采用的是系统时间间隔，而不是 JS 执行时间间隔。</p><p>希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。</p><p><strong>用法</strong>： <img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-02-15-53-32.png" alt="2023-03-02-15-53-32"></p><h2 id="浅拷贝和深拷贝" tabindex="-1">浅拷贝和深拷贝 <a class="header-anchor" href="#浅拷贝和深拷贝" aria-label="Permalink to &quot;浅拷贝和深拷贝&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">解释</p><p>浅拷贝：只拷贝一层，属性为对象时只复制值，不复制对象本身，指向同一对象 深拷贝：完全拷贝一份新的，新对象更改不会影响到旧对象</p></div><p>浅拷贝</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">({},</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//只拷贝对象自身的可枚举的属性</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//数组</span></span>
+<span class="line"><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhan</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">23</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4C9A91;">123</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4C9A91;">456</span></span>
+<span class="line"><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#758575DD;">//改变内部的引用类型两者都会有影响</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">({},</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//只拷贝对象自身的可枚举的属性</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//数组</span></span>
+<span class="line"><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhan</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">23</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#2F798A;">123</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#2F798A;">456</span></span>
+<span class="line"><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#A0ADA0;">//改变内部的引用类型两者都会有影响</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方式一：</span></span>
+<span class="line"><span style="color:#758575DD;">//会忽略undefined,function，RegExp,Date</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">stringify</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方式二：</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">object</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Date</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">RegExp</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">RegExp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">key</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#80A665;">hasOwnProperty</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方式一：</span></span>
+<span class="line"><span style="color:#A0ADA0;">//会忽略undefined,function，RegExp,Date</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">stringify</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方式二：</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">object</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Date</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">RegExp</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">RegExp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">key</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#59873A;">hasOwnProperty</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="事件捕获和冒泡机制" tabindex="-1">事件捕获和冒泡机制 <a class="header-anchor" href="#事件捕获和冒泡机制" aria-label="Permalink to &quot;事件捕获和冒泡机制&quot;">​</a></h2><p><strong>事件传播过程</strong>：事件捕获 ---&gt; 目标阶段---&gt; 事件冒泡</p><p><strong>事件捕获</strong>：从根元素(html)向内传播，直到目标元素，途中会触发绑定事件捕获元素的回调。<code>element.addEventListener(event, function, true)</code>。</p><p><strong>事件冒泡</strong>：从目标元素向外传播，直到根元素，途中会触发绑定事件冒泡元素的回调。<code>onclick</code>、<code>addEventListener</code>默认绑定冒泡阶段。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202303191147836.png" alt=""></p><p>阻止冒泡：<code>event.stopPropagation()</code></p><p>阻止默认行为：<code>event.preventDefault()</code>,例如：a标签跳转，表单按钮数据提交至服务器。</p><p>阻止同一节点其他后绑定事件执行：<code>event.stopImmediatePropagation()</code></p><h2 id="promise链式调用" tabindex="-1">Promise链式调用 <a class="header-anchor" href="#promise链式调用" aria-label="Permalink to &quot;Promise链式调用&quot;">​</a></h2><p>是指在一个Promise对象上多次调用then方法，每个then方法都可以接收上一个Promise对象的返回值，</p><p>并返回一个新的Promise对象，从而形成一个Promise链 ，从而实现多个异步操作的顺序执行和数据传递。</p><p>如果then方法中抛出了异常，那么后续的then方法会被跳过，直接执行catch方法。</p><p>如果then方法中返回了一个Promise对象，那么后续的then方法会等待该Promise对象的状态发生改变后再执行。</p><p>可以避免回调地狱，使得代码更加清晰易读。</p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/JavaScript/基础面试题.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>原型与原型链</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>字符串常用方法</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.html" "b/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.html"
new file mode 100644
index 00000000..da326f27
--- /dev/null
+++ "b/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.html"
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_JavaScript_字符串常用方法.md.4808f793.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_JavaScript_%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-6b87e69f><div><h2 id="字符串常用方法" tabindex="-1">字符串常用方法 <a class="header-anchor" href="#字符串常用方法" aria-label="Permalink to &quot;字符串常用方法&quot;">​</a></h2><p>​ <strong>都不会影响原字符串：因为字符串是不可变的！</strong></p><ol><li><p>增删改：<code>replace,replaceAll</code></p></li><li><p>增：<code>repeat,concat,padStart,padEnd</code></p></li><li><p>删：<code>substr,substring,slice,trim,trimStart,trimEnd</code></p></li><li><p>改：<code>split,toLowerCase,toUpperCase,toLocaleLowerCase,</code></p><p>​ <code>toLocaleUpperCase,</code> <code>String.fromCharCode()</code></p></li><li><p>查：<code>valueOf,at,charAt,charCodeAt,indexOf,lastIndexOf,</code></p><p>​ <code>search,includes,match,startsWith,endsWith</code></p></li></ol><h3 id="charcodeat与fromcharcode" tabindex="-1">charCodeAt与fromCharCode <a class="header-anchor" href="#charcodeat与fromcharcode" aria-label="Permalink to &quot;charCodeAt与fromCharCode&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ABC</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">.</span><span style="color:#80A665;">charCodeAt</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//67 返回指定索引位的 ASCII 码</span></span>
+<span class="line"><span style="color:#BD976A;">String</span><span style="color:#666666;">.</span><span style="color:#80A665;">fromCharCode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">65</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">66</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">67</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//&#39;ABC&#39; 返回 ASCII 码对应的字符</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ABC</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">.</span><span style="color:#59873A;">charCodeAt</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//67 返回指定索引位的 ASCII 码</span></span>
+<span class="line"><span style="color:#B07D48;">String</span><span style="color:#999999;">.</span><span style="color:#59873A;">fromCharCode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">65</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">66</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">67</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//&#39;ABC&#39; 返回 ASCII 码对应的字符</span></span></code></pre></div><h3 id="slice-与-substring区别" tabindex="-1">slice 与 substring区别 <a class="header-anchor" href="#slice-与-substring区别" aria-label="Permalink to &quot;slice 与 substring区别&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">slice 与 substring</p><p><strong>slice</strong> 结束索引<strong>大于等于</strong> 0 时且小于起始索引时，返回空；结束索引大于0从前面计数，小于0从后面计数的原则。</p><p><strong>substring</strong> 中如果结束索<strong>大于</strong>起始索引，则会自动将其调换后截取，当参数小于0 时按0处理。</p></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">www.map.baidu.com</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.bai</span></span>
+<span class="line highlighted"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//&#39;&#39;</span></span>
+<span class="line highlighted"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//.map.baidu</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//&#39;&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.baidu.com</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">www.map.baidu.com</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.bai</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.bai</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//www</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//www</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.baidu.com</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">www.map.baidu.com</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">11</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.bai</span></span>
+<span class="line highlighted"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">11</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//&#39;&#39;</span></span>
+<span class="line highlighted"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//.map.baidu</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//&#39;&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.baidu.com</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">www.map.baidu.com</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">11</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.bai</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">11</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.bai</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//www</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//www</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.baidu.com</span></span></code></pre></div><h3 id="valueof-与-tostring-的异同" tabindex="-1">valueOf 与 toString 的异同 <a class="header-anchor" href="#valueof-与-tostring-的异同" aria-label="Permalink to &quot;valueOf 与 toString 的异同&quot;">​</a></h3><p><strong>共同点</strong></p><p>都是对象的方法，用于将对象转换成可操作的基本类型值。</p><table><thead><tr><th></th><th>valueOf</th><th>toString</th></tr></thead><tbody><tr><td>返回值</td><td>原始值或对象本身</td><td>对象转换成可阅读的字符串</td></tr><tr><td>能否接受参数转换基数</td><td>不可以</td><td>可以，返回不同进制的字符串形式的数值</td></tr><tr><td>Date类型返回</td><td>现在到1970年1月1日的毫秒数</td><td>时间的字符串</td></tr></tbody></table><p><code>undefined</code> 和 <code>null </code> 都没有<code>toString() </code>和 <code>valueOf()</code> 方法</p><p><code>Object.prototype.toString.toString()</code> 能够很好的判断数据的类型及内置对象</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">Number</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//&#39;1010&#39;</span></span>
+<span class="line"><span style="color:#80A665;">Number</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">).</span><span style="color:#80A665;">valueOf</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">		</span><span style="color:#758575DD;">//10</span></span>
+<span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">().</span><span style="color:#80A665;">toString</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">		</span><span style="color:#758575DD;">//&#39;Thu Mar 02 2023 11:39:56 GMT+0800 (中国标准时间)&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">().</span><span style="color:#80A665;">valueOf</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> 		</span><span style="color:#758575DD;">//1677728421211</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">Number</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//&#39;1010&#39;</span></span>
+<span class="line"><span style="color:#59873A;">Number</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">).</span><span style="color:#59873A;">valueOf</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;">		</span><span style="color:#A0ADA0;">//10</span></span>
+<span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">().</span><span style="color:#59873A;">toString</span><span style="color:#999999;">()</span><span style="color:#393A34;">		</span><span style="color:#A0ADA0;">//&#39;Thu Mar 02 2023 11:39:56 GMT+0800 (中国标准时间)&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">().</span><span style="color:#59873A;">valueOf</span><span style="color:#999999;">()</span><span style="color:#393A34;"> 		</span><span style="color:#A0ADA0;">//1677728421211</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/JavaScript/字符串常用方法.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>基础面试题</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>进阶面试题</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" "b/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html"
new file mode 100644
index 00000000..50af6a89
--- /dev/null
+++ "b/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html"
@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>常见进阶面试题 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_JavaScript_进阶面试题.md.c89e986d.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_JavaScript_%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-6b87e69f><div><h1 id="常见进阶面试题" tabindex="-1">常见进阶面试题 <a class="header-anchor" href="#常见进阶面试题" aria-label="Permalink to &quot;常见进阶面试题&quot;">​</a></h1><h2 id="模块化" tabindex="-1">模块化 <a class="header-anchor" href="#模块化" aria-label="Permalink to &quot;模块化&quot;">​</a></h2><table><thead><tr><th>JS运行的环境</th><th>全局对象</th><th></th></tr></thead><tbody><tr><td>浏览器</td><td>window</td><td>直接支持ES6Module，但是不支持CommonJS</td></tr><tr><td>Node</td><td>global</td><td>支持CommonJS，但是不支持ES6Module</td></tr><tr><td>Webpack</td><td></td><td>Common JS&amp;ES6Module都支持，支持相互之间的“混用</td></tr><tr><td>Vite</td><td></td><td>基于ES6Module规范，实现模块之间的相互引用</td></tr></tbody></table><h2 id="闭包" tabindex="-1">闭包 <a class="header-anchor" href="#闭包" aria-label="Permalink to &quot;闭包&quot;">​</a></h2><p>闭包：作用域的一种特殊应用，内层函数作用域用到了外层函数作用域的变量。由于被内层函数引用，导致外层函数执行完变量不会被释放，就形成了闭包。</p><details class="details custom-block"><summary>闭包案例</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">func</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fn</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">func</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span><span style="color:#758575DD;">//10</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">func</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fn</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">func</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span><span style="color:#A0ADA0;">//10</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">set</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#BD976A;">val</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">data</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">get</span><span style="color:#DBD7CAEE;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">handle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">handle</span><span style="color:#666666;">.</span><span style="color:#80A665;">set</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">handle</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">set</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#B07D48;">val</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">data</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">get</span><span style="color:#393A34;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">handle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">handle</span><span style="color:#999999;">.</span><span style="color:#59873A;">set</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">handle</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">btns</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">querySelectorAll</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.btn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//5个按钮</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">btns</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//改用 let 形成闭包</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">btns</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">].</span><span style="color:#80A665;">onclick</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//输出结果都是 5</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//==&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">btns</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">btns</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">].</span><span style="color:#80A665;">onclick</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//输出结果: 01234</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}})(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">btns</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">querySelectorAll</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.btn</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//5个按钮</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">btns</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//改用 let 形成闭包</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">btns</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">].</span><span style="color:#59873A;">onclick</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//输出结果都是 5</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//==&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">btns</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">btns</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">].</span><span style="color:#59873A;">onclick</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//输出结果: 01234</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}})(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h3 id="应用" tabindex="-1">应用 <a class="header-anchor" href="#应用" aria-label="Permalink to &quot;应用&quot;">​</a></h3><ol><li>函数柯里化</li><li>变量私有化</li></ol><h3 id="弊端" tabindex="-1">弊端 <a class="header-anchor" href="#弊端" aria-label="Permalink to &quot;弊端&quot;">​</a></h3><p>过度使用闭包会造成内存占用过多，容易造成内存泄漏，手动清空可解决问题。</p><h2 id="函数柯里化" tabindex="-1">函数柯里化 <a class="header-anchor" href="#函数柯里化" aria-label="Permalink to &quot;函数柯里化&quot;">​</a></h2><details class="details custom-block"><summary>数组求和</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#758575DD;">//方法一：</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//方法二：</span></span>
+<span class="line"><span style="color:#80A665;">eval</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法一：</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二：</span></span>
+<span class="line"><span style="color:#59873A;">eval</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div></details><details class="details custom-block"><summary>实现 add(1,2)(3)</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">params</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// params:[1,2]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//args:[3]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">args</span><span style="color:#666666;">).</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//简化</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">params</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">args</span><span style="color:#666666;">).</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">params</span><span style="color:#999999;">){</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// params:[1,2]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//args:[3]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">args</span><span style="color:#999999;">).</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//简化</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">params</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">args</span><span style="color:#999999;">).</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span></span></code></pre></div></details><details class="details custom-block"><summary>实现 add(1)(2)(3)</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//简化</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//柯里化：curring 函数</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">curring</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span><span style="color:#758575DD;">//利用闭包存储实参</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">params</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">add</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//在对象转数字过程中，进行求和处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">add</span><span style="color:#666666;">[</span><span style="color:#BD976A;">Symbol</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toPrimitive</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">add</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">curring</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sum</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//21</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">sum</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//21</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//简化</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//柯里化：curring 函数</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">curring</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span><span style="color:#A0ADA0;">//利用闭包存储实参</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">params</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">add</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//在对象转数字过程中，进行求和处理</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">add</span><span style="color:#999999;">[</span><span style="color:#B07D48;">Symbol</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toPrimitive</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">add</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">curring</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">6</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sum</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//21</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">sum</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//21</span></span></code></pre></div></details><h3 id="compose" tabindex="-1">compose <a class="header-anchor" href="#compose" aria-label="Permalink to &quot;compose&quot;">​</a></h3><blockquote><p>思想：利用闭包预先存储，供其夏季上下文后期使用，可解决函数嵌套导致的可读性差问题。</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mul3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">div2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span></span>
+<span class="line"><span style="color:#758575DD;">//不使用柯里化：div2(mul3(add1(10)))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">compose</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">funcs</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//考虑不传函数，返回operate传的实参</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">funcs</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">funcs</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">operate</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">funcs</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduceRight</span><span style="color:#666666;">((</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#BD976A;">func</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">func</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">),</span><span style="color:#BD976A;">x</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//不传函数</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">operate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">compose</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#80A665;">operate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//10</span></span>
+<span class="line"><span style="color:#758575DD;">//传一个</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">operate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">compose</span><span style="color:#666666;">(</span><span style="color:#BD976A;">add1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">operate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//11</span></span>
+<span class="line"><span style="color:#758575DD;">// 传多个</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">operate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">compose</span><span style="color:#666666;">(</span><span style="color:#BD976A;">div2</span><span style="color:#666666;">,</span><span style="color:#BD976A;">mul3</span><span style="color:#666666;">,</span><span style="color:#BD976A;">add1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">add1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">operate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//18</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mul3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">div2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span></span>
+<span class="line"><span style="color:#A0ADA0;">//不使用柯里化：div2(mul3(add1(10)))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">compose</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">funcs</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//考虑不传函数，返回operate传的实参</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">funcs</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">funcs</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">operate</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">funcs</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduceRight</span><span style="color:#999999;">((</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#B07D48;">func</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">func</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">),</span><span style="color:#B07D48;">x</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//不传函数</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">operate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">compose</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#59873A;">operate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//10</span></span>
+<span class="line"><span style="color:#A0ADA0;">//传一个</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">operate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">compose</span><span style="color:#999999;">(</span><span style="color:#B07D48;">add1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">operate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//11</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 传多个</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">operate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">compose</span><span style="color:#999999;">(</span><span style="color:#B07D48;">div2</span><span style="color:#999999;">,</span><span style="color:#B07D48;">mul3</span><span style="color:#999999;">,</span><span style="color:#B07D48;">add1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">add1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">operate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//18</span></span></code></pre></div><h3 id="闭包惰性思想" tabindex="-1">闭包惰性思想 <a class="header-anchor" href="#闭包惰性思想" aria-label="Permalink to &quot;闭包惰性思想&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//加载判断样式兼容问题，没有更换刷新浏览器每次都需要做多余的判断</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#BD976A;">getComputedStyle</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getComputedStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">)[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getCurrentStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">)[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//优化后</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//第一次运行，根据兼容情况，重构 getCss</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#BD976A;">getComputedStyle</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">getCss</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getComputedStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">)[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">getCss</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getCurrentStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">)[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">body</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">width</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">body</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">padding</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//加载判断样式兼容问题，没有更换刷新浏览器每次都需要做多余的判断</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#B07D48;">getComputedStyle</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getComputedStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">)[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getCurrentStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">)[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//优化后</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//第一次运行，根据兼容情况，重构 getCss</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#B07D48;">getComputedStyle</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">getCss</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getComputedStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">)[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">getCss</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getCurrentStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">)[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">body</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">width</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">body</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">padding</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><h2 id="深度优先和广度优先" tabindex="-1">深度优先和广度优先 <a class="header-anchor" href="#深度优先和广度优先" aria-label="Permalink to &quot;深度优先和广度优先&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//数据</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tree</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">children</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1-1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点1-1</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1-2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点1-2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">children</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">children</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2-1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点2-1</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//数据</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tree</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">children</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1-1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点1-1</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1-2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点1-2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">children</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">children</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2-1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点2-1</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}]</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><h3 id="深度优先遍历-dfs" tabindex="-1">深度优先遍历(DFS) <a class="header-anchor" href="#深度优先遍历-dfs" aria-label="Permalink to &quot;深度优先遍历(DFS)&quot;">​</a></h3><p>深度优先遍历（DFS）是一种递归或栈的思想来遍历所有节点的算法。在 JavaScript 中，可以使用递归或栈来实现 DFS。具体步骤如下：</p><ol><li>访问根节点</li><li>对根节点的所有子节点，依次执行以下操作： <ul><li>访问该子节点</li><li>对该子节点的所有子节点，依次执行以上两步操作</li></ul></li></ol><p>JavaScript 中 DFS 的时间复杂度为 O(n)，其中 n 是节点数。空间复杂度为 O(h)，其中 h 是树的高度。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//递归方式</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">dfs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">dfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//递归方式</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">dfs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">	</span><span style="color:#59873A;">dfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//非递归方式</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">dfs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">shift</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">children</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">children</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//非递归方式</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">dfs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">shift</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">children</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">children</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 用非递归方式实现二叉树深度优先遍历</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">dfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#80A665;">dfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#666666;">)))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 用非递归方式实现二叉树深度优先遍历</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">dfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#59873A;">dfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#999999;">)))</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="广度优先遍历-bfs" tabindex="-1">广度优先遍历(BFS) <a class="header-anchor" href="#广度优先遍历-bfs" aria-label="Permalink to &quot;广度优先遍历(BFS)&quot;">​</a></h3><p>广度优先遍历（BFS）是一种逐层扫描节点的算法。在 JavaScript 中，可以使用队列来实现 BFS。具体步骤如下：</p><ol><li>将根节点入队</li><li>当队列非空时，执行以下操作： <ul><li>将队头节点出队，并访问该节点</li><li>将该节点的所有子节点入队</li></ul></li></ol><p>JavaScript 中 BFS 的时间复杂度为 O(n)，其中 n 是节点数。空间复杂度为 O(w)，其中 w 是树的宽度。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">root</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">shift</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//简化后</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#666666;">,</span><span style="color:#BD976A;">queue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">root</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">shift</span><span style="color:#666666;">()){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">root</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">shift</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//简化后</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#999999;">,</span><span style="color:#B07D48;">queue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">root</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">shift</span><span style="color:#999999;">()){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="两者的区别" tabindex="-1">两者的区别 <a class="header-anchor" href="#两者的区别" aria-label="Permalink to &quot;两者的区别&quot;">​</a></h3><ul><li>广度优先遍历需要使用队列逐层扫描节点，而深度优先遍历需要使用递归或栈来遍历节点。</li><li>广度优先遍历的空间复杂度比深度优先遍历高，因为广度优先遍历需要使用队列来存储节点，而深度优先遍历只需要使用递归或栈。</li></ul><h3 id="广度优先遍历的应用" tabindex="-1">广度优先遍历的应用 <a class="header-anchor" href="#广度优先遍历的应用" aria-label="Permalink to &quot;广度优先遍历的应用&quot;">​</a></h3><p>广度优先遍历可以用于许多问题，例如：</p><ul><li><strong>查找最短路径</strong>：遍历距离起点最近的节点。</li><li><strong>查找连通块</strong>：可以找到由相邻节点组成的连通块。</li><li><strong>查找图的最小生成树</strong></li></ul><h3 id="深度优先遍历的应用" tabindex="-1">深度优先遍历的应用 <a class="header-anchor" href="#深度优先遍历的应用" aria-label="Permalink to &quot;深度优先遍历的应用&quot;">​</a></h3><ul><li><strong>查找连通块</strong>：可以找到由相邻节点组成的连通块。</li><li><strong>查找拓扑排序</strong>：可以找到图的拓扑排序，即节点的一个线性序列，使得对于每个有向边 (u,v)，都有 u 在序列中排在 v 的前面。</li><li><strong>查找强联通分量</strong>：通过深度优先遍历，可以找到图的强联通分量，即任意两点之间都存在一条路径的最大子图。</li></ul><p><a href="https://juejin.cn/post/6844904127735005198#heading-5" target="_blank" rel="noreferrer">图文详解深度优先，广度优先遍历</a></p><h2 id="loader和plugin区别" tabindex="-1">loader和plugin区别 <a class="header-anchor" href="#loader和plugin区别" aria-label="Permalink to &quot;loader和plugin区别&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">Loader</p><p>是用来处理单个模块的转换，将各种类型的文件（如 js、css、sass、less、图片等）转换为 Webpack 可以处理的模块；</p><p>执行顺序是从后往前依次执行，每个 Loader 都会对文件进行处理，直到最后一个 Loader 将文件转换为模块。</p></div><div class="warning custom-block"><p class="custom-block-title">Plugin</p><p>是扩展 Webpack 功能的函数，可以在构建过程中执行一系列的任务，遍历所有的 Plugin，并执行它们的 apply 方法。</p><p>例如生成 HTML 文件（HtmlWebpackPlugin）、压缩代码（UglifyJsPlugin）、提取公共代码等。</p><p>Plugin 在 Loader 执行完成之后执行，可以访问 Webpack 的内部环境，并对其进行修改和优化。</p></div><h2 id="前端模块化规范" tabindex="-1">前端模块化规范 <a class="header-anchor" href="#前端模块化规范" aria-label="Permalink to &quot;前端模块化规范&quot;">​</a></h2><p>前端模块化规范是为了解决前端代码复杂度、可维护性和可扩展性等问题而产生的。目前常用的前端模块化规范有CommonJS、AMD、CMD和ES6 Module等，它们之间的区别如下：</p><p><strong>CommonJS规范</strong>：主要用于服务器端的JavaScript编程，Node.js采用了该规范。采用同步加载模块的方式，即在需要使用某个模块时，通过require函数同步加载该模块，然后才能执行后续代码。</p><p><strong>ES6 Module</strong>：是ECMAScript 6标准中新增的模块化规范。 采用静态加载模块的方式，即在编译时就确定模块之间的依赖关系，然后再执行代码。</p><p>与其他模块化规范不同的是，ES6 Module不需要使用特定的函数或语法来定义和导入模块，而是使用import和export关键字来实现。</p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/JavaScript/进阶面试题.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>字符串常用方法</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>高级面试题</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" "b/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html"
new file mode 100644
index 00000000..22713eab
--- /dev/null
+++ "b/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html"
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>常见高级面试题 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_JavaScript_高级面试题.md.0abc2056.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_JavaScript_%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-6b87e69f><div><h1 id="常见高级面试题" tabindex="-1">常见高级面试题 <a class="header-anchor" href="#常见高级面试题" aria-label="Permalink to &quot;常见高级面试题&quot;">​</a></h1><h2 id="怎么禁止下载图片-midjourney实现" tabindex="-1">怎么禁止下载图片（midjourney实现） <a class="header-anchor" href="#怎么禁止下载图片-midjourney实现" aria-label="Permalink to &quot;怎么禁止下载图片（midjourney实现）&quot;">​</a></h2><p><strong>方案一：禁止右键</strong></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">image.png</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oncontextmenu</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#4D9375;">return</span><span style="color:#C98A7D;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">image.png</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oncontextmenu</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#1E754F;">return</span><span style="color:#B56959;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">oncontextmenu</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">event</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">event</span><span style="color:#666666;">.</span><span style="color:#BD976A;">returnValue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">oncontextmenu</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">event</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">event</span><span style="color:#999999;">.</span><span style="color:#B07D48;">returnValue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>方案二：禁止拖拽</strong></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">image.png</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ondragstart</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#4D9375;">return</span><span style="color:#C98A7D;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">image.png</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ondragstart</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#1E754F;">return</span><span style="color:#B56959;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span></span></code></pre></div><p><strong>方案三：使用遮罩层</strong></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">position: relative; display: inline-block;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">image.png</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;</span></span>
+<span class="line"><span style="color:#C98A7D;">                background: url(image.png) no-repeat center center / contain; opacity: 0.7;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">position: relative; display: inline-block;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">image.png</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;</span></span>
+<span class="line"><span style="color:#B56959;">                background: url(image.png) no-repeat center center / contain; opacity: 0.7;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p><strong>方案四:转换为 canvas</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">imageToCanvas</span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">canvas</span><span style="color:#666666;">: </span><span style="color:#5DA994;">HTMLCanvasElement</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//新建Image对象，引入当前目录下的图片</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Image</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">src</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">canvas</span><span style="color:#666666;">.</span><span style="color:#80A665;">getContext</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2d</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#CB7676;">!</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//图片初始化完成后调用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//将canvas的宽高设置为图像的宽高</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">canvas</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">canvas</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//canvas画图片</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">c</span><span style="color:#666666;">.</span><span style="color:#80A665;">drawImage</span><span style="color:#666666;">(</span><span style="color:#BD976A;">img</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">error</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">imageToCanvas</span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">canvas</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">HTMLCanvasElement</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//新建Image对象，引入当前目录下的图片</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Image</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">src</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">canvas</span><span style="color:#999999;">.</span><span style="color:#59873A;">getContext</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2d</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#AB5959;">!</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//图片初始化完成后调用</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//将canvas的宽高设置为图像的宽高</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">canvas</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">canvas</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//canvas画图片</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">c</span><span style="color:#999999;">.</span><span style="color:#59873A;">drawImage</span><span style="color:#999999;">(</span><span style="color:#B07D48;">img</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">error</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">throwFn</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Uncaught DOMException: Failed to execute &#39;toDataURL&#39; on &#39;HTMLCanvasElement&#39;: Tainted canvases may not be exported.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$canvasRef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">useRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">HTMLCanvasElement</span><span style="color:#666666;">&gt;(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">useEffect</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">;(</span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">imageToCanvas</span><span style="color:#666666;">(</span><span style="color:#BD976A;">props</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$canvasRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">current</span><span style="color:#CB7676;">!</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">$canvasRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">current</span><span style="color:#CB7676;">!</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toBlob</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">throwFn</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">$canvasRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">current</span><span style="color:#CB7676;">!</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toDataURL</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">throwFn</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">})()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">canvas</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">={</span><span style="color:#BD976A;">$canvasRef</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">onTouchStart</span><span style="color:#666666;">={</span><span style="color:#BD976A;">preventDefaultListener</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">onContextMenu</span><span style="color:#666666;">={</span><span style="color:#BD976A;">preventDefaultListener</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">throwFn</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Uncaught DOMException: Failed to execute &#39;toDataURL&#39; on &#39;HTMLCanvasElement&#39;: Tainted canvases may not be exported.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$canvasRef</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">useRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">HTMLCanvasElement</span><span style="color:#999999;">&gt;(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">useEffect</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">;(</span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">imageToCanvas</span><span style="color:#999999;">(</span><span style="color:#B07D48;">props</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$canvasRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">current</span><span style="color:#AB5959;">!</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">$canvasRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">current</span><span style="color:#AB5959;">!</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toBlob</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">throwFn</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">$canvasRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">current</span><span style="color:#AB5959;">!</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toDataURL</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">throwFn</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">})()</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">canvas</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">={</span><span style="color:#B07D48;">$canvasRef</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">onTouchStart</span><span style="color:#999999;">={</span><span style="color:#B07D48;">preventDefaultListener</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">onContextMenu</span><span style="color:#999999;">={</span><span style="color:#B07D48;">preventDefaultListener</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/JavaScript/高级面试题.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>进阶面试题</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Vue响应式原理</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html" "b/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html"
new file mode 100644
index 00000000..c860e989
--- /dev/null
+++ "b/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Vue_Vue响应式原理.md.2eeac150.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Vue_Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-6b87e69f><div><h2 id="数组劫持原理" tabindex="-1">数组劫持原理 <a class="header-anchor" href="#数组劫持原理" aria-label="Permalink to &quot;数组劫持原理&quot;">​</a></h2><ol><li>使用 <code>Object.create(Array.prototype)</code> 备份原型上的方法</li><li>利用 AOP 思想，对 7 个变异方法进行重写，重写函数：先调用原来对应方法，再对新增的每一项进行数据劫持</li><li></li></ol></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Vue/Vue响应式原理.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>高级面试题</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Vue基础篇</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.html" "b/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.html"
new file mode 100644
index 00000000..94acecd1
--- /dev/null
+++ "b/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Vue_Vue基础篇.md.d7fd744f.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Vue_Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-6b87e69f><div><h2 id="对mvvm的理解" tabindex="-1">对MVVM的理解 <a class="header-anchor" href="#对mvvm的理解" aria-label="Permalink to &quot;对MVVM的理解&quot;">​</a></h2><p>MVVM 由 MVC 模型演变而来，M(Model)代表数据模型，V(View)代表用户操作的界面，VM(ViewModel)代表业务逻辑层，</p><p>充当数据模型与视图界面的桥梁，可以把数据绑定到页面，页面操作触发数据更新，数据修改自动触发视图更新。</p><h2 id="mixins的原理" tabindex="-1">Mixins的原理 <a class="header-anchor" href="#mixins的原理" aria-label="Permalink to &quot;Mixins的原理&quot;">​</a></h2><p>Vue 的 mixins混入 可以抽离封装Vue 组件选项达到复用的效果。</p><p><strong>data、provide</strong>：后者的值将对前者的值进行扩展，相同属性名（非对象）则以后者的属性值为准，如果两者的值是对象，但值不相等，则继续进行合并，</p><p><strong>生命周期钩子函数</strong>：将后者的生命周期钩子函数拼接到前者的生命周期钩子函数，调用时依次执行；</p><p><strong>components、filters、directives</strong>：对前者的属性进行拷贝扩展，属性相同则后者覆盖前者；</p><p>**watch：**与生命周期钩子函数类似，将后者的 watch拼接到前者的 watch后面；</p><p><strong>props、methods、inject、computed</strong>：定义一个对象 ret，遍历前者的属性或方法，对 ret进行扩展，再遍历后者的属性或方法，后者将覆盖前者的属性或方法；</p><p><strong>默认策略</strong>：策略中没有定义的策略，后者有则返回后者，否则返回前者；</p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Vue/Vue基础篇.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Vue响应式原理</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Vue声明周期</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.html" "b/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.html"
new file mode 100644
index 00000000..212f9beb
--- /dev/null
+++ "b/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.html"
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Vue_Vue声明周期.md.4220f397.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Vue_Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-6b87e69f><div><h2 id="vue声明周期" tabindex="-1">Vue声明周期 <a class="header-anchor" href="#vue声明周期" aria-label="Permalink to &quot;Vue声明周期&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//自带 8 个</span></span>
+<span class="line"><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#BD976A;">mounted</span></span>
+<span class="line"><span style="color:#BD976A;">beforeUpdate</span></span>
+<span class="line"><span style="color:#BD976A;">updated</span></span>
+<span class="line"><span style="color:#BD976A;">beforeDestory</span></span>
+<span class="line"><span style="color:#BD976A;">destoryed</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//自带 8 个</span></span>
+<span class="line"><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#B07D48;">mounted</span></span>
+<span class="line"><span style="color:#B07D48;">beforeUpdate</span></span>
+<span class="line"><span style="color:#B07D48;">updated</span></span>
+<span class="line"><span style="color:#B07D48;">beforeDestory</span></span>
+<span class="line"><span style="color:#B07D48;">destoryed</span></span></code></pre></div><h3 id="嵌套组件组件执行顺序" tabindex="-1">嵌套组件组件执行顺序 <a class="header-anchor" href="#嵌套组件组件执行顺序" aria-label="Permalink to &quot;嵌套组件组件执行顺序&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//父组件</span></span>
+<span class="line"><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//子组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">mounted</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//孙子组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">mounted</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//父组件</span></span>
+<span class="line"><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//子组件</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">mounted</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//孙子组件</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">mounted</span></span></code></pre></div><h2 id="beforecreate-与-created-区别" tabindex="-1">beforeCreate 与 created 区别 <a class="header-anchor" href="#beforecreate-与-created-区别" aria-label="Permalink to &quot;beforeCreate 与 created 区别&quot;">​</a></h2><h2 id="created-与-mounted-区别" tabindex="-1">created 与 mounted 区别 <a class="header-anchor" href="#created-与-mounted-区别" aria-label="Permalink to &quot;created 与 mounted 区别&quot;">​</a></h2><blockquote><p>请求问题：当需要子组件的请求需要比父组件<strong>先</strong>完成时，可以把父组件请求卸载<code>mounted</code>中，子组件写在<code>created</code>中。</p></blockquote><h2 id="keep-alive内置缓存组件" tabindex="-1">keep-alive内置缓存组件 <a class="header-anchor" href="#keep-alive内置缓存组件" aria-label="Permalink to &quot;keep-alive内置缓存组件&quot;">​</a></h2><p>额外增加两个声明周期:activated, deactivated</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//第一次执行顺序</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">mounted</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">activated</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//第二次：多次进入详情页，在activated钩子中，判断 id 相同则不需要发请求</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">activated</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//第一次执行顺序</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">mounted</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">activated</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//第二次：多次进入详情页，在activated钩子中，判断 id 相同则不需要发请求</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">activated</span></span></code></pre></div><h2 id="虚拟-dom-vnode-和-dom" tabindex="-1">虚拟 DOM(VNode) 和 DOM <a class="header-anchor" href="#虚拟-dom-vnode-和-dom" aria-label="Permalink to &quot;虚拟 DOM(VNode) 和 DOM&quot;">​</a></h2><ol><li>VNode是一个纯 JavaScript 对象，用来描述真实 DOM 中的一个节点，属性比真实 dom 精简许多。</li></ol><p>虚拟 DOM 的优点包括：</p><p>性能优化：由于真实 DOM 操作非常耗费性能，而虚拟 DOM 可以在内存中进行操作，然后再一次性渲染到真实 DOM 上，从而减少了不必要的 DOM 操作，提高了性能。</p><p>跨平台：虚拟 DOM 可以轻松地支持多种平台，比如浏览器、移动端、服务器端等。</p><p>组件化开发：Vue 的组件是以 VNode 为基础的，通过对 VNode 的操作，可以方便地实现组件的开发。</p><h2 id="vue3-0性能提升" tabindex="-1">Vue3.0性能提升 <a class="header-anchor" href="#vue3-0性能提升" aria-label="Permalink to &quot;Vue3.0性能提升&quot;">​</a></h2><ol><li>响应式系统不需要深度遍历就可以对整个对象监听</li><li>在diff算法中增加了静态标记</li><li>源码体积减小，所有 API 都可以按需引入</li></ol></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Vue/Vue声明周期.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Vue基础篇</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Vue进阶篇</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Vue/Vue\350\277\233\351\230\266\347\257\207.html" "b/Interview/Vue/Vue\350\277\233\351\230\266\347\257\207.html"
new file mode 100644
index 00000000..40e844e5
--- /dev/null
+++ "b/Interview/Vue/Vue\350\277\233\351\230\266\347\257\207.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Vue_Vue进阶篇.md.786b9622.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Vue_Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-6b87e69f><div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Vue/Vue进阶篇.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Vue声明周期</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>npm run xxx执行过程</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.html" "b/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.html"
new file mode 100644
index 00000000..8649fa0a
--- /dev/null
+++ "b/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.html"	
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>npm run xxx执行过程 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Vue_npm run xxx执行过程.md.9da37746.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Vue_npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-6b87e69f><div><h1 id="npm-run-xxx执行过程" tabindex="-1">npm run xxx执行过程 <a class="header-anchor" href="#npm-run-xxx执行过程" aria-label="Permalink to &quot;npm run xxx执行过程&quot;">​</a></h1><h2 id="vue-cli-项目" tabindex="-1">vue cli 项目 <a class="header-anchor" href="#vue-cli-项目" aria-label="Permalink to &quot;vue cli 项目&quot;">​</a></h2><ol><li><p>npm run 会先把 <code>node_modules/.bin</code> 加入到 <code>PATH</code> 环境变量</p></li><li><p>找到项目根目录 <code>package.json</code> 文件中 <code> scripts</code> 对应的脚本并执行对应命令</p></li><li><p>相当于执行 <code>vue-cli-service serve</code> ，并去找到<code>npm i (npm i @vue/cli-service)</code>所生成的软连接 <code>./bin/vue-cli-service</code></p></li><li><p>接着去执行软连接指向的 <code>node_modules/@vue/cli-service/bin/vue-cli-service.js</code> （package-lock.json记录了映射关系）</p><ol><li><code>vue-cli-service.js</code>主要解析和比对 node 版本，不匹配则报错</li><li>获取和解析命令行参数，启动服务执行命令</li></ol></li></ol><h2 id="vite项目" tabindex="-1">vite项目 <a class="header-anchor" href="#vite项目" aria-label="Permalink to &quot;vite项目&quot;">​</a></h2><ol><li>npm run 会先把 <code>node_modules/.bin</code> 加入到 <code>PATH</code> 环境变量</li><li>找到项目根目录 <code>package.json</code> 文件中 <code> scripts</code> 对应的脚本并执行对应命令</li><li>去找<code>.bin/vite</code> 软链接，进而找到 <code>node_modules/.pnpm/vite@4.1.1/node_modules/vite/bin/vite.js</code>执行</li></ol></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Vue/npm run xxx执行过程.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Vue进阶篇</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>前端项目优化</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.html" "b/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.html"
new file mode 100644
index 00000000..d108682e
--- /dev/null
+++ "b/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.html"
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>前端项目优化 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Vue_前端项目优化.md.3cd67a0e.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Vue_%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-6b87e69f><div><h1 id="前端项目优化" tabindex="-1">前端项目优化 <a class="header-anchor" href="#前端项目优化" aria-label="Permalink to &quot;前端项目优化&quot;">​</a></h1><h2 id="html" tabindex="-1">HTML <a class="header-anchor" href="#html" aria-label="Permalink to &quot;HTML&quot;">​</a></h2><h2 id="css" tabindex="-1">CSS <a class="header-anchor" href="#css" aria-label="Permalink to &quot;CSS&quot;">​</a></h2><h2 id="javascript" tabindex="-1">JavaScript <a class="header-anchor" href="#javascript" aria-label="Permalink to &quot;JavaScript&quot;">​</a></h2><h2 id="构建优化" tabindex="-1">构建优化 <a class="header-anchor" href="#构建优化" aria-label="Permalink to &quot;构建优化&quot;">​</a></h2><h3 id="移除console" tabindex="-1">移除console <a class="header-anchor" href="#移除console" aria-label="Permalink to &quot;移除console&quot;">​</a></h3><p><code>npm install babel-plugin-transform-remove-console --D</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//babel.config.js</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">proPlugins</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">process</span><span style="color:#666666;">.</span><span style="color:#BD976A;">env</span><span style="color:#666666;">.</span><span style="color:#BD976A;">NODE_ENV</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">production</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">proPlugins</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">transform-remove-console</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">plugins</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">...</span><span style="color:#BD976A;">proPlugins</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//babel.config.js</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">proPlugins</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">process</span><span style="color:#999999;">.</span><span style="color:#B07D48;">env</span><span style="color:#999999;">.</span><span style="color:#B07D48;">NODE_ENV</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">production</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">proPlugins</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">transform-remove-console</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">plugins</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">...</span><span style="color:#B07D48;">proPlugins</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div><h3 id="分包和共享依赖" tabindex="-1">分包和共享依赖 <a class="header-anchor" href="#分包和共享依赖" aria-label="Permalink to &quot;分包和共享依赖&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">configureWebpack</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">alias</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">optimization</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">runtimeChunk</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">single</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">splitChunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">chunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">all</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">maxInitialRequests</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">Infinity</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">minSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">cacheGroups</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">common</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">common</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">chunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">all</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">minSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//只要大于0字节就抽离</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">minChunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">vendor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">test</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#E6CC77;">\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">]</span><span style="color:#C4704F;">node_modules</span><span style="color:#666666;">[</span><span style="color:#E6CC77;">\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">chunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">initial</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//从入口文件抽离</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">minSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//只要大于0字节就抽离</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">minChunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//只要使用2次以上就抽离</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">name</span><span style="color:#666666;">(</span><span style="color:#B8A965;">module</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">packageName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#E6CC77;">\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">]</span><span style="color:#C4704F;">node_modules</span><span style="color:#666666;">[</span><span style="color:#E6CC77;">\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">](</span><span style="color:#C99076;">.</span><span style="color:#CB7676;">*?</span><span style="color:#666666;">)([</span><span style="color:#E6CC77;">\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">]</span><span style="color:#CB7676;">|</span><span style="color:#4D9375;">$</span><span style="color:#666666;">)</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">npm.</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">packageName</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">configureWebpack</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">alias</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">optimization</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">runtimeChunk</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">single</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">splitChunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">chunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">all</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">maxInitialRequests</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">Infinity</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">minSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">cacheGroups</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">common</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">common</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">chunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">all</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">minSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//只要大于0字节就抽离</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">minChunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">vendor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">test</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#BDA437;">\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">]</span><span style="color:#AB5E3F;">node_modules</span><span style="color:#999999;">[</span><span style="color:#BDA437;">\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">chunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">initial</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//从入口文件抽离</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">minSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//只要大于0字节就抽离</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">minChunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//只要使用2次以上就抽离</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">name</span><span style="color:#999999;">(</span><span style="color:#998418;">module</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">packageName</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#BDA437;">\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">]</span><span style="color:#AB5E3F;">node_modules</span><span style="color:#999999;">[</span><span style="color:#BDA437;">\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">](</span><span style="color:#A65E2B;">.</span><span style="color:#AB5959;">*?</span><span style="color:#999999;">)([</span><span style="color:#BDA437;">\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">]</span><span style="color:#AB5959;">|</span><span style="color:#1E754F;">$</span><span style="color:#999999;">)</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#999999;">)[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">npm.</span><span style="color:#999999;">${</span><span style="color:#B56959;">packageName</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Vue/前端项目优化.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>npm run xxx执行过程</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>常见Path区别</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.html" "b/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.html"
new file mode 100644
index 00000000..c92eb42a
--- /dev/null
+++ "b/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.html"
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Vue_常见Path区别.md.56f4fc59.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Vue_%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-6b87e69f><div><h2 id="vuerouter的-base" tabindex="-1">VueRouter的 base <a class="header-anchor" href="#vuerouter的-base" aria-label="Permalink to &quot;VueRouter的 base&quot;">​</a></h2><p>VueRouter的base属性是指应用的基路径，它会影响到所有使用了vue-router的路由路径，包括 routes 配置中的路径和 通过 $router.push() 或 $router.replace() 调用的路径。</p><p>在router对象中，base属性可以通过以下方式设置：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">VueRouter</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">base</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/my-app/</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">VueRouter</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">base</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/my-app/</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p>这个属性值的默认值为 &#39;/&#39;。如果你的应用被部署在一个子目录下，你就需要手动指定base属性的值。</p><p>例如，假设你的应用被部署在<code>http://example.com/my-app/</code>这个路径下，那么你就需要设置如下的base属性：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">VueRouter</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">base</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/my-app/</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">VueRouter</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">base</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/my-app/</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p>这个设置是非常重要的，因为Vue Router 路由器的默认行为是从根路径(localhost:8080/) 开始的，</p><p>如果你需要从你的实际路径下查看（例如 localhost:8080/my-project/），就需要设置base属性了。</p><p>除了上述的情况之外，一般我们都不会配置base属性，这个属性的作用主要是为了适应应用被部署在服务器上的子目录下的情况。</p><h2 id="vue-config-js的-publicpath" tabindex="-1">vue.config.js的 publicPath <a class="header-anchor" href="#vue-config-js的-publicpath" aria-label="Permalink to &quot;vue.config.js的 publicPath&quot;">​</a></h2><p>在 Vue.js 中， publicPath 是用来指定应用程序部署的基础 URL。它作用于构建过程中的静态文件的路径，</p><p>同时也影响 Vue Router 中 router-link 组件的路径。一般来说，我们在开发环境和生产环境使用不同的 publicPath 值，来确保应用在不同环境下都能够正确访问静态文件。</p><p>以下是一些常见的 publicPath 配置：</p><ul><li>&quot;/&quot;：将生成的静态文件放在根目录下，这是默认值。</li><li>&quot;./&quot;：将生成的静态文件放在当前目录下。</li><li>&quot;../&quot;：将生成的静态文件放在上级目录下。</li></ul><p>在 vue.config.js 中，我们可以通过设置 publicPath 来配置应用的部署路径。例如，我们可以将 publicPath 设置为 &quot;/my-app/&quot;，</p><p>则构建出的静态文件实际上会被部署到类似于 <a href="http://example.com/my-app/" target="_blank" rel="noreferrer">http://example.com/my-app/</a> 这样的路径下。代码示例：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">publicPath</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">process</span><span style="color:#666666;">.</span><span style="color:#BD976A;">env</span><span style="color:#666666;">.</span><span style="color:#BD976A;">NODE_ENV</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">production</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/my-app/</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">publicPath</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">process</span><span style="color:#999999;">.</span><span style="color:#B07D48;">env</span><span style="color:#999999;">.</span><span style="color:#B07D48;">NODE_ENV</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">production</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/my-app/</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>通常可以在根目录配置环境变量，相对于不同环境打包时的打包命令</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//package.json</span></span>
+<span class="line"><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">scripts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">serve</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vue-cli-service serve --open --port 9999</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">build:server</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vue-cli-service build </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">build:local</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vue-cli-service build --mode buildlocal</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">,</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//package.json</span></span>
+<span class="line"><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">scripts</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">serve</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vue-cli-service serve --open --port 9999</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">build:server</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vue-cli-service build </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">build:local</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vue-cli-service build --mode buildlocal</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;">,</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//.env.production   --服务器打包预览环境变量</span></span>
+<span class="line"><span style="color:#BD976A;">OUTPUT_DIR</span><span style="color:#666666;">=</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">opt</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">nginx</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">www</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">html</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">music</span></span>
+<span class="line"><span style="color:#BD976A;">BASE_URL</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">music</span><span style="color:#C98A7D99;">/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//.env.production   --服务器打包预览环境变量</span></span>
+<span class="line"><span style="color:#B07D48;">OUTPUT_DIR</span><span style="color:#999999;">=</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">opt</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">nginx</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">www</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">html</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">music</span></span>
+<span class="line"><span style="color:#B07D48;">BASE_URL</span><span style="color:#999999;">=</span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">music</span><span style="color:#B5695999;">/</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//.env.buildlocal   --本地打包预览环境变量</span></span>
+<span class="line"><span style="color:#BD976A;">OUTPUT_DIR</span><span style="color:#666666;">=</span><span style="color:#BD976A;">dist</span></span>
+<span class="line"><span style="color:#BD976A;">BASE_URL</span><span style="color:#666666;">=</span><span style="color:#CB7676;">/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//.env.buildlocal   --本地打包预览环境变量</span></span>
+<span class="line"><span style="color:#B07D48;">OUTPUT_DIR</span><span style="color:#999999;">=</span><span style="color:#B07D48;">dist</span></span>
+<span class="line"><span style="color:#B07D48;">BASE_URL</span><span style="color:#999999;">=</span><span style="color:#AB5959;">/</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Vue/常见Path区别.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>前端项目优化</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>自定义指令</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" "b/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
new file mode 100644
index 00000000..2bb3fc31
--- /dev/null
+++ "b/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_Vue_自定义指令.md.3d2ea0a9.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_Vue_%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-6b87e69f><div><h2 id="一键复制" tabindex="-1">一键复制 <a class="header-anchor" href="#一键复制" aria-label="Permalink to &quot;一键复制&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方案一：</span></span>
+<span class="line"><span style="color:#BD976A;">Vue</span><span style="color:#666666;">.</span><span style="color:#80A665;">directive</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">copy</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">bind</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">click</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">range</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">createRange</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">range</span><span style="color:#666666;">.</span><span style="color:#80A665;">selectNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getSelection</span><span style="color:#666666;">().</span><span style="color:#80A665;">addRange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">range</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">execCommand</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">copy</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getSelection</span><span style="color:#666666;">().</span><span style="color:#80A665;">removeAllRanges</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方案二：</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Notification</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">element-ui</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">COPY</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">handler</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">Notification</span><span style="color:#666666;">.</span><span style="color:#80A665;">success</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">无复制内容</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">textarea</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">createElement</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">textarea</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">readOnly</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">readonly</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">position</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">absolute</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">-9999px</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#80A665;">appendChild</span><span style="color:#666666;">(</span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#80A665;">select</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">execCommand</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Copy</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">Notification</span><span style="color:#666666;">.</span><span style="color:#80A665;">success</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">复制成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#80A665;">removeChild</span><span style="color:#666666;">(</span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">click</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">handler</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">componentUpdated</span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">unbind</span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">removeEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">click</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">handler</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方案一：</span></span>
+<span class="line"><span style="color:#B07D48;">Vue</span><span style="color:#999999;">.</span><span style="color:#59873A;">directive</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">copy</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">bind</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">click</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">range</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">createRange</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">range</span><span style="color:#999999;">.</span><span style="color:#59873A;">selectNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getSelection</span><span style="color:#999999;">().</span><span style="color:#59873A;">addRange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">range</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">execCommand</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">copy</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getSelection</span><span style="color:#999999;">().</span><span style="color:#59873A;">removeAllRanges</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方案二：</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Notification</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">element-ui</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">COPY</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">handler</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">Notification</span><span style="color:#999999;">.</span><span style="color:#59873A;">success</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">无复制内容</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">textarea</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">createElement</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">textarea</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">readOnly</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">readonly</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">position</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">absolute</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">-9999px</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#59873A;">appendChild</span><span style="color:#999999;">(</span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#59873A;">select</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">execCommand</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Copy</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">Notification</span><span style="color:#999999;">.</span><span style="color:#59873A;">success</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">复制成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#59873A;">removeChild</span><span style="color:#999999;">(</span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">click</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">handler</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">componentUpdated</span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">unbind</span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">removeEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">click</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">handler</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/Vue/自定义指令.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>常见Path区别</span></a></div><div class="pager" data-v-ef5dee53><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/Interview/index.html b/Interview/index.html
new file mode 100644
index 00000000..8117dfc3
--- /dev/null
+++ b/Interview/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>面试 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Interview_index.md.ff0a75dc.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Brower</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>事件循环机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>浏览器网页请求过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>计算机网络</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>CSS</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>JavaScript</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Promise相关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>基础面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>字符串常用方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进阶面试题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>高级面试题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Vue</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue响应式原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue基础篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue声明周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue进阶篇</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>npm run xxx执行过程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端项目优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>常见Path区别</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>自定义指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Interview_" data-v-6b87e69f><div><h1 id="面试" tabindex="-1">面试 <a class="header-anchor" href="#面试" aria-label="Permalink to &quot;面试&quot;">​</a></h1><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>面试题总结与归纳!</p></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Interview/index.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><!----></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>事件循环机制</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.html" "b/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.html"
new file mode 100644
index 00000000..1f4bcc63
--- /dev/null
+++ "b/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.html"
@@ -0,0 +1,1211 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>网络拓扑图代码 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Problem_Graphical_Antv代码片段集锦.md.3d28f150.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Graphical</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv代码片段集锦</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv使用总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Echarts问题总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Nuxt3</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nuxt3项目踩坑</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VitePress</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VitePress踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VuePress踩坑记录</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VueProject</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue项目踩坑一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Problem_Graphical_Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-6b87e69f><div><h1 id="网络拓扑图代码" tabindex="-1">网络拓扑图代码 <a class="header-anchor" href="#网络拓扑图代码" aria-label="Permalink to &quot;网络拓扑图代码&quot;">​</a></h1><h2 id="图实例化" tabindex="-1">图实例化 <a class="header-anchor" href="#图实例化" aria-label="Permalink to &quot;图实例化&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">commonRegister</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">viewRegister</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./registerElements.js</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//1.初始化实例</span></span>
+<span class="line"><span style="color:#BD976A;">initChart</span><span style="color:#DBD7CAEE;">() </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">halfWidth</span><span style="color:#DBD7CAEE;"> = </span><span style="color:#BD976A;">this</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> / 2;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">halfHeight</span><span style="color:#DBD7CAEE;"> = </span><span style="color:#BD976A;">this</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> / 2;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">if</span><span style="color:#DBD7CAEE;"> (!</span><span style="color:#BD976A;">this</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">graph</span><span style="color:#DBD7CAEE;">) {</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">commonRegister</span><span style="color:#DBD7CAEE;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">viewRegister</span><span style="color:#DBD7CAEE;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">toolbar</span><span style="color:#DBD7CAEE;"> = </span><span style="color:#BD976A;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">G6</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">ToolBar</span><span style="color:#DBD7CAEE;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">position</span><span style="color:#DBD7CAEE;">: { </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;">: 10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;">: 10 </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">getContent</span><span style="color:#DBD7CAEE;">: () =&gt; </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">outDiv</span><span style="color:#DBD7CAEE;"> = </span><span style="color:#BD976A;">document</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">createElement</span><span style="color:#DBD7CAEE;">(&#39;</span><span style="color:#BD976A;">div</span><span style="color:#DBD7CAEE;">&#39;);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#DBD7CAEE;"> = &#39;</span><span style="color:#BD976A;">cursor</span><span style="color:#DBD7CAEE;">: </span><span style="color:#BD976A;">pointer</span><span style="color:#DBD7CAEE;">;</span><span style="color:#BD976A;">vertical</span><span style="color:#DBD7CAEE;">-</span><span style="color:#BD976A;">align</span><span style="color:#DBD7CAEE;">: </span><span style="color:#BD976A;">middle</span><span style="color:#DBD7CAEE;">;</span><span style="color:#BD976A;">line</span><span style="color:#DBD7CAEE;">-</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;">:24</span><span style="color:#BD976A;">px</span><span style="color:#DBD7CAEE;">;</span><span style="color:#BD976A;">font</span><span style="color:#DBD7CAEE;">-</span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;">:18</span><span style="color:#BD976A;">px</span><span style="color:#DBD7CAEE;">;&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">outDiv</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">innerHTML</span><span style="color:#DBD7CAEE;"> = `&lt;</span><span style="color:#BD976A;">ul</span><span style="color:#DBD7CAEE;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              &lt;</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">code</span><span style="color:#DBD7CAEE;">=&#39;</span><span style="color:#BD976A;">zoomOut</span><span style="color:#DBD7CAEE;">&#39; </span><span style="color:#BD976A;">style</span><span style="color:#DBD7CAEE;">=&quot;</span><span style="color:#BD976A;">$</span><span style="color:#DBD7CAEE;">{</span><span style="color:#BD976A;">style</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;"> class=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">iconfont</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">icon</span><span style="color:#DBD7CAEE;">-</span><span style="color:#BD976A;">fangda</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;"> title=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">放大</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&gt;&lt;/li</span><span style="color:#FDAEB7;font-style:italic;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              &lt;</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">code</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zoomIn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">style</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">${style}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfont icon-suoxiao</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">title</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">缩小</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">&gt;&lt;/</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              &lt;</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">code</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">autoZoom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">${style}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfont icon-fitscreen24</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">title</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">居中</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">&gt;&lt;/</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            &lt;/</span><span style="color:#BD976A;">ul</span><span style="color:#DBD7CAEE;">&gt;</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#C98A7D;">          return outDiv</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">     handleClick: (code) =&gt; {</span></span>
+<span class="line"><span style="color:#C98A7D;">          if (code === &#39;zoomOut&#39;) {</span></span>
+<span class="line"><span style="color:#C98A7D;">             toolbar.zoomOut()</span></span>
+<span class="line"><span style="color:#C98A7D;">          } else if (code === &#39;zoomIn&#39;) {</span></span>
+<span class="line"><span style="color:#C98A7D;">             toolbar.zoomIn()</span></span>
+<span class="line"><span style="color:#C98A7D;">          }else if(code === &#39;autoZoom&#39;){</span></span>
+<span class="line"><span style="color:#C98A7D;">             toolbar.autoZoom()</span></span>
+<span class="line"><span style="color:#C98A7D;">          }</span></span>
+<span class="line"><span style="color:#C98A7D;">        }</span></span>
+<span class="line"><span style="color:#C98A7D;">    });</span></span>
+<span class="line"><span style="color:#C98A7D;">    this.graph = new G6.Graph({</span></span>
+<span class="line"><span style="color:#C98A7D;">      container: &quot;topoChart&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">      width: this.width,</span></span>
+<span class="line"><span style="color:#C98A7D;">      height: this.height,</span></span>
+<span class="line"><span style="color:#C98A7D;">      fitView: true,</span></span>
+<span class="line"><span style="color:#C98A7D;">      fitViewPadding: 100,</span></span>
+<span class="line"><span style="color:#C98A7D;">      groupByTypes: false,</span></span>
+<span class="line"><span style="color:#C98A7D;">      linkCenter: false,</span></span>
+<span class="line"><span style="color:#C98A7D;">      layout: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        pipes: [</span></span>
+<span class="line"><span style="color:#C98A7D;">          {</span></span>
+<span class="line"><span style="color:#C98A7D;">            // 该子图所使用的布局类型</span></span>
+<span class="line"><span style="color:#C98A7D;">            type: &quot;circular&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">            center: [halfWidth, halfHeight],</span></span>
+<span class="line"><span style="color:#C98A7D;">            radius: 80,</span></span>
+<span class="line"><span style="color:#C98A7D;">            nodesFilter: (node) =&gt; node.sysType === &quot;vpe&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">          },</span></span>
+<span class="line"><span style="color:#C98A7D;">        ],</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">      //交互行为相关配置</span></span>
+<span class="line"><span style="color:#C98A7D;">      modes: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        default: [&quot;drag-canvas&quot;, &quot;zoom-canvas&quot;, {type: &quot;drag-combo&quot;, shouldEnd(e, parent) {</span></span>
+<span class="line"><span style="color:#C98A7D;">          if(parent) {</span></span>
+<span class="line"><span style="color:#C98A7D;">            return false;</span></span>
+<span class="line"><span style="color:#C98A7D;">          }</span></span>
+<span class="line"><span style="color:#C98A7D;">          return true;</span></span>
+<span class="line"><span style="color:#C98A7D;">        }}],</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">      plugins: [toolbar],</span></span>
+<span class="line"><span style="color:#C98A7D;">      defaultNode: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        type: &quot;bubble&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">        labelCfg: {</span></span>
+<span class="line"><span style="color:#C98A7D;">          position: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">          style: {</span></span>
+<span class="line"><span style="color:#C98A7D;">            fill: &quot;white&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">            stroke: &quot;#fff&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">          },</span></span>
+<span class="line"><span style="color:#C98A7D;">        },</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">      defaultEdge: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        color: &quot;#888&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">        type: &quot;animate-line&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">      defaultCombo: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        padding: 1,</span></span>
+<span class="line"><span style="color:#C98A7D;">        style: {</span></span>
+<span class="line"><span style="color:#C98A7D;">          cursor: &quot;all-scroll&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">        },</span></span>
+<span class="line"><span style="color:#C98A7D;">        labelCfg: {</span></span>
+<span class="line"><span style="color:#C98A7D;">          style: {</span></span>
+<span class="line"><span style="color:#C98A7D;">            opacity: 0,</span></span>
+<span class="line"><span style="color:#C98A7D;">            fill: &quot;#303133&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">            fontSize: 12,</span></span>
+<span class="line"><span style="color:#C98A7D;">            stroke: &quot;#fff&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">          },</span></span>
+<span class="line"><span style="color:#C98A7D;">        },</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">    });</span></span>
+<span class="line"><span style="color:#C98A7D;">    //监听事件</span></span>
+<span class="line"><span style="color:#C98A7D;">     this.graphBehaviors();</span></span>
+<span class="line"><span style="color:#C98A7D;">  }</span></span>
+<span class="line"><span style="color:#C98A7D;">},</span></span>
+<span class="line"><span style="color:#C98A7D;">graphBehaviors(){</span></span>
+<span class="line"><span style="color:#C98A7D;">    this.graph.on(&#39;node:click&#39;,this.debounce(this.eventHandle, 300));</span></span>
+<span class="line"><span style="color:#C98A7D;"> //this.graph.on(&#39;edge:click&#39;... </span></span>
+<span class="line"><span style="color:#C98A7D;">},</span></span>
+<span class="line"><span style="color:#C98A7D;">debounce(fn, delay) {</span></span>
+<span class="line"><span style="color:#C98A7D;">  const delays = delay || 300;</span></span>
+<span class="line"><span style="color:#C98A7D;">  let timer;</span></span>
+<span class="line"><span style="color:#C98A7D;">  return function() {</span></span>
+<span class="line"><span style="color:#C98A7D;">    const th = this;</span></span>
+<span class="line"><span style="color:#C98A7D;">    const args = arguments;</span></span>
+<span class="line"><span style="color:#C98A7D;">    if (timer) {</span></span>
+<span class="line"><span style="color:#C98A7D;">      clearTimeout(timer);</span></span>
+<span class="line"><span style="color:#C98A7D;">    }</span></span>
+<span class="line"><span style="color:#C98A7D;">    timer = setTimeout(function() {</span></span>
+<span class="line"><span style="color:#C98A7D;">      timer = null;</span></span>
+<span class="line"><span style="color:#C98A7D;">      fn.apply(th, args);</span></span>
+<span class="line"><span style="color:#C98A7D;">    }, delays);</span></span>
+<span class="line"><span style="color:#C98A7D;">  };</span></span>
+<span class="line"><span style="color:#C98A7D;">},</span></span>
+<span class="line"><span style="color:#C98A7D;">    //2.查询数据</span></span>
+<span class="line"><span style="color:#C98A7D;">queryChartData(){</span></span>
+<span class="line"><span style="color:#C98A7D;">    //处理数据</span></span>
+<span class="line"><span style="color:#C98A7D;">    this.dealData(data)</span></span>
+<span class="line"><span style="color:#C98A7D;">}</span></span>
+<span class="line"><span style="color:#C98A7D;">//3.处理数据</span></span>
+<span class="line"><span style="color:#C98A7D;">dealData(data ) {</span></span>
+<span class="line"><span style="color:#C98A7D;">    //VPE节点</span></span>
+<span class="line"><span style="color:#C98A7D;">    nodes =  ...</span></span>
+<span class="line"><span style="color:#C98A7D;">    edges = ...</span></span>
+<span class="line"><span style="color:#C98A7D;">    combos = ...</span></span>
+<span class="line"><span style="color:#C98A7D;">    this.drawChart(...);</span></span>
+<span class="line"><span style="color:#C98A7D;">}</span></span>
+<span class="line"><span style="color:#C98A7D;">//4.渲染数据</span></span>
+<span class="line"><span style="color:#C98A7D;">drawChart() {</span></span>
+<span class="line"><span style="color:#C98A7D;">  this.graph.read({</span></span>
+<span class="line"><span style="color:#C98A7D;">    nodes,</span></span>
+<span class="line"><span style="color:#C98A7D;">    edges,</span></span>
+<span class="line"><span style="color:#C98A7D;">    combos,</span></span>
+<span class="line"><span style="color:#C98A7D;">  });</span></span>
+<span class="line"><span style="color:#C98A7D;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">commonRegister</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">viewRegister</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./registerElements.js</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//1.初始化实例</span></span>
+<span class="line"><span style="color:#B07D48;">initChart</span><span style="color:#393A34;">() </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">halfWidth</span><span style="color:#393A34;"> = </span><span style="color:#B07D48;">this</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> / 2;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">halfHeight</span><span style="color:#393A34;"> = </span><span style="color:#B07D48;">this</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> / 2;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">if</span><span style="color:#393A34;"> (!</span><span style="color:#B07D48;">this</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">graph</span><span style="color:#393A34;">) {</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">commonRegister</span><span style="color:#393A34;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">viewRegister</span><span style="color:#393A34;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">toolbar</span><span style="color:#393A34;"> = </span><span style="color:#B07D48;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">G6</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">ToolBar</span><span style="color:#393A34;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">position</span><span style="color:#393A34;">: { </span><span style="color:#B07D48;">x</span><span style="color:#393A34;">: 10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;">: 10 </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">getContent</span><span style="color:#393A34;">: () =&gt; </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">outDiv</span><span style="color:#393A34;"> = </span><span style="color:#B07D48;">document</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">createElement</span><span style="color:#393A34;">(&#39;</span><span style="color:#B07D48;">div</span><span style="color:#393A34;">&#39;);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#393A34;"> = &#39;</span><span style="color:#B07D48;">cursor</span><span style="color:#393A34;">: </span><span style="color:#B07D48;">pointer</span><span style="color:#393A34;">;</span><span style="color:#B07D48;">vertical</span><span style="color:#393A34;">-</span><span style="color:#B07D48;">align</span><span style="color:#393A34;">: </span><span style="color:#B07D48;">middle</span><span style="color:#393A34;">;</span><span style="color:#B07D48;">line</span><span style="color:#393A34;">-</span><span style="color:#B07D48;">height</span><span style="color:#393A34;">:24</span><span style="color:#B07D48;">px</span><span style="color:#393A34;">;</span><span style="color:#B07D48;">font</span><span style="color:#393A34;">-</span><span style="color:#B07D48;">size</span><span style="color:#393A34;">:18</span><span style="color:#B07D48;">px</span><span style="color:#393A34;">;&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">outDiv</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">innerHTML</span><span style="color:#393A34;"> = `&lt;</span><span style="color:#B07D48;">ul</span><span style="color:#393A34;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">              &lt;</span><span style="color:#B07D48;">li</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">code</span><span style="color:#393A34;">=&#39;</span><span style="color:#B07D48;">zoomOut</span><span style="color:#393A34;">&#39; </span><span style="color:#B07D48;">style</span><span style="color:#393A34;">=&quot;</span><span style="color:#B07D48;">$</span><span style="color:#393A34;">{</span><span style="color:#B07D48;">style</span><span style="color:#999999;">}</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;"> class=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">iconfont</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">icon</span><span style="color:#393A34;">-</span><span style="color:#B07D48;">fangda</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;"> title=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">放大</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&gt;&lt;/li</span><span style="color:#B31D28;font-style:italic;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">              &lt;</span><span style="color:#B07D48;">li</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">code</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zoomIn</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">style</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">${style}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfont icon-suoxiao</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">title</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">缩小</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">&gt;&lt;/</span><span style="color:#B07D48;">li</span><span style="color:#393A34;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">              &lt;</span><span style="color:#B07D48;">li</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">code</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">autoZoom</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">${style}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfont icon-fitscreen24</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">title</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">居中</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">&gt;&lt;/</span><span style="color:#B07D48;">li</span><span style="color:#393A34;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">            &lt;/</span><span style="color:#B07D48;">ul</span><span style="color:#393A34;">&gt;</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#B56959;">          return outDiv</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">     handleClick: (code) =&gt; {</span></span>
+<span class="line"><span style="color:#B56959;">          if (code === &#39;zoomOut&#39;) {</span></span>
+<span class="line"><span style="color:#B56959;">             toolbar.zoomOut()</span></span>
+<span class="line"><span style="color:#B56959;">          } else if (code === &#39;zoomIn&#39;) {</span></span>
+<span class="line"><span style="color:#B56959;">             toolbar.zoomIn()</span></span>
+<span class="line"><span style="color:#B56959;">          }else if(code === &#39;autoZoom&#39;){</span></span>
+<span class="line"><span style="color:#B56959;">             toolbar.autoZoom()</span></span>
+<span class="line"><span style="color:#B56959;">          }</span></span>
+<span class="line"><span style="color:#B56959;">        }</span></span>
+<span class="line"><span style="color:#B56959;">    });</span></span>
+<span class="line"><span style="color:#B56959;">    this.graph = new G6.Graph({</span></span>
+<span class="line"><span style="color:#B56959;">      container: &quot;topoChart&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">      width: this.width,</span></span>
+<span class="line"><span style="color:#B56959;">      height: this.height,</span></span>
+<span class="line"><span style="color:#B56959;">      fitView: true,</span></span>
+<span class="line"><span style="color:#B56959;">      fitViewPadding: 100,</span></span>
+<span class="line"><span style="color:#B56959;">      groupByTypes: false,</span></span>
+<span class="line"><span style="color:#B56959;">      linkCenter: false,</span></span>
+<span class="line"><span style="color:#B56959;">      layout: {</span></span>
+<span class="line"><span style="color:#B56959;">        pipes: [</span></span>
+<span class="line"><span style="color:#B56959;">          {</span></span>
+<span class="line"><span style="color:#B56959;">            // 该子图所使用的布局类型</span></span>
+<span class="line"><span style="color:#B56959;">            type: &quot;circular&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">            center: [halfWidth, halfHeight],</span></span>
+<span class="line"><span style="color:#B56959;">            radius: 80,</span></span>
+<span class="line"><span style="color:#B56959;">            nodesFilter: (node) =&gt; node.sysType === &quot;vpe&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">          },</span></span>
+<span class="line"><span style="color:#B56959;">        ],</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">      //交互行为相关配置</span></span>
+<span class="line"><span style="color:#B56959;">      modes: {</span></span>
+<span class="line"><span style="color:#B56959;">        default: [&quot;drag-canvas&quot;, &quot;zoom-canvas&quot;, {type: &quot;drag-combo&quot;, shouldEnd(e, parent) {</span></span>
+<span class="line"><span style="color:#B56959;">          if(parent) {</span></span>
+<span class="line"><span style="color:#B56959;">            return false;</span></span>
+<span class="line"><span style="color:#B56959;">          }</span></span>
+<span class="line"><span style="color:#B56959;">          return true;</span></span>
+<span class="line"><span style="color:#B56959;">        }}],</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">      plugins: [toolbar],</span></span>
+<span class="line"><span style="color:#B56959;">      defaultNode: {</span></span>
+<span class="line"><span style="color:#B56959;">        type: &quot;bubble&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">        labelCfg: {</span></span>
+<span class="line"><span style="color:#B56959;">          position: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">          style: {</span></span>
+<span class="line"><span style="color:#B56959;">            fill: &quot;white&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">            stroke: &quot;#fff&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">          },</span></span>
+<span class="line"><span style="color:#B56959;">        },</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">      defaultEdge: {</span></span>
+<span class="line"><span style="color:#B56959;">        color: &quot;#888&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">        type: &quot;animate-line&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">      defaultCombo: {</span></span>
+<span class="line"><span style="color:#B56959;">        padding: 1,</span></span>
+<span class="line"><span style="color:#B56959;">        style: {</span></span>
+<span class="line"><span style="color:#B56959;">          cursor: &quot;all-scroll&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">        },</span></span>
+<span class="line"><span style="color:#B56959;">        labelCfg: {</span></span>
+<span class="line"><span style="color:#B56959;">          style: {</span></span>
+<span class="line"><span style="color:#B56959;">            opacity: 0,</span></span>
+<span class="line"><span style="color:#B56959;">            fill: &quot;#303133&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">            fontSize: 12,</span></span>
+<span class="line"><span style="color:#B56959;">            stroke: &quot;#fff&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">          },</span></span>
+<span class="line"><span style="color:#B56959;">        },</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">    });</span></span>
+<span class="line"><span style="color:#B56959;">    //监听事件</span></span>
+<span class="line"><span style="color:#B56959;">     this.graphBehaviors();</span></span>
+<span class="line"><span style="color:#B56959;">  }</span></span>
+<span class="line"><span style="color:#B56959;">},</span></span>
+<span class="line"><span style="color:#B56959;">graphBehaviors(){</span></span>
+<span class="line"><span style="color:#B56959;">    this.graph.on(&#39;node:click&#39;,this.debounce(this.eventHandle, 300));</span></span>
+<span class="line"><span style="color:#B56959;"> //this.graph.on(&#39;edge:click&#39;... </span></span>
+<span class="line"><span style="color:#B56959;">},</span></span>
+<span class="line"><span style="color:#B56959;">debounce(fn, delay) {</span></span>
+<span class="line"><span style="color:#B56959;">  const delays = delay || 300;</span></span>
+<span class="line"><span style="color:#B56959;">  let timer;</span></span>
+<span class="line"><span style="color:#B56959;">  return function() {</span></span>
+<span class="line"><span style="color:#B56959;">    const th = this;</span></span>
+<span class="line"><span style="color:#B56959;">    const args = arguments;</span></span>
+<span class="line"><span style="color:#B56959;">    if (timer) {</span></span>
+<span class="line"><span style="color:#B56959;">      clearTimeout(timer);</span></span>
+<span class="line"><span style="color:#B56959;">    }</span></span>
+<span class="line"><span style="color:#B56959;">    timer = setTimeout(function() {</span></span>
+<span class="line"><span style="color:#B56959;">      timer = null;</span></span>
+<span class="line"><span style="color:#B56959;">      fn.apply(th, args);</span></span>
+<span class="line"><span style="color:#B56959;">    }, delays);</span></span>
+<span class="line"><span style="color:#B56959;">  };</span></span>
+<span class="line"><span style="color:#B56959;">},</span></span>
+<span class="line"><span style="color:#B56959;">    //2.查询数据</span></span>
+<span class="line"><span style="color:#B56959;">queryChartData(){</span></span>
+<span class="line"><span style="color:#B56959;">    //处理数据</span></span>
+<span class="line"><span style="color:#B56959;">    this.dealData(data)</span></span>
+<span class="line"><span style="color:#B56959;">}</span></span>
+<span class="line"><span style="color:#B56959;">//3.处理数据</span></span>
+<span class="line"><span style="color:#B56959;">dealData(data ) {</span></span>
+<span class="line"><span style="color:#B56959;">    //VPE节点</span></span>
+<span class="line"><span style="color:#B56959;">    nodes =  ...</span></span>
+<span class="line"><span style="color:#B56959;">    edges = ...</span></span>
+<span class="line"><span style="color:#B56959;">    combos = ...</span></span>
+<span class="line"><span style="color:#B56959;">    this.drawChart(...);</span></span>
+<span class="line"><span style="color:#B56959;">}</span></span>
+<span class="line"><span style="color:#B56959;">//4.渲染数据</span></span>
+<span class="line"><span style="color:#B56959;">drawChart() {</span></span>
+<span class="line"><span style="color:#B56959;">  this.graph.read({</span></span>
+<span class="line"><span style="color:#B56959;">    nodes,</span></span>
+<span class="line"><span style="color:#B56959;">    edges,</span></span>
+<span class="line"><span style="color:#B56959;">    combos,</span></span>
+<span class="line"><span style="color:#B56959;">  });</span></span>
+<span class="line"><span style="color:#B56959;">},</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">chartLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">topoChart</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">).</span><span style="color:#BD976A;">scrollWidth</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">topoChart</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">).</span><span style="color:#BD976A;">scrollHeight</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">600</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">initChart</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">queryChartData</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">chartLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//监听窗口大小变化,重绘网络拓扑</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">resize</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">rePaint</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#80A665;">beforeDestroy</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">graph</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">graph</span><span style="color:#666666;">.</span><span style="color:#80A665;">clear</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">graph</span><span style="color:#666666;">.</span><span style="color:#80A665;">destroy</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$data</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$options</span><span style="color:#666666;">.</span><span style="color:#80A665;">data</span><span style="color:#666666;">());</span></span>
+<span class="line"><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">chartLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">topoChart</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">).</span><span style="color:#B07D48;">scrollWidth</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">topoChart</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">).</span><span style="color:#B07D48;">scrollHeight</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">600</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">initChart</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">queryChartData</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">chartLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//监听窗口大小变化,重绘网络拓扑</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">resize</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">rePaint</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#59873A;">beforeDestroy</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">graph</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">graph</span><span style="color:#999999;">.</span><span style="color:#59873A;">clear</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">graph</span><span style="color:#999999;">.</span><span style="color:#59873A;">destroy</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$data</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$options</span><span style="color:#999999;">.</span><span style="color:#59873A;">data</span><span style="color:#999999;">());</span></span>
+<span class="line"><span style="color:#999999;">},</span></span></code></pre></div><h2 id="注册节点" tabindex="-1">注册节点 <a class="header-anchor" href="#注册节点" aria-label="Permalink to &quot;注册节点&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//registerElements.js</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">G6</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@antv/g6</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//共同节点注册</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">commonRegister</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 注册实线动画</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerEdge</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">animate-line</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">drawShape</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">self</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shapeStyle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">self</span><span style="color:#666666;">.</span><span style="color:#80A665;">getShapeStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">shapeStyle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">(</span><span style="color:#BD976A;">shapeStyle</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">strokeOpacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shapeStyle</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">afterDraw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">children</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//线条动画</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">opacity</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">opacity</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">strokeOpacity</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">strokeOpacity</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">opacity</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">strokeOpacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">strokeOpacity</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">300</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//箭头动画</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startPoint</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">getPoint</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">circle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">circle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startPoint</span><span style="color:#666666;">.</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startPoint</span><span style="color:#666666;">.</span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#1890ff</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">r</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">circle-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">circle</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tmpPoint</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">getPoint</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tmpPoint</span><span style="color:#666666;">.</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tmpPoint</span><span style="color:#666666;">.</span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">setState</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">keyShape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">disappearing</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">strokeOpacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">dark</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">attr</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">opacity</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">attr</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">opacity</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">line</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//注册iconfont节点</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerNode</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfontHub</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">draw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelCfg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelStyle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">circle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">r</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hub-bg-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//添加图标</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fontFamily</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfont</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fontSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">round</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">...</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hub-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//添加label</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">round</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textBaseline</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">middle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">label</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">...</span><span style="color:#BD976A;">labelStyle</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hub-label</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// afterDraw(cfg, group) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   const shape = group.get(&#39;children&#39;)[0];</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   shape.animate(</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     (ratio) =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       let fill = &#39;#C396ED&#39;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       if(ratio &gt; 0.6){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         fill = &#39;#FFCF8B&#39;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       }else if(ratio &gt; 0.3){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         fill = &#39;#C396ED&#39;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       }else {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         fill = &#39;#75D882&#39;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       }</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       return {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         fill,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       };</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     },</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       repeat: true,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       duration: 1500,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       // easing: &#39;easeCubic&#39;,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     },</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   );</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//自定义节点和节点动画</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerNode</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vpe-rect-animate</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">afterDraw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stroke</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">radius</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">getShapeStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">back1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rect</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">zIndex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stroke</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">radius</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rback1-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">back2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rect</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">zIndex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stroke</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">radius</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rback2-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">back3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">circle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">zIndex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stroke</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">radius</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rback3-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">sort</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// Sort according to the zIndex</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">back1</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">easing</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">easeCubic</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">delay</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">300</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// repeat</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// no delay</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">back2</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">easing</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">easeCubic</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">delay</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">back3</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">easing</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">easeCubic</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">delay</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// repeat</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 3s delay</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rect</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//弹窗特有节点注册</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">dialogRegister</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#666666;">   </span><span style="color:#758575DD;">//注册iconfont节点</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerNode</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfontCpe</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">draw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelCfg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelStyle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//添加图标</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fontFamily</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfont</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textBaseline</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">middle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fontSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">...</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cpe-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//添加label</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">label</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">...</span><span style="color:#BD976A;">labelStyle</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cpe-label</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">afterDraw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">children</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\ue604</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.6</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\ue604</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.3</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\ue606</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\ue605</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1500</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">delay</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// easing: &#39;easeCubic&#39;,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//注册虚线动画</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// G6.registerEdge(&quot;vpn-line-dash&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     afterDraw(cfg, group) {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       const shape = group.get(&quot;children&quot;)[0];</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       let index = 0;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       shape.animate(</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         () =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           index = index+0.2;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           if (index &gt; 9) {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//             index = 0;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           }</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           const res = {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//             lineDash: [4, 4],</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//             lineDashOffset: -index,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           };</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           return res;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           repeat: true,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           duration:10000,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         }</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       );</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   &quot;line&quot;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// );</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//网络拓扑总览特有节点注册</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">viewRegister</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//注册iconfont combos</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// G6.registerCombo(&quot;cloudCombo&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     drawShape: function drawShape(cfg, group) {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       // const {  labelCfg: labelStyle   } = cfg;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       const keyShape = group.addShape(&quot;text&quot;, { </span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         attrs: {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           y: 0,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           x: 0,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           fill: cfg.style.fill,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           stroke: cfg.style.fill,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           fontFamily: &quot;iconfont&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           textAlign: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           textBaseline: &quot;middle&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           text: &quot;\ue603&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           fontSize: 320,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           zIndex: 8,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         name: &quot;cloud&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       });</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           //添加label</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     // group.addShape(&quot;text&quot;, {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //   attrs: {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     x: 0,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     y: -80,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     textAlign: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     textBaseline: &quot;middle&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     text: cfg.label,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     ...labelStyle.style,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //   },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //   name: &quot;hubCombo-label&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     // });</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       return keyShape;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   &quot;cicle&quot;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// );</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//注册SVG combo</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerCombo</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cloudCombo</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">drawShape</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">drawShape</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelCfg</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">M 448 102.875 c 0 -82.09 -56.678 -150.9 -132.996 -169.48 C 311.762 -195.305 206.546 -298.667 77.142 -298.667 c -75.792 0 -143.266 35.494 -186.854 90.732 c -24.442 -31.598 -62.69 -51.96 -105.708 -51.96 c -73.81 0 -133.642 59.874 -133.642 133.722 c 0 6.436 0.48 12.76 1.364 18.954 c -11.222 -2.024 -22.766 -3.138 -34.57 -3.138 C -489.266 -110.359 -576 -23.5707 -576 83.4853 C -576 190.547 -489.266 277.333 -382.27 277.333 l 656.262 0 l 0 -0.012 C 370.13 277.137 448 199.109 448 102.875 Z</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pathArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">opath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">pathArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">a-zA-Z</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#BD976A;">opath</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">([</span><span style="color:#BD976A;">item</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#BD976A;">opath</span><span style="color:#666666;">[</span><span style="color:#BD976A;">opath</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">].</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#80A665;">parseFloat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">opath</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">p</span><span style="color:#666666;">,</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#666666;">...</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">path</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">opath</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cloud</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">100</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">label</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">#303133</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hubCombo-label</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">single-combo</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">//节点文本溢出省略处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fittingString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">maxWidth</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fontSize</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ellipsis</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">...</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ellipsisLength</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Util</span><span style="color:#666666;">.</span><span style="color:#80A665;">getTextSize</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ellipsis</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fontSize</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">RegExp</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C99076;">\u4E00</span><span style="color:#C98A7D;">-</span><span style="color:#C99076;">\u9FA5</span><span style="color:#C98A7D;">]+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">letter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">maxWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ellipsisLength</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">letter</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fontSize</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Util</span><span style="color:#666666;">.</span><span style="color:#80A665;">getLetterWidth</span><span style="color:#666666;">(</span><span style="color:#BD976A;">letter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fontSize</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">maxWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ellipsisLength</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">substr</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#C98A7D;"> i</span><span style="color:#666666;">)</span><span style="color:#666666;">}${</span><span style="color:#C98A7D;">ellipsis</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//registerElements.js</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">G6</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@antv/g6</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//共同节点注册</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">commonRegister</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 注册实线动画</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerEdge</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">animate-line</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">drawShape</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">self</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shapeStyle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">self</span><span style="color:#999999;">.</span><span style="color:#59873A;">getShapeStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">shapeStyle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">(</span><span style="color:#B07D48;">shapeStyle</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">strokeOpacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shapeStyle</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">afterDraw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">children</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//线条动画</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">opacity</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">opacity</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">strokeOpacity</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">strokeOpacity</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">opacity</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">strokeOpacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">strokeOpacity</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">300</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//箭头动画</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startPoint</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">getPoint</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">circle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">circle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startPoint</span><span style="color:#999999;">.</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startPoint</span><span style="color:#999999;">.</span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#1890ff</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">r</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">circle-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">circle</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tmpPoint</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">getPoint</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tmpPoint</span><span style="color:#999999;">.</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tmpPoint</span><span style="color:#999999;">.</span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">setState</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">keyShape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">disappearing</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">strokeOpacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">dark</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">attr</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">opacity</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">attr</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">opacity</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">line</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//注册iconfont节点</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerNode</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfontHub</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">draw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelCfg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelStyle</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">circle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">r</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hub-bg-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//添加图标</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fontFamily</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfont</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fontSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">round</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">...</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hub-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//添加label</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">round</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">4</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textBaseline</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">middle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">label</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">...</span><span style="color:#B07D48;">labelStyle</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hub-label</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// afterDraw(cfg, group) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   const shape = group.get(&#39;children&#39;)[0];</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   shape.animate(</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     (ratio) =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       let fill = &#39;#C396ED&#39;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       if(ratio &gt; 0.6){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         fill = &#39;#FFCF8B&#39;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       }else if(ratio &gt; 0.3){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         fill = &#39;#C396ED&#39;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       }else {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         fill = &#39;#75D882&#39;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       }</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       return {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         fill,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       };</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     },</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       repeat: true,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       duration: 1500,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       // easing: &#39;easeCubic&#39;,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     },</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   );</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// },</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//自定义节点和节点动画</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerNode</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vpe-rect-animate</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">afterDraw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stroke</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">radius</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">getShapeStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">back1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rect</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">zIndex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stroke</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">radius</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rback1-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">back2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rect</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">zIndex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stroke</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">radius</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rback2-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">back3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">circle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">zIndex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stroke</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">radius</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rback3-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">sort</span><span style="color:#999999;">();</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// Sort according to the zIndex</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">back1</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">easing</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">easeCubic</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">delay</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">300</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// repeat</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// no delay</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">back2</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">easing</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">easeCubic</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">delay</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">back3</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">easing</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">easeCubic</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">delay</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// repeat</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 3s delay</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rect</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//弹窗特有节点注册</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">dialogRegister</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#999999;">   </span><span style="color:#A0ADA0;">//注册iconfont节点</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerNode</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfontCpe</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">draw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelCfg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelStyle</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//添加图标</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fontFamily</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfont</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textBaseline</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">middle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fontSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">...</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cpe-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//添加label</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">label</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">...</span><span style="color:#B07D48;">labelStyle</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cpe-label</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">afterDraw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">children</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\ue604</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.6</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\ue604</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.3</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\ue606</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\ue605</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1500</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">delay</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// easing: &#39;easeCubic&#39;,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//注册虚线动画</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// G6.registerEdge(&quot;vpn-line-dash&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     afterDraw(cfg, group) {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       const shape = group.get(&quot;children&quot;)[0];</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       let index = 0;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       shape.animate(</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         () =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           index = index+0.2;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           if (index &gt; 9) {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//             index = 0;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           }</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           const res = {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//             lineDash: [4, 4],</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//             lineDashOffset: -index,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           };</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           return res;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           repeat: true,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           duration:10000,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         }</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       );</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   &quot;line&quot;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// );</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//网络拓扑总览特有节点注册</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">viewRegister</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//注册iconfont combos</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// G6.registerCombo(&quot;cloudCombo&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     drawShape: function drawShape(cfg, group) {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       // const {  labelCfg: labelStyle   } = cfg;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       const keyShape = group.addShape(&quot;text&quot;, { </span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         attrs: {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           y: 0,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           x: 0,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           fill: cfg.style.fill,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           stroke: cfg.style.fill,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           fontFamily: &quot;iconfont&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           textAlign: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           textBaseline: &quot;middle&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           text: &quot;\ue603&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           fontSize: 320,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           zIndex: 8,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         name: &quot;cloud&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       });</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           //添加label</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     // group.addShape(&quot;text&quot;, {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //   attrs: {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     x: 0,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     y: -80,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     textAlign: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     textBaseline: &quot;middle&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     text: cfg.label,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     ...labelStyle.style,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //   },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //   name: &quot;hubCombo-label&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     // });</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       return keyShape;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   &quot;cicle&quot;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// );</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//注册SVG combo</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerCombo</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cloudCombo</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">drawShape</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">drawShape</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelCfg</span><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">M 448 102.875 c 0 -82.09 -56.678 -150.9 -132.996 -169.48 C 311.762 -195.305 206.546 -298.667 77.142 -298.667 c -75.792 0 -143.266 35.494 -186.854 90.732 c -24.442 -31.598 -62.69 -51.96 -105.708 -51.96 c -73.81 0 -133.642 59.874 -133.642 133.722 c 0 6.436 0.48 12.76 1.364 18.954 c -11.222 -2.024 -22.766 -3.138 -34.57 -3.138 C -489.266 -110.359 -576 -23.5707 -576 83.4853 C -576 190.547 -489.266 277.333 -382.27 277.333 l 656.262 0 l 0 -0.012 C 370.13 277.137 448 199.109 448 102.875 Z</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pathArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">opath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">pathArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">a-zA-Z</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)){</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#B07D48;">opath</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">([</span><span style="color:#B07D48;">item</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#B07D48;">opath</span><span style="color:#999999;">[</span><span style="color:#B07D48;">opath</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">].</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#59873A;">parseFloat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">opath</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">p</span><span style="color:#999999;">,</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#393A34;">  </span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#999999;">...</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">path</span><span style="color:#999999;">:</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">opath</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cloud</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">100</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">label</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">#303133</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hubCombo-label</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">single-combo</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">   </span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//节点文本溢出省略处理</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fittingString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">maxWidth</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fontSize</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ellipsis</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">...</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ellipsisLength</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Util</span><span style="color:#999999;">.</span><span style="color:#59873A;">getTextSize</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ellipsis</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fontSize</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">RegExp</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#A65E2B;">\u4E00</span><span style="color:#B56959;">-</span><span style="color:#A65E2B;">\u9FA5</span><span style="color:#B56959;">]+</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">letter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">maxWidth</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ellipsisLength</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">letter</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fontSize</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Util</span><span style="color:#999999;">.</span><span style="color:#59873A;">getLetterWidth</span><span style="color:#999999;">(</span><span style="color:#B07D48;">letter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fontSize</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">maxWidth</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ellipsisLength</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#999999;">${</span><span style="color:#B56959;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">substr</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#B56959;"> i</span><span style="color:#999999;">)</span><span style="color:#999999;">}${</span><span style="color:#B56959;">ellipsis</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Problem/Graphical/Antv代码片段集锦.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><!----></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Antv使用总结</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.html" "b/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.html"
new file mode 100644
index 00000000..798b13d4
--- /dev/null
+++ "b/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.html"
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Problem_Graphical_Antv使用总结.md.10b596c9.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Graphical</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv代码片段集锦</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv使用总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Echarts问题总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Nuxt3</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nuxt3项目踩坑</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VitePress</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VitePress踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VuePress踩坑记录</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VueProject</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue项目踩坑一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Problem_Graphical_Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-6b87e69f><div><h3 id="一、默认收缩二级节点" tabindex="-1">一、默认收缩二级节点 <a class="header-anchor" href="#一、默认收缩二级节点" aria-label="Permalink to &quot;一、默认收缩二级节点&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//树形图哪个需要收缩则把属性collapsed设置为true</span></span>
+<span class="line"><span style="color:#BD976A;">data</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">collapsed</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//树形图哪个需要收缩则把属性collapsed设置为true</span></span>
+<span class="line"><span style="color:#B07D48;">data</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">collapsed</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">)</span></span></code></pre></div><h3 id="二、改用iconfont文字不居中问题" tabindex="-1">二、改用iconfont文字不居中问题 <a class="header-anchor" href="#二、改用iconfont文字不居中问题" aria-label="Permalink to &quot;二、改用iconfont文字不居中问题&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//注册节点添加label图形时动态计算label位置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">textBaseline</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">middle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">label</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">...</span><span style="color:#BD976A;">labelStyle</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//这里需要重新处理x,y</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hubCombo-label</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//注册节点添加label图形时动态计算label位置</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">textBaseline</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">middle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">label</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">...</span><span style="color:#B07D48;">labelStyle</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//这里需要重新处理x,y</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hubCombo-label</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h3 id="三、初始化画图完成后出现这个锯齿" tabindex="-1">三、初始化画图完成后出现这个锯齿 <a class="header-anchor" href="#三、初始化画图完成后出现这个锯齿" aria-label="Permalink to &quot;三、初始化画图完成后出现这个锯齿&quot;">​</a></h3></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Problem/Graphical/Antv使用总结.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Antv代码片段集锦</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Echarts问题总结</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.html" "b/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.html"
new file mode 100644
index 00000000..6fe19b10
--- /dev/null
+++ "b/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.html"
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Echarts问题总结 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Problem_Graphical_Echarts问题总结.md.fe67d408.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Graphical</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv代码片段集锦</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv使用总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Echarts问题总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Nuxt3</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nuxt3项目踩坑</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VitePress</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VitePress踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VuePress踩坑记录</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VueProject</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue项目踩坑一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Problem_Graphical_Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-6b87e69f><div><h1 id="echarts问题总结" tabindex="-1">Echarts问题总结 <a class="header-anchor" href="#echarts问题总结" aria-label="Permalink to &quot;Echarts问题总结&quot;">​</a></h1><h2 id="屏幕适配问题" tabindex="-1">屏幕适配问题 <a class="header-anchor" href="#屏幕适配问题" aria-label="Permalink to &quot;屏幕适配问题&quot;">​</a></h2><blockquote><p>方案一: 使用<code>scss</code>函数计算比例</p></blockquote><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//默认设计稿的宽度</span></span>
+<span class="line"><span style="color:#BD976A;">$designWidth</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1920</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//默认设计稿的高度</span></span>
+<span class="line"><span style="color:#BD976A;">$designHeight</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1080</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//px转为vw的函数</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">vw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">$px</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">math</span><span style="color:#666666;">.</span><span style="color:#B8A965;">div</span><span style="color:#666666;">(</span><span style="color:#BD976A;">$px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$designWidth</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">vw</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//px转为vh的函数</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">vh</span><span style="color:#666666;">(</span><span style="color:#BD976A;">$px</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">math</span><span style="color:#666666;">.</span><span style="color:#B8A965;">div</span><span style="color:#666666;">(</span><span style="color:#BD976A;">$px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$designHeight</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">vh</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//默认设计稿的宽度</span></span>
+<span class="line"><span style="color:#B07D48;">$designWidth</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1920</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//默认设计稿的高度</span></span>
+<span class="line"><span style="color:#B07D48;">$designHeight</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1080</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//px转为vw的函数</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">function</span><span style="color:#393A34;"> </span><span style="color:#998418;">vw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">$px</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">math</span><span style="color:#999999;">.</span><span style="color:#998418;">div</span><span style="color:#999999;">(</span><span style="color:#B07D48;">$px</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$designWidth</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">vw</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//px转为vh的函数</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">function</span><span style="color:#393A34;"> </span><span style="color:#998418;">vh</span><span style="color:#999999;">(</span><span style="color:#B07D48;">$px</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">math</span><span style="color:#999999;">.</span><span style="color:#998418;">div</span><span style="color:#999999;">(</span><span style="color:#B07D48;">$px</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$designHeight</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">vh</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="左侧菜单折叠响应式" tabindex="-1">左侧菜单折叠响应式 <a class="header-anchor" href="#左侧菜单折叠响应式" aria-label="Permalink to &quot;左侧菜单折叠响应式&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#758575DD;">// 监听窗口大小,所有echart实例尺寸尺寸改变</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">resize</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">chartsInstance</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">chart</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">chart</span><span style="color:#666666;">.</span><span style="color:#80A665;">resize</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//监听div容器的无效</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">/*this.$refs.onlineIspRef.addEventListener(&quot;resize&quot;,() =&gt; {</span></span>
+<span class="line"><span style="color:#758575DD;">      this.chartsInstance.forEach(chart =&gt; {</span></span>
+<span class="line"><span style="color:#758575DD;">        chart.resize()</span></span>
+<span class="line"><span style="color:#758575DD;">      });</span></span>
+<span class="line"><span style="color:#758575DD;">    })*/</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 监听窗口大小,所有echart实例尺寸尺寸改变</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">resize</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">chartsInstance</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">chart</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">chart</span><span style="color:#999999;">.</span><span style="color:#59873A;">resize</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//监听div容器的无效</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">/*this.$refs.onlineIspRef.addEventListener(&quot;resize&quot;,() =&gt; {</span></span>
+<span class="line"><span style="color:#A0ADA0;">      this.chartsInstance.forEach(chart =&gt; {</span></span>
+<span class="line"><span style="color:#A0ADA0;">        chart.resize()</span></span>
+<span class="line"><span style="color:#A0ADA0;">      });</span></span>
+<span class="line"><span style="color:#A0ADA0;">    })*/</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>方案: 侧边栏按钮点击展开/折叠时, 手动触发<code>window.resize</code></p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">toggleLeftMenu</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">Cookies</span><span style="color:#666666;">.</span><span style="color:#80A665;">set</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">sidebar</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">leftMenuOpen</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">close</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">open</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">path</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$store</span><span style="color:#666666;">.</span><span style="color:#80A665;">commit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">toggleLeftMenu</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">leftMenuOpen</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">doResize</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#80A665;">doResize</span><span style="color:#666666;">(){</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ev</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Event</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">resize</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">bubbles</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cancelable</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#4D9375;">false</span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">dispatchEvent</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ev</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">120</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//不使用定时器没反应</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//有效, 而且提示event.initEvent方法已经过时(deprecated)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//但是折线图左侧收缩/延伸会有抖动问题,需要调节定时器时间使比较不突兀</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/*setTimeout(function(){</span></span>
+<span class="line"><span style="color:#758575DD;">      if(document.createEvent) {</span></span>
+<span class="line"><span style="color:#758575DD;">          var event = document.createEvent(&quot;HTMLEvents&quot;);</span></span>
+<span class="line"><span style="color:#758575DD;">          event.initEvent(&quot;resize&quot;, true, true);</span></span>
+<span class="line"><span style="color:#758575DD;">          window.dispatchEvent(event);</span></span>
+<span class="line"><span style="color:#758575DD;">      } else if(document.createEventObject) {</span></span>
+<span class="line"><span style="color:#758575DD;">          window.fireEvent(&quot;onresize&quot;);</span></span>
+<span class="line"><span style="color:#758575DD;">      }</span></span>
+<span class="line"><span style="color:#758575DD;">  },120);*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">toggleLeftMenu</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">Cookies</span><span style="color:#999999;">.</span><span style="color:#59873A;">set</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">sidebar</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">leftMenuOpen</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">close</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">open</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">path</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$store</span><span style="color:#999999;">.</span><span style="color:#59873A;">commit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">toggleLeftMenu</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">leftMenuOpen</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">doResize</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#59873A;">doResize</span><span style="color:#999999;">(){</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ev</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Event</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">resize</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">bubbles</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cancelable</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#1E754F;">false</span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">dispatchEvent</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ev</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span><span style="color:#2F798A;">120</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//不使用定时器没反应</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//有效, 而且提示event.initEvent方法已经过时(deprecated)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//但是折线图左侧收缩/延伸会有抖动问题,需要调节定时器时间使比较不突兀</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/*setTimeout(function(){</span></span>
+<span class="line"><span style="color:#A0ADA0;">      if(document.createEvent) {</span></span>
+<span class="line"><span style="color:#A0ADA0;">          var event = document.createEvent(&quot;HTMLEvents&quot;);</span></span>
+<span class="line"><span style="color:#A0ADA0;">          event.initEvent(&quot;resize&quot;, true, true);</span></span>
+<span class="line"><span style="color:#A0ADA0;">          window.dispatchEvent(event);</span></span>
+<span class="line"><span style="color:#A0ADA0;">      } else if(document.createEventObject) {</span></span>
+<span class="line"><span style="color:#A0ADA0;">          window.fireEvent(&quot;onresize&quot;);</span></span>
+<span class="line"><span style="color:#A0ADA0;">      }</span></span>
+<span class="line"><span style="color:#A0ADA0;">  },120);*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#999999;">},</span></span></code></pre></div><h2 id="地图缩放重叠问题" tabindex="-1">地图缩放重叠问题 <a class="header-anchor" href="#地图缩放重叠问题" aria-label="Permalink to &quot;地图缩放重叠问题&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202303291527581.png" alt=""></p><p><a href="https://echarts.apache.org/zh/option.html#series-map.geoIndex" target="_blank" rel="noreferrer">Echart文档参考</a></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">geo</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">roam</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">map</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">china</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">aspectScale</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.75</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">zoom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">itemStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">normal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">shadowColor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#ddd</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">shadowOffsetX</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">shadowOffsetY</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">regions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">南海诸岛</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">itemStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">areaColor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rgba(0, 10, 52, 1)</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">borderColor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rgba(0, 10, 52, 1)</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">normal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">show</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#009cc9</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">series</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">map</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">geoIndex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//方案一：设置这个属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">normal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">show</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">textStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#666</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">emphasis</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">textStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#fff</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">itemStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">normal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">borderType</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">dashed</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">emphasis</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">areaColor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#3777DD</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">borderWidth</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">zoom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.1</span><span style="color:#666666;">,</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">map</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">china</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// //方案二：删除这个属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">geo</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">roam</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">map</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">china</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">aspectScale</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.75</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">zoom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">itemStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">normal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">shadowColor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#ddd</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">shadowOffsetX</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">shadowOffsetY</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">regions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">南海诸岛</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">itemStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">areaColor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rgba(0, 10, 52, 1)</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">borderColor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rgba(0, 10, 52, 1)</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">normal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">show</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#009cc9</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">series</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">map</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line highlighted"><span style="color:#393A34;">			</span><span style="color:#998418;">geoIndex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//方案一：设置这个属性</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">normal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">show</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">textStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#666</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">emphasis</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">textStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#fff</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">itemStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">normal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">borderType</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">dashed</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">emphasis</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">areaColor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#3777DD</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">borderWidth</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">zoom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.1</span><span style="color:#999999;">,</span></span>
+<span class="line highlighted"><span style="color:#393A34;">			</span><span style="color:#998418;">map</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">china</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// //方案二：删除这个属性</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Problem/Graphical/Echarts问题总结.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Antv使用总结</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Nuxt3项目踩坑</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.html" "b/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.html"
new file mode 100644
index 00000000..344905c9
--- /dev/null
+++ "b/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.html"
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Problem_Nuxt3_Nuxt3项目踩坑.md.e3bdda07.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Graphical</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv代码片段集锦</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv使用总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Echarts问题总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Nuxt3</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nuxt3项目踩坑</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VitePress</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VitePress踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VuePress踩坑记录</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VueProject</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue项目踩坑一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Problem_Nuxt3_Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-6b87e69f><div><h2 id="uncaught-typeerror-cannot-read-properties-of-undefined-reading-prototype" tabindex="-1">Uncaught TypeError: Cannot read properties of undefined (reading &#39;prototype&#39;) <a class="header-anchor" href="#uncaught-typeerror-cannot-read-properties-of-undefined-reading-prototype" aria-label="Permalink to &quot;Uncaught TypeError: Cannot read properties of undefined (reading &#39;prototype&#39;)&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-05-19-14-49-43.png" alt="2023-05-19-14-49-43"></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//uno.config.ts</span></span>
+<span class="line"><span style="color:#80A665;">shortcuts</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f-s-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">flex justify-start items-center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//uno.config.ts</span></span>
+<span class="line"><span style="color:#59873A;">shortcuts</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f-s-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">flex justify-start items-center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]];</span></span></code></pre></div><ol><li>写在类名上不生效</li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">&lt;!--f-s-c 直接写在类名上不生效--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hidden lg:f-c-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Test</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">&lt;!--f-s-c 直接写在类名上不生效--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hidden lg:f-c-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Test</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><ol start="2"><li>写在 CSS 上报错</li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">nav</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Test</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">nav</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Test</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">// </span><span style="color:#4D9375;">f-s-c</span><span style="color:#DBD7CAEE;"> 报错；The `xl:</span><span style="color:#4D9375;">f-c-c</span><span style="color:#DBD7CAEE;">` class does not exist. If `xl:</span><span style="color:#4D9375;">f-c-c</span><span style="color:#DBD7CAEE;">` is </span><span style="color:#4D9375;">a</span><span style="color:#DBD7CAEE;"> custom class</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> make sure it is defined within </span><span style="color:#4D9375;">a</span><span style="color:#DBD7CAEE;"> `@layer` directive.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">nav</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  @</span><span style="color:#B8A965;">apply</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">hidden</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">lg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">f-c-c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">// </span><span style="color:#1E754F;">f-s-c</span><span style="color:#393A34;"> 报错；The `xl:</span><span style="color:#1E754F;">f-c-c</span><span style="color:#393A34;">` class does not exist. If `xl:</span><span style="color:#1E754F;">f-c-c</span><span style="color:#393A34;">` is </span><span style="color:#1E754F;">a</span><span style="color:#393A34;"> custom class</span><span style="color:#999999;">,</span><span style="color:#393A34;"> make sure it is defined within </span><span style="color:#1E754F;">a</span><span style="color:#393A34;"> `@layer` directive.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">nav</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  @</span><span style="color:#998418;">apply</span><span style="color:#393A34;"> </span><span style="color:#998418;">hidden</span><span style="color:#393A34;"> </span><span style="color:#998418;">lg</span><span style="color:#999999;">:</span><span style="color:#393A34;">f-c-c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>解决方法：断点后不写自定义的</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hidden lg:flex justify-center items-center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Test</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hidden lg:flex justify-center items-center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Test</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>总结：自定义的类名快捷键不能写在变体后面</p><h3 id="hidden-与自定义变体不能一起用" tabindex="-1">hidden 与自定义变体不能一起用 <a class="header-anchor" href="#hidden-与自定义变体不能一起用" aria-label="Permalink to &quot;hidden 与自定义变体不能一起用&quot;">​</a></h3><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//uno.config.ts</span></span>
+<span class="line"><span style="color:#80A665;">shortcuts</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f-s-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">flex justify-start items-center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f-c-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">flex justify-center items-center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//uno.config.ts</span></span>
+<span class="line"><span style="color:#59873A;">shortcuts</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f-s-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">flex justify-start items-center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f-c-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">flex justify-center items-center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">];</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hidden xl:f-c-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">TEST</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hidden xl:f-c-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">TEST</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>可以这样用</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f-s-c xl:f-c-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">TEST</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f-s-c xl:f-c-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">TEST</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="项目一直报-element-相关错误" tabindex="-1">项目一直报 Element 相关错误 <a class="header-anchor" href="#项目一直报-element-相关错误" aria-label="Permalink to &quot;项目一直报 Element 相关错误&quot;">​</a></h2><p><code>element-ui.js:1 Uncaught TypeError: Cannot read properties of undefined (reading &#39;prototype&#39;)</code><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-05-21-20-26-38.png" alt="2023-05-21-20-26-38"> 换浏览器后没报错，定位到可能是浏览器插件的原因，果然排除法找到是：YouTube 视频摘要 ChatGPT 生成-快速笔记 (中文版) 的问题！</p><h2 id="跨域问题" tabindex="-1">跨域问题 <a class="header-anchor" href="#跨域问题" aria-label="Permalink to &quot;跨域问题&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">defineNuxtConfig</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* ... */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">nitro</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">devProxy</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/account/api</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">target</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">http://192.168.211.63/account/api</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">       </span><span style="color:#758575DD;">// target: &#39;http://192.168.211.63&#39;, 【不生效】 不同于 vite，这样配置到达 nginx 是 &#39;/&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">ws</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">changeOrigin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#59873A;">defineNuxtConfig</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* ... */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">nitro</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">devProxy</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/account/api</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">target</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">http://192.168.211.63/account/api</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">       </span><span style="color:#A0ADA0;">// target: &#39;http://192.168.211.63&#39;, 【不生效】 不同于 vite，这样配置到达 nginx 是 &#39;/&#39;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">ws</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">changeOrigin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//业务请求</span></span>
+<span class="line"><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getImgCode</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">useFetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/account/api/getImageCode</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">method</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">POST</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">body</span><span style="color:#666666;">:{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//业务请求</span></span>
+<span class="line"><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getImgCode</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">useFetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/account/api/getImageCode</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">method</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">POST</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">body</span><span style="color:#999999;">:{},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="nuxt-simple-sitemap插件使用问题" tabindex="-1">nuxt-simple-sitemap插件使用问题 <a class="header-anchor" href="#nuxt-simple-sitemap插件使用问题" aria-label="Permalink to &quot;nuxt-simple-sitemap插件使用问题&quot;">​</a></h2><p>打包时报错：解析到错误 URL</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">nitro</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">prerender</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">crawlLinks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">routes</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//去掉： ,&#39;sitemap.xml&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">nitro</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">prerender</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">crawlLinks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">routes</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//去掉： ,&#39;sitemap.xml&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>测试环境能访问<code>sitemap.xml</code> 页面 但是线上环境访问不到，报相关错误：<code>/__sitemap__/routes.json</code> ，需要在 nginx 配置 IP 和主机名的传送。</p></blockquote><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;"># nginx.conf</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#80A665;">proxy_set_header</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">X-Real-IP</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$remote_addr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#80A665;">proxy_set_header</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Host</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$host</span><span style="color:#666666;">;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;"># nginx.conf</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#59873A;">proxy_set_header</span><span style="color:#393A34;"> </span><span style="color:#B56959;">X-Real-IP</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$remote_addr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#59873A;">proxy_set_header</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Host</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$host</span><span style="color:#999999;">;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Problem/Nuxt3/Nuxt3项目踩坑.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Echarts问题总结</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>VitePress踩坑记录</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.html" "b/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.html"
new file mode 100644
index 00000000..7a4d1047
--- /dev/null
+++ "b/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.html"
@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>VitePress踩坑记录 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Problem_VitePress_VitePress踩坑记录.md.007e02bc.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Graphical</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv代码片段集锦</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv使用总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Echarts问题总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Nuxt3</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nuxt3项目踩坑</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VitePress</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VitePress踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VuePress踩坑记录</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VueProject</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue项目踩坑一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Problem_VitePress_VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-6b87e69f><div><h1 id="vitepress踩坑记录" tabindex="-1">VitePress踩坑记录 <a class="header-anchor" href="#vitepress踩坑记录" aria-label="Permalink to &quot;VitePress踩坑记录&quot;">​</a></h1><h2 id="err-invalid-file-url-host" tabindex="-1">ERR_INVALID_FILE_URL_HOST <a class="header-anchor" href="#err-invalid-file-url-host" aria-label="Permalink to &quot;ERR_INVALID_FILE_URL_HOST&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">DANGER</p><p>执行打包命令时，出现此错误 <code>TypeError [ERR_INVALID_FILE_URL_HOST]: File URL host must be &quot;localhost&quot; or empty on darwin</code></p></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041941600.png" alt=""></p><h3 id="形成原因-全局替换时粗心大意造成img-src属性多了个" tabindex="-1">形成原因：全局替换时粗心大意造成img src属性多了个&#39;/&#39; <a class="header-anchor" href="#形成原因-全局替换时粗心大意造成img-src属性多了个" aria-label="Permalink to &quot;形成原因：全局替换时粗心大意造成img src属性多了个&#39;/&#39;&quot;">​</a></h3><h3 id="解决" tabindex="-1">解决 <a class="header-anchor" href="#解决" aria-label="Permalink to &quot;解决&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>刚开始我只能猜到某个文件路径有问题 ，又不知道那个文件有问题，最后用上了 <strong>排除法</strong> 逐个移除文章文件夹最终才定位到出问题的文档。 虽然问题解决的的过程有点费劲，不得不说当问题搞得人想撞墙的时候，无疑也是一个不错的思路和方法！！！</p></div><p>删除多余的&#39;/&#39;就好了，自己解决自己的 <strong><a href="https://github.com/vuejs/vitepress/issues/1895" target="_blank" rel="noreferrer">issues</a></strong> ！！！</p><h2 id="实现自动生成文章左侧侧边栏" tabindex="-1">实现自动生成文章左侧侧边栏 <a class="header-anchor" href="#实现自动生成文章左侧侧边栏" aria-label="Permalink to &quot;实现自动生成文章左侧侧边栏&quot;">​</a></h2><h3 id="痛点及需求" tabindex="-1">痛点及需求 <a class="header-anchor" href="#痛点及需求" aria-label="Permalink to &quot;痛点及需求&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>​ 每次添加文章过程：对应的目录下添加.md文， 修改<code>themeConfig的sidebar属性</code>，给对象加上新增的文章映射</p><p>​ 添加的文章少还好，多了的话就显得很麻烦不够优雅，所有想写个脚本按照目录结构自动生产对应的映射关系。</p></div><h3 id="想法及实现" tabindex="-1">想法及实现 <a class="header-anchor" href="#想法及实现" aria-label="Permalink to &quot;想法及实现&quot;">​</a></h3><h4 id="在package-json添加脚本执行命令" tabindex="-1">在package.json添加脚本执行命令 <a class="header-anchor" href="#在package-json添加脚本执行命令" aria-label="Permalink to &quot;在package.json添加脚本执行命令&quot;">​</a></h4><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302052305259.png" alt="image-20230205230548188"></p><h4 id="在博客根目录新建scripts目录并创建文件getsidebar-ts-添加如下代码" tabindex="-1">在博客根目录新建<code>scripts</code>目录并创建文件<code>getSidebar.ts</code>，添加如下代码 <a class="header-anchor" href="#在博客根目录新建scripts目录并创建文件getsidebar-ts-添加如下代码" aria-label="Permalink to &quot;在博客根目录新建`scripts`目录并创建文件`getSidebar.ts`，添加如下代码&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/********   读取 zerdocs/docs/ 下的所有文件夹，自动生成侧边栏sidebar.ts文件   ***********/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//生成一级分组 </span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">topDirArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readdirSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isArticleDir</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#BD976A;">topDirArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">item</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">item</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebars</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepGetFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 读取 docs 目录下的所有文件夹</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarlist</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepGenerateSidebar</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebars</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//写入到docs/.vitepress/sidebar/index.ts</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//把数组里面的每个对象合并到一个对象里面</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebar</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarlist</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{})</span></span>
+<span class="line"><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">entries</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">).</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(([</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">items</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">splitPath</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">keyArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">keyArr</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">keyArr</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">].</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">collapsible</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">collapsed</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">items</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">keyArr</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">collapsible</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">collapsed</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">items</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">stringify</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//把sidebarStr写入到docs/.vitepress/sidebar/index.ts</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarPath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs/.vitepress/sidebar/index.ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//没有则创建</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">existsSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebarPath</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">mkdirSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs/.vitepress/sidebar</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">writeFileSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebarPath</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">export default </span><span style="color:#666666;">${</span><span style="color:#C98A7D;">sidebarStr</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//判断是否是文件夹</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isArticleDir</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">exclude</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">public</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">index.md</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">vite.config.ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//排除的文件夹</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">exclude</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">.</span><span style="color:#80A665;">startsWith</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">splitPath</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepGetFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">backList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">list</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readdirSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isArticleDir</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">list</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">list</span><span style="color:#666666;">[</span><span style="color:#BD976A;">index</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">statSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">).</span><span style="color:#80A665;">isDirectory</span><span style="color:#666666;">())</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">backList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">backList</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#80A665;">deepGetFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//输出相对路径</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">backList</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">backList</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 生成侧边栏</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepGenerateSidebar</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//递归按照最后一级目录生成侧边栏</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebar</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">sidebars</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">rest</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">splitPath</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">].</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//按最后一级目录分组</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">key</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pathPice</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">].</span><span style="color:#80A665;">map</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">splitPath</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//如果pathPice[pathPice.length-1]相同,则合并</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">pathPice</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pathPice</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dirStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">).</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// /problem/vueproject/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">].</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\.</span><span style="color:#C4704F;">md</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">link</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\.</span><span style="color:#C4704F;">md</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dirStr</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dirStr</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dirStr</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">link</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">link</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebarList</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pathPice</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarList</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/********   读取 zerdocs/docs/ 下的所有文件夹，自动生成侧边栏sidebar.ts文件   ***********/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//生成一级分组 </span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">topDirArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readdirSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isArticleDir</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#B07D48;">topDirArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">/</span><span style="color:#999999;">${</span><span style="color:#B56959;">item</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">`</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">/</span><span style="color:#999999;">${</span><span style="color:#B56959;">item</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">`</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebars</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepGetFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 读取 docs 目录下的所有文件夹</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarlist</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepGenerateSidebar</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebars</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//写入到docs/.vitepress/sidebar/index.ts</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//把数组里面的每个对象合并到一个对象里面</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebar</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarlist</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#999999;">{})</span></span>
+<span class="line"><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">entries</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">).</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(([</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">items</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">splitPath</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">keyArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">/</span><span style="color:#999999;">${</span><span style="color:#B56959;">keyArr</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">`</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">/</span><span style="color:#999999;">${</span><span style="color:#B56959;">keyArr</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">`</span><span style="color:#999999;">].</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">collapsible</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">collapsed</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">items</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">`</span><span style="color:#B56959;">/</span><span style="color:#999999;">${</span><span style="color:#B56959;">keyArr</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">`</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">collapsible</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">collapsed</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">items</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">stringify</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//把sidebarStr写入到docs/.vitepress/sidebar/index.ts</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarPath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs/.vitepress/sidebar/index.ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//没有则创建</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">existsSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebarPath</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">mkdirSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs/.vitepress/sidebar</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">writeFileSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebarPath</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">export default </span><span style="color:#999999;">${</span><span style="color:#B56959;">sidebarStr</span><span style="color:#999999;">}</span><span style="color:#B5695999;">`</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//判断是否是文件夹</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isArticleDir</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">exclude</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">public</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">index.md</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">vite.config.ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//排除的文件夹</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">exclude</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">.</span><span style="color:#59873A;">startsWith</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">splitPath</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepGetFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">backList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">list</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readdirSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isArticleDir</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">list</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">list</span><span style="color:#999999;">[</span><span style="color:#B07D48;">index</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">statSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">).</span><span style="color:#59873A;">isDirectory</span><span style="color:#999999;">())</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">backList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">backList</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#59873A;">deepGetFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//输出相对路径</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">backList</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">backList</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 生成侧边栏</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepGenerateSidebar</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//递归按照最后一级目录生成侧边栏</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebar</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">sidebars</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">rest</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">splitPath</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">].</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//按最后一级目录分组</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">key</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pathPice</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">].</span><span style="color:#59873A;">map</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">splitPath</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//如果pathPice[pathPice.length-1]相同,则合并</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">pathPice</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pathPice</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dirStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">).</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// /problem/vueproject/</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">].</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\.</span><span style="color:#AB5E3F;">md</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">link</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\.</span><span style="color:#AB5E3F;">md</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dirStr</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dirStr</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dirStr</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">link</span><span style="color:#393A34;"> </span><span style="color:#999999;">}]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">link</span><span style="color:#393A34;"> </span><span style="color:#999999;">}]</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">{})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebarList</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pathPice</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarList</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="vitepress添加本地搜索功能" tabindex="-1">VitePress添加本地搜索功能 <a class="header-anchor" href="#vitepress添加本地搜索功能" aria-label="Permalink to &quot;VitePress添加本地搜索功能&quot;">​</a></h2><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>折腾了三遍Algolia都没能添加上搜索功能，最后在找到了这个<a href="https://github.com/vuejs/vitepress/issues/670" target="_blank" rel="noreferrer">issus</a>里大佬提供的解决方案，成功添加上了本地搜索功能。</p></div><h3 id="安装插件" tabindex="-1">安装插件 <a class="header-anchor" href="#安装插件" aria-label="Permalink to &quot;安装插件&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">vitepress-plugin-search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">markdown-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">flexsearch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">i</span><span style="color:#393A34;"> </span><span style="color:#B56959;">vitepress-plugin-search</span><span style="color:#393A34;"> </span><span style="color:#B56959;">markdown-it</span><span style="color:#393A34;"> </span><span style="color:#B56959;">flexsearch</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span></span></code></pre></div><h3 id="添加和配置插件" tabindex="-1">添加和配置插件 <a class="header-anchor" href="#添加和配置插件" aria-label="Permalink to &quot;添加和配置插件&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">坑点</p><p>1.<a href="https://github.com/emersonbottero/vitepress-plugin-search#readme" target="_blank" rel="noreferrer">README</a> 没写在哪个目录下存放<code>vite.config.ts</code>，依据经验放在根目录下不管用，放在<code>.vitepress</code>也不生效，最后挨个试才发现需要放在<code>docs</code></p><p>2.示例没有引入<code>flexSearchIndexOptions</code>，需要手动从<code>flexsearch</code>中引入</p><p>3.引入后发现之前搜索框样式没了，需要在<code>.vitepress/theme/styles/index.css</code>下重新覆盖样式</p></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302052330956.png" alt="image-20230205233032922"></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//vite.config.ts</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">SearchPlugin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vitepress-plugin-search</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">defineConfig</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vite</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">flexSearchIndexOptions</span><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">flexsearch</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//default options</span></span>
+<span class="line"><span style="color:#CB7676;">var </span><span style="color:#BD976A;">options</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  ...</span><span style="color:#BD976A;">flexSearchIndexOptions</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">previewLength</span><span style="color:#666666;">: </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//搜索结果预览长度</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">buttonLabel</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">搜索</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">placeholder</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">情输入关键词</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">defineConfig</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">plugins</span><span style="color:#666666;">: [</span><span style="color:#80A665;">SearchPlugin</span><span style="color:#666666;">(</span><span style="color:#BD976A;">options</span><span style="color:#666666;">)],</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//vite.config.ts</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">SearchPlugin</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vitepress-plugin-search</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">defineConfig</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vite</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">flexSearchIndexOptions</span><span style="color:#393A34;">   </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">flexsearch</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//default options</span></span>
+<span class="line"><span style="color:#AB5959;">var </span><span style="color:#B07D48;">options</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  ...</span><span style="color:#B07D48;">flexSearchIndexOptions</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">previewLength</span><span style="color:#999999;">: </span><span style="color:#2F798A;">100</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//搜索结果预览长度</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">buttonLabel</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">搜索</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">placeholder</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">情输入关键词</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#59873A;">defineConfig</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">plugins</span><span style="color:#999999;">: [</span><span style="color:#59873A;">SearchPlugin</span><span style="color:#999999;">(</span><span style="color:#B07D48;">options</span><span style="color:#999999;">)],</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h3 id="样式覆盖" tabindex="-1">样式覆盖 <a class="header-anchor" href="#样式覆盖" aria-label="Permalink to &quot;样式覆盖&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">DocSearch-Button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-items</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">32</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">32</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">transition</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> border-color </span><span style="color:#4C9A91;">0.25</span><span style="color:#CB7676;">s</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">media</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#B8A965;">min-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">768</span><span style="color:#CB7676;">px</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">DocSearch-Button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex-start</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">12</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">40</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">var</span><span style="color:#666666;">(</span><span style="color:#BD976A;">--vp-c-bg-alt</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">media</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#B8A965;">max-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">768</span><span style="color:#CB7676;">px</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">DocSearch-Button-Keys</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">VPNavBarHamburger</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">32</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">!important</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">32</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">!important</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">DocSearch-Button</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-items</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">32</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">32</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">transition</span><span style="color:#999999;">:</span><span style="color:#393A34;"> border-color </span><span style="color:#2F798A;">0.25</span><span style="color:#AB5959;">s</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">media</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#998418;">min-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">768</span><span style="color:#AB5959;">px</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">DocSearch-Button</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex-start</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">12</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">40</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">var</span><span style="color:#999999;">(</span><span style="color:#B07D48;">--vp-c-bg-alt</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">media</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#998418;">max-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">768</span><span style="color:#AB5959;">px</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">DocSearch-Button-Keys</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">VPNavBarHamburger</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">32</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">!important</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">32</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">!important</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Problem/VitePress/VitePress踩坑记录.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>Nuxt3项目踩坑</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>VuePress踩坑记录</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.html" "b/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.html"
new file mode 100644
index 00000000..5f8637c6
--- /dev/null
+++ "b/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.html"
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>VuePress踩坑记录 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Problem_VitePress_VuePress踩坑记录.md.d7553dcf.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Graphical</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv代码片段集锦</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv使用总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Echarts问题总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Nuxt3</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nuxt3项目踩坑</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VitePress</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VitePress踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VuePress踩坑记录</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VueProject</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue项目踩坑一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Problem_VitePress_VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-6b87e69f><div><h1 id="vuepress踩坑记录" tabindex="-1">VuePress踩坑记录 <a class="header-anchor" href="#vuepress踩坑记录" aria-label="Permalink to &quot;VuePress踩坑记录&quot;">​</a></h1><h2 id="坑点一、自定义目录不能根据视口固定" tabindex="-1">坑点一、自定义目录不能根据视口固定 <a class="header-anchor" href="#坑点一、自定义目录不能根据视口固定" aria-label="Permalink to &quot;坑点一、自定义目录不能根据视口固定&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">巨坑</p><p>找了好多博客参考，没发现有相关的问题，挠破头皮都没想明白啥原因，还好碰到一篇博客解决了疑惑</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>参考博客：<a href="https://www.jianshu.com/p/238ccd35fa6d?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" target="_blank" rel="noreferrer">position: fixed; 不相对于屏幕视口定位</a></p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><strong>产生原因</strong>：当一个元素position特性值设置为fixed时，如果该元素的先祖容器中存在transform特性值为非none的元素，则</p><p><code>position: fixed; </code>将相对于该先祖容器定位！！！ 最后发现祖先元素有<code>transform: translateY(0px);</code>这行代码在作怪!!</p></div><p><strong>解决方法</strong>：自定义样式覆盖就好啦</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">page</span><span style="color:#CB7676;">&gt;</span><span style="color:#4D9375;">section</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#4D9375;">!important</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">page</span><span style="color:#AB5959;">&gt;</span><span style="color:#1E754F;">section</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#1E754F;">!important</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="坑点二、引用的gitee图床图片没显示" tabindex="-1">坑点二、引用的Gitee图床图片没显示 <a class="header-anchor" href="#坑点二、引用的gitee图床图片没显示" aria-label="Permalink to &quot;坑点二、引用的Gitee图床图片没显示&quot;">​</a></h2><blockquote><p>有人说是图床的问题、防盗链的问题，最后才发现自己把图床项目设为私有的项目了，重新设为开源成功解决</p></blockquote><h2 id="坑点三、hexo博客源码没有备份-误点vscode放弃所有更改并且回退版本" tabindex="-1">坑点三、Hexo博客源码没有备份，误点VsCode<code>放弃所有更改并且回退版本</code> <a class="header-anchor" href="#坑点三、hexo博客源码没有备份-误点vscode放弃所有更改并且回退版本" aria-label="Permalink to &quot;坑点三、Hexo博客源码没有备份，误点VsCode`放弃所有更改并且回退版本`&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">天坑</p><p>因学习配置博客用git action来自动化部署，配置完后发现打包报错，搞了好久没办法解决。 本来想执行<code>git checkout .</code>，看到VsCode有个快捷按钮，由于之前没有备份博客源码，点了一下直接回到解放前！</p></div><div class="tip custom-block"><p class="custom-block-title">领悟</p><p>来到了新的阵地VuePress折腾，学到了码农必备技能------备份</p></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Problem/VitePress/VuePress踩坑记录.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>VitePress踩坑记录</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Vue项目踩坑一</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.html" "b/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.html"
new file mode 100644
index 00000000..bed0c96e
--- /dev/null
+++ "b/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.html"
@@ -0,0 +1,435 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Vue项目踩坑一 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Problem_VueProject_Vue项目踩坑一.md.5d32b46a.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Graphical</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv代码片段集锦</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv使用总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Echarts问题总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Nuxt3</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nuxt3项目踩坑</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VitePress</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VitePress踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VuePress踩坑记录</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VueProject</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue项目踩坑一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Problem_VueProject_Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-6b87e69f><div><h1 id="vue项目踩坑一" tabindex="-1">Vue项目踩坑一 <a class="header-anchor" href="#vue项目踩坑一" aria-label="Permalink to &quot;Vue项目踩坑一&quot;">​</a></h1><h2 id="webpack-bundle-analyzer插件" tabindex="-1"><a href="https://github.com/webpack-contrib/webpack-bundle-analyzer" target="_blank" rel="noreferrer">webpack-bundle-analyzer</a>插件 <a class="header-anchor" href="#webpack-bundle-analyzer插件" aria-label="Permalink to &quot;[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)插件&quot;">​</a></h2><p>安装后使用完把<code>--report</code>参数去掉，还是会给你生成打包文件，并会提示8888端口被占用，</p><p>需要在<code>vue.config.js</code>注释插件的使用，才能不被影响</p><h2 id="点击弹窗父子传值成功-但是数据没有展示" tabindex="-1">点击弹窗父子传值成功，但是数据没有展示 <a class="header-anchor" href="#点击弹窗父子传值成功-但是数据没有展示" aria-label="Permalink to &quot;点击弹窗父子传值成功，但是数据没有展示&quot;">​</a></h2><blockquote><p>恰巧性能优化，后端改动了大量的关联关系，刚开始以为后端改动数据层级嵌套太深vue丢失了响应式的原因，</p><p>最后才发现是前端element-ui<strong>全局引入</strong>改为<strong>按需引入</strong>, <code>DescriptionsItem </code>组件漏写了(没有警告、报错提示，巨坑)</p></blockquote><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-dialog</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">:title</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">title</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">:visible</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">visible</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">:before-close</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">close</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">:close-on-click-modal</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">false</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-descriptions</span><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;font-style:italic;">border</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">&lt;!--在main.js漏了导入并使用DescriptionsItem--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-descriptions-item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">label</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ID</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{accountInfo.id}} </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-descriptions-item</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-descriptions-item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">label</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{accountInfo.name}} </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-descriptions-item</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-descriptions</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-dialog</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-dialog</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">:title</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">title</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">:visible</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">visible</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">:before-close</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">close</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">:close-on-click-modal</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">false</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-descriptions</span><span style="color:#393A34;">   </span><span style="color:#B07D48;font-style:italic;">border</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">&lt;!--在main.js漏了导入并使用DescriptionsItem--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-descriptions-item</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">label</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ID</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{accountInfo.id}} </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-descriptions-item</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-descriptions-item</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">label</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{accountInfo.name}} </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-descriptions-item</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-descriptions</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-dialog</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="确定-按钮点击失效问题" tabindex="-1">&#39;确定&#39;按钮点击失效问题 <a class="header-anchor" href="#确定-按钮点击失效问题" aria-label="Permalink to &quot;&#39;确定&#39;按钮点击失效问题&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192142529.png" alt="image-20230219214203987"></p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text-update-wrap</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text-show</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">v-if</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">!isEditing</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">single-overflow text-val</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">:style</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{ &#39;max-width&#39;: maxWidth }</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">:title</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">{{ text }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">span</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">el-icon-edit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">@click</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">switchToEdit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text-edit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">v-else</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-input</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">v-model</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputVal</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">ref</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputRef</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">:placeholder</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&#39;请输入&#39; + name</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">size</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">mini</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">clearable</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">el-input</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#758575DD;">&lt;!-- @blur=&#39;cancelUpdate&#39; 事件比confirmUpdate先执行，导致确定按钮事件没触发--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">title</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">确定</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">:class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">loading ? &#39;el-icon-loading&#39; : &#39;el-icon-circle-check&#39;</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">@click</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">confirmUpdate</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">title</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">取消</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">el-icon-circle-close</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">@click</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cancelEdit</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">v-if</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">!loading</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">UpdateText</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">props</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">textVal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">名称</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">maxWidth</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">200px</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">data</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">loading</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">isEditing</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">inputVal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">textVal</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">computed</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">watch</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">components</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">methods</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//切换到输入框模式</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">switchToEdit</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inputVal</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">textVal</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEditing</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$nextTick</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$refs</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inputRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">focus</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">cancelEdit</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEditing</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//确定更新</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	   </span><span style="color:#80A665;">confirmUpdate</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inputVal</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">id</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inputVal</span><span style="color:#666666;">.</span><span style="color:#80A665;">trim</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$message</span><span style="color:#666666;">.</span><span style="color:#80A665;">error</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">不能为空</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#4D9375;">return</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">textVal</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEditing</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#4D9375;">return</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">loading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">id</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">confirm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">confirm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">successUpdate</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inputVal</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">loading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inputVal</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEditing</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$notify</span><span style="color:#666666;">.</span><span style="color:#80A665;">success</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">修改成功</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//失败</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">failUpdate</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">loading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$notify</span><span style="color:#666666;">.</span><span style="color:#80A665;">error</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">修改失败</span><span style="color:#C98A7D99;">`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">created</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//解决方案：不使用@blur, 监听焦点不在此组件时，才取消编辑</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">click</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$el</span><span style="color:#666666;">.</span><span style="color:#80A665;">contains</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">cancelEdit</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text-update-wrap</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text-show</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">v-if</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">!isEditing</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">single-overflow text-val</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">:style</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{ &#39;max-width&#39;: maxWidth }</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">:title</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">{{ text }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">span</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">el-icon-edit</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">@click</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">switchToEdit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text-edit</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">v-else</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-input</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">v-model</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputVal</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">ref</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputRef</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">:placeholder</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&#39;请输入&#39; + name</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">size</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">mini</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">clearable</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">el-input</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#A0ADA0;">&lt;!-- @blur=&#39;cancelUpdate&#39; 事件比confirmUpdate先执行，导致确定按钮事件没触发--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">title</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">确定</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">:class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">loading ? &#39;el-icon-loading&#39; : &#39;el-icon-circle-check&#39;</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">@click</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">confirmUpdate</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">title</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">取消</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">el-icon-circle-close</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">@click</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cancelEdit</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">v-if</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">!loading</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">UpdateText</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">props</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">textVal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">名称</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">maxWidth</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">200px</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">data</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">loading</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">isEditing</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">inputVal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">textVal</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">computed</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">watch</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">components</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">methods</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//切换到输入框模式</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">switchToEdit</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inputVal</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">textVal</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEditing</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$nextTick</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$refs</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inputRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">focus</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">cancelEdit</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEditing</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//确定更新</span></span>
+<span class="line"><span style="color:#393A34;">	   </span><span style="color:#59873A;">confirmUpdate</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inputVal</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">id</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inputVal</span><span style="color:#999999;">.</span><span style="color:#59873A;">trim</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$message</span><span style="color:#999999;">.</span><span style="color:#59873A;">error</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#999999;">${</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">不能为空</span><span style="color:#B5695999;">`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#1E754F;">return</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">textVal</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEditing</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#1E754F;">return</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">loading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">id</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">confirm</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">confirm</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">successUpdate</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inputVal</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">loading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inputVal</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEditing</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$notify</span><span style="color:#999999;">.</span><span style="color:#59873A;">success</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#999999;">${</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">修改成功</span><span style="color:#B5695999;">`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//失败</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">failUpdate</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">loading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$notify</span><span style="color:#999999;">.</span><span style="color:#59873A;">error</span><span style="color:#999999;">(</span><span style="color:#B5695999;">`</span><span style="color:#999999;">${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">修改失败</span><span style="color:#B5695999;">`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">created</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//解决方案：不使用@blur, 监听焦点不在此组件时，才取消编辑</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">click</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$el</span><span style="color:#999999;">.</span><span style="color:#59873A;">contains</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">cancelEdit</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="文本溢出隐藏处理后对不齐问题" tabindex="-1">文本溢出隐藏处理后对不齐问题 <a class="header-anchor" href="#文本溢出隐藏处理后对不齐问题" aria-label="Permalink to &quot;文本溢出隐藏处理后对不齐问题&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192142738.png" alt="image-20230219214258711"></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">el-checkbox</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">:v-deep .el-checkbox__label {</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    width: </span><span style="color:#4C9A91;">186</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">vertical-align</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">middle</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> //需要重新设置对齐线</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text-overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">ellipsis</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">white-space</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">nowrap</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">el-checkbox</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">:</span><span style="color:#393A34;">:v-deep .el-checkbox__label {</span></span>
+<span class="line"><span style="color:#393A34;">    width: </span><span style="color:#2F798A;">186</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">vertical-align</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">middle</span><span style="color:#999999;">;</span><span style="color:#393A34;"> //需要重新设置对齐线</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text-overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">ellipsis</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">white-space</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">nowrap</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><h2 id="路由组件切换-事件总线意外多次触发" tabindex="-1">路由组件切换，事件总线意外多次触发 <a class="header-anchor" href="#路由组件切换-事件总线意外多次触发" aria-label="Permalink to &quot;路由组件切换，事件总线意外多次触发&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//A路由组件</span></span>
+<span class="line"><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$bus</span><span style="color:#666666;">.</span><span style="color:#80A665;">$emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">searchDone</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//A路由组件</span></span>
+<span class="line"><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$bus</span><span style="color:#999999;">.</span><span style="color:#59873A;">$emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">searchDone</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//B路由组件</span></span>
+<span class="line"><span style="color:#80A665;">mounted</span><span style="color:#666666;">(){</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$bus</span><span style="color:#666666;">.</span><span style="color:#80A665;">$off</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">searchDone</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//在每次绑定事件前，先解绑该事件</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$bus</span><span style="color:#666666;">.</span><span style="color:#80A665;">$on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">searchDone</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">handleCurrentChange</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//B路由组件</span></span>
+<span class="line"><span style="color:#59873A;">mounted</span><span style="color:#999999;">(){</span></span>
+<span class="line highlighted"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$bus</span><span style="color:#999999;">.</span><span style="color:#59873A;">$off</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">searchDone</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//在每次绑定事件前，先解绑该事件</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$bus</span><span style="color:#999999;">.</span><span style="color:#59873A;">$on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">searchDone</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">handleCurrentChange</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span></code></pre></div><h2 id="前端配合-nginx-服务开启-gzip-页面加载不出来" tabindex="-1">前端配合 Nginx 服务开启 gzip 页面加载不出来 <a class="header-anchor" href="#前端配合-nginx-服务开启-gzip-页面加载不出来" aria-label="Permalink to &quot;前端配合 Nginx 服务开启 gzip 页面加载不出来&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//vue.config.js</span></span>
+<span class="line"><span style="color:#80A665;">plugins</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">CompressionWebpackPlugin</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">exclude</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">node_modules</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">test</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\.</span><span style="color:#666666;">(</span><span style="color:#C4704F;">js</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">css</span><span style="color:#666666;">)</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">threshold</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10240</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 超过10kb的文件就压缩</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">deleteOriginalAssets</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 不删除源文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">algorithm</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">gzip</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">minRatio</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.8</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#666666;">],</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//vue.config.js</span></span>
+<span class="line"><span style="color:#59873A;">plugins</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">CompressionWebpackPlugin</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">exclude</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">node_modules</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">test</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\.</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">js</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">css</span><span style="color:#999999;">)</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">threshold</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10240</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 超过10kb的文件就压缩</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">deleteOriginalAssets</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 不删除源文件</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">algorithm</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">gzip</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">minRatio</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.8</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#999999;">],</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-03-30-14-58-50.png" alt="2023-03-30-14-58-50"></p><h2 id="tailwindcss动态绑定类不能随着渐变" tabindex="-1">TailwindCSS动态绑定类不能随着渐变 <a class="header-anchor" href="#tailwindcss动态绑定类不能随着渐变" aria-label="Permalink to &quot;TailwindCSS动态绑定类不能随着渐变&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">header</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">:class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">headerBg</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">header</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onMounted</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vue</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//通过判断滚动的距离，来决定header 背景色的变化</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">headerBg</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">ref</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">bg-zinc-900/[.00]</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">handleScroll</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">scrollHeight</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">documentElement</span><span style="color:#666666;">.</span><span style="color:#BD976A;">scrollTop</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">if</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">scrollHeight</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    let </span><span style="color:#BD976A;">opacity</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">scrollHeight</span><span style="color:#CB7676;"> / </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">).</span><span style="color:#80A665;">toFixed</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">).</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">headerBg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">bg-zinc-900/[</span><span style="color:#666666;">${</span><span style="color:#C98A7D;">opacity</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">]</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">else</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">headerBg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C98A7D99;">`</span><span style="color:#C98A7D;">bg-zinc-900/[1]</span><span style="color:#C98A7D99;">`</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">scroll</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">handleScroll</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">header</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">:class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">headerBg</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">header</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onMounted</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vue</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//通过判断滚动的距离，来决定header 背景色的变化</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">headerBg</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">ref</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">bg-zinc-900/[.00]</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">handleScroll</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">scrollHeight</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">documentElement</span><span style="color:#999999;">.</span><span style="color:#B07D48;">scrollTop</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">if</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">scrollHeight</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">100</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    let </span><span style="color:#B07D48;">opacity</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">scrollHeight</span><span style="color:#AB5959;"> / </span><span style="color:#2F798A;">100</span><span style="color:#999999;">).</span><span style="color:#59873A;">toFixed</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">).</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">headerBg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">bg-zinc-900/[</span><span style="color:#999999;">${</span><span style="color:#B56959;">opacity</span><span style="color:#999999;">}</span><span style="color:#B56959;">]</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">else</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">headerBg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B5695999;">`</span><span style="color:#B56959;">bg-zinc-900/[1]</span><span style="color:#B5695999;">`</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">scroll</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">handleScroll</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="监听非-window-resize-事件不生效问题" tabindex="-1">监听非 <code>window</code> resize 事件不生效问题 <a class="header-anchor" href="#监听非-window-resize-事件不生效问题" aria-label="Permalink to &quot;监听非 `window` resize 事件不生效问题&quot;">​</a></h2><p>不会生效原因： div 元素默认不会触发 resize 事件。在 window 对象上，浏览器会自动跟踪窗口的大小变化并触发 resize 事件，但在其他元素上，您需要自己编写代码来检测大小变化。可以使用 MutationObserver 或者 ResizeObserver 来监听元素大小变化。以下是使用 ResizeObserver 的示例代码：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$refs</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagBoxRef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$refs</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagBoxRef</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">resizeHandler</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 创建 ResizeObserver 实例</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListResizeObserver</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">ResizeObserver</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">resizeHandler</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 监听 tagListRef 元素的大小变化</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListResizeObserver</span><span style="color:#666666;">.</span><span style="color:#80A665;">observe</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">wheel</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">handleScroll</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#80A665;">beforeUnmount</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 在组件卸载前，停止 ResizeObserver 实例</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListResizeObserver</span><span style="color:#666666;">.</span><span style="color:#80A665;">disconnect</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#80A665;">methods</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">handleScroll</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#80A665;">preventDefault</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">scrollLeft</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">deltaY</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">scrollHandler</span><span style="color:#666666;">(</span><span style="color:#BD976A;">direction</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">scrollLeft</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">direction</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListWidth</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">resizeHandler</span><span style="color:#666666;">(</span><span style="color:#BD976A;">entries</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// entries 是 ResizeObserver 的回调参数，包含被观察的元素的信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">clientWidth</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagBoxWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagBoxRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">clientWidth</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$refs</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagBoxRef</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$refs</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagBoxRef</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">resizeHandler</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 创建 ResizeObserver 实例</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListResizeObserver</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">ResizeObserver</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">resizeHandler</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 监听 tagListRef 元素的大小变化</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListResizeObserver</span><span style="color:#999999;">.</span><span style="color:#59873A;">observe</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">wheel</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">handleScroll</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#59873A;">beforeUnmount</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 在组件卸载前，停止 ResizeObserver 实例</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListResizeObserver</span><span style="color:#999999;">.</span><span style="color:#59873A;">disconnect</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#59873A;">methods</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">handleScroll</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#59873A;">preventDefault</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">scrollLeft</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">deltaY</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">scrollHandler</span><span style="color:#999999;">(</span><span style="color:#B07D48;">direction</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">scrollLeft</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">direction</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListWidth</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">resizeHandler</span><span style="color:#999999;">(</span><span style="color:#B07D48;">entries</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// entries 是 ResizeObserver 的回调参数，包含被观察的元素的信息</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">clientWidth</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagBoxWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagBoxRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">clientWidth</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Problem/VueProject/Vue项目踩坑一.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-ef5dee53><span class="desc" data-v-ef5dee53>上一页</span><span class="title" data-v-ef5dee53>VuePress踩坑记录</span></a></div><div class="pager" data-v-ef5dee53><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/Problem/index.html b/Problem/index.html
new file mode 100644
index 00000000..c223c108
--- /dev/null
+++ b/Problem/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>编程踩坑积累与总结 | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/Problem_index.md.724652c6.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>目录</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Graphical</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv代码片段集锦</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Antv使用总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Echarts问题总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Nuxt3</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Nuxt3项目踩坑</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VitePress</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VitePress踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>VuePress踩坑记录</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>VueProject</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/zerdocs/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Vue项目踩坑一</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>文章目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _zerdocs_Problem_" data-v-6b87e69f><div><h1 id="编程踩坑积累与总结" tabindex="-1">编程踩坑积累与总结 <a class="header-anchor" href="#编程踩坑积累与总结" aria-label="Permalink to &quot;编程踩坑积累与总结&quot;">​</a></h1><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>这里主要记录编程遇到的问题，已经解决方案，以便以后回顾或找到更优解!</p></div></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/fxzer/zerdocs/edit/master/docs/Problem/index.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><!----></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/zerdocs/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6" data-v-ef5dee53><span class="desc" data-v-ef5dee53>下一页</span><span class="title" data-v-ef5dee53>Antv代码片段集锦</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git "a/assets/BackEnd_NodeJS_MongoDB\347\254\224\350\256\260.md.eb6021c2.js" "b/assets/BackEnd_NodeJS_MongoDB\347\254\224\350\256\260.md.eb6021c2.js"
new file mode 100644
index 00000000..b6ec4258
--- /dev/null
+++ "b/assets/BackEnd_NodeJS_MongoDB\347\254\224\350\256\260.md.eb6021c2.js"
@@ -0,0 +1,455 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/NodeJS/MongoDB笔记.md","filePath":"BackEnd/NodeJS/MongoDB笔记.md"}'),p={name:"BackEnd/NodeJS/MongoDB笔记.md"},o=l(`<h2 id="一、相关概念" tabindex="-1">一、相关概念 <a class="header-anchor" href="#一、相关概念" aria-label="Permalink to &quot;一、相关概念&quot;">​</a></h2><p><strong>MongoDB是文档型的NoSQL数据库</strong>。</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220508194905648.png" alt="image-20220508194905648"></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507220553150.png" alt="image-20220507220553150"></p><p><strong>优点</strong>：</p><ol><li><p>高性能</p></li><li><p>高可用性</p></li><li><p>可扩展分片集群</p></li></ol><p><strong>应用场景</strong>：（数据量大、读写操作频繁、对事务要求不高）</p><h2 id="二、数据库操作" tabindex="-1">二、数据库操作 <a class="header-anchor" href="#二、数据库操作" aria-label="Permalink to &quot;二、数据库操作&quot;">​</a></h2><p><strong>查看所有数据库</strong></p><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">show</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">databases</span></span>
+<span class="line"><span style="color:#80A665;">show</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">dbs</span></span>
+<span class="line"><span style="color:#758575DD;">#连接数据库后默认在test库</span></span>
+<span class="line"><span style="color:#80A665;">use</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">testdb01</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#切换数据库</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">show</span><span style="color:#393A34;"> </span><span style="color:#B56959;">databases</span></span>
+<span class="line"><span style="color:#59873A;">show</span><span style="color:#393A34;"> </span><span style="color:#B56959;">dbs</span></span>
+<span class="line"><span style="color:#A0ADA0;">#连接数据库后默认在test库</span></span>
+<span class="line"><span style="color:#59873A;">use</span><span style="color:#393A34;"> </span><span style="color:#B56959;">testdb01</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#切换数据库</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507215028603.png" alt="image-20220507215028603"></p><p><strong>创建/删除数据库</strong></p><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">use</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">数据库名</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;"># use testdb01</span></span>
+<span class="line"><span style="color:#80A665;">db</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#查看所在数据库</span></span>
+<span class="line"><span style="color:#80A665;">db.dropDatabase</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> 	#删除当前所在库</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">use</span><span style="color:#393A34;"> </span><span style="color:#B56959;">数据库名</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;"># use testdb01</span></span>
+<span class="line"><span style="color:#59873A;">db</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#查看所在数据库</span></span>
+<span class="line"><span style="color:#59873A;">db.dropDatabase</span><span style="color:#999999;">()</span><span style="color:#393A34;"> 	#删除当前所在库</span></span></code></pre></div><h2 id="三、集合相关操作" tabindex="-1">三、集合相关操作 <a class="header-anchor" href="#三、集合相关操作" aria-label="Permalink to &quot;三、集合相关操作&quot;">​</a></h2><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">show</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">collections</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;"># 查看数据库集合	show tables;</span></span>
+<span class="line"><span style="color:#80A665;">db.createCollection(</span><span style="color:#80A665;">&#39;collectionName&#39;</span><span style="color:#80A665;">,[option]</span><span style="color:#DBD7CAEE;">)</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">	 </span><span style="color:#758575DD;">#显式创建集合</span></span>
+<span class="line"><span style="color:#80A665;">db.users.insert(</span><span style="color:#DBD7CAEE;">{&#39;</span><span style="color:#80A665;">name</span><span style="color:#80A665;">&#39;:&#39;</span><span style="color:#80A665;">李四</span><span style="color:#80A665;">&#39;}); 	#隐式创建集合 往不存在的集合插入数据</span></span>
+<span class="line"><span style="color:#80A665;">db.users.drop(); 	#删除集合</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">show</span><span style="color:#393A34;"> </span><span style="color:#B56959;">collections</span><span style="color:#999999;">;</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;"># 查看数据库集合	show tables;</span></span>
+<span class="line"><span style="color:#59873A;">db.createCollection(</span><span style="color:#59873A;">&#39;collectionName&#39;</span><span style="color:#59873A;">,[option]</span><span style="color:#393A34;">)</span><span style="color:#999999;">;</span><span style="color:#393A34;">	 </span><span style="color:#A0ADA0;">#显式创建集合</span></span>
+<span class="line"><span style="color:#59873A;">db.users.insert(</span><span style="color:#393A34;">{&#39;</span><span style="color:#59873A;">name</span><span style="color:#59873A;">&#39;:&#39;</span><span style="color:#59873A;">李四</span><span style="color:#59873A;">&#39;}); 	#隐式创建集合 往不存在的集合插入数据</span></span>
+<span class="line"><span style="color:#59873A;">db.users.drop(); 	#删除集合</span></span></code></pre></div><h2 id="四、文档相关操作" tabindex="-1">四、文档相关操作 <a class="header-anchor" href="#四、文档相关操作" aria-label="Permalink to &quot;四、文档相关操作&quot;">​</a></h2><h3 id="_1-查询" tabindex="-1">1.查询 <a class="header-anchor" href="#_1-查询" aria-label="Permalink to &quot;1.查询&quot;">​</a></h3><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> 	#查询所有 SELECT * from users  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">db.getCollection</span><span style="color:#666666;">(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#666666;">)</span><span style="color:#80A665;">.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">	#查询所有</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">db.getCollection</span><span style="color:#666666;">(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#666666;">)</span><span style="color:#80A665;">.findOne</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">	#查询第一个</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">db.getCollection</span><span style="color:#666666;">(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">.findOne</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{name:&#39;zhang3&#39;})		#查询符合条件的第一个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#SELECT _id,name,age from users </span></span>
+<span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">name:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">_id:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> ) 	</span><span style="color:#758575DD;">#去除id字段</span></span>
+<span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> ) 	</span><span style="color:#758575DD;">#去除特定字段</span></span>
+<span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#80A665;">.pretty</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> 	#格式化查询</span><span style="color:#666666;">(</span><span style="color:#80A665;">适用于长/复杂数据</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#393A34;"> 	#查询所有 SELECT * from users  </span></span>
+<span class="line"><span style="color:#393A34;">db.getCollection</span><span style="color:#999999;">(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#999999;">)</span><span style="color:#59873A;">.find</span><span style="color:#999999;">()</span><span style="color:#393A34;">	#查询所有</span></span>
+<span class="line"><span style="color:#393A34;">db.getCollection</span><span style="color:#999999;">(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#999999;">)</span><span style="color:#59873A;">.findOne</span><span style="color:#999999;">()</span><span style="color:#393A34;">	#查询第一个</span></span>
+<span class="line"><span style="color:#393A34;">db.getCollection</span><span style="color:#999999;">(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">.findOne</span><span style="color:#999999;">(</span><span style="color:#393A34;">{name:&#39;zhang3&#39;})		#查询符合条件的第一个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#SELECT _id,name,age from users </span></span>
+<span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;">  </span><span style="color:#B56959;">name:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">_id:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> ) 	</span><span style="color:#A0ADA0;">#去除id字段</span></span>
+<span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> ) 	</span><span style="color:#A0ADA0;">#去除特定字段</span></span>
+<span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#59873A;">.pretty</span><span style="color:#999999;">()</span><span style="color:#393A34;"> 	#格式化查询</span><span style="color:#999999;">(</span><span style="color:#59873A;">适用于长/复杂数据</span><span style="color:#999999;">)</span></span></code></pre></div><ul><li><strong>等值查询</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:18}</span><span style="color:#DBD7CAEE;"> )</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE age = 18</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:18}</span><span style="color:#393A34;"> )</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE age = 18</span></span></code></pre></div><ul><li><strong>AND条件</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$lt</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">,sex:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">男</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">,}</span><span style="color:#DBD7CAEE;"> )</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE sex = &quot;男&quot; AND age &lt; 30</span></span>
+<span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:24,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$lt</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> )  </span><span style="color:#758575DD;">#相同字段and查询中出现多次,以最后一个为查询条件</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE age &lt; 30</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$lt</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">,sex:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">男</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">,}</span><span style="color:#393A34;"> )</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE sex = &quot;男&quot; AND age &lt; 30</span></span>
+<span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:24,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$lt</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> )  </span><span style="color:#A0ADA0;">#相同字段and查询中出现多次,以最后一个为查询条件</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE age &lt; 30</span></span></code></pre></div><ul><li><strong>OR条件</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$or</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> [{</span><span style="color:#80A665;">sex:</span><span style="color:#80A665;">&#39;男&#39;</span><span style="color:#80A665;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$lt</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> )</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE sex = &quot;男&quot; OR age &lt; 30</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$or</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> [{</span><span style="color:#59873A;">sex:</span><span style="color:#59873A;">&#39;男&#39;</span><span style="color:#59873A;">},</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$lt</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">]</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> )</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE sex = &quot;男&quot; OR age &lt; 30</span></span></code></pre></div><ul><li><strong>同时使用AND和OR条件</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">like:</span><span style="color:#80A665;">&#39;美女&#39;</span><span style="color:#80A665;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">$or</span><span style="color:#DBD7CAEE;">: [{</span><span style="color:#80A665;">sex:</span><span style="color:#80A665;">&#39;男&#39;</span><span style="color:#80A665;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$lt</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">},{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/^p/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">]</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> )</span></span>
+<span class="line"><span style="color:#758575DD;">#	WHERE like = &quot;美女&quot; AND (sex = &quot;男&quot; OR age &lt; 30 OR name LIKE &quot;%p%&quot;)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#59873A;">like:</span><span style="color:#59873A;">&#39;美女&#39;</span><span style="color:#59873A;">},</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">$or</span><span style="color:#393A34;">: [{</span><span style="color:#59873A;">sex:</span><span style="color:#59873A;">&#39;男&#39;</span><span style="color:#59873A;">},</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$lt</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">},{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/^p/</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">]</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span><span style="color:#393A34;"> )</span></span>
+<span class="line"><span style="color:#A0ADA0;">#	WHERE like = &quot;美女&quot; AND (sex = &quot;男&quot; OR age &lt; 30 OR name LIKE &quot;%p%&quot;)</span></span></code></pre></div><ul><li><strong>查询条件中使用查询操作符</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">age:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$in</span><span style="color:#C98A7D;">:</span><span style="color:#DBD7CAEE;"> [ </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">20</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">22</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">}</span><span style="color:#DBD7CAEE;"> )</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">age:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$in</span><span style="color:#B56959;">:</span><span style="color:#393A34;"> [ </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">20</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">22</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B56959;">]</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> </span><span style="color:#B56959;">}</span><span style="color:#393A34;"> )</span></span></code></pre></div><ul><li><strong>模糊查询</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name:/张/}</span><span style="color:#DBD7CAEE;"> ) </span><span style="color:#758575DD;">#查询名字中含有&#39;张&#39;的所有</span></span>
+<span class="line"><span style="color:#758575DD;"># WHERE name LIKE &quot;%张%</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(</span><span style="color:#393A34;"> </span><span style="color:#B56959;">{</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name:/张/}</span><span style="color:#393A34;"> ) </span><span style="color:#A0ADA0;">#查询名字中含有&#39;张&#39;的所有</span></span>
+<span class="line"><span style="color:#A0ADA0;"># WHERE name LIKE &quot;%张%</span></span></code></pre></div><ul><li><strong>数组中的查询</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find(likes:</span><span style="color:#DBD7CAEE;">{</span><span style="color:#BD976A;">$size</span><span style="color:#DBD7CAEE;">:3})	</span><span style="color:#758575DD;">#查询&#39;喜好&#39;数组大小为3</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find(likes:</span><span style="color:#393A34;">{</span><span style="color:#B07D48;">$size</span><span style="color:#393A34;">:3})	</span><span style="color:#A0ADA0;">#查询&#39;喜好&#39;数组大小为3</span></span></code></pre></div><ul><li><strong>排序</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">.sort</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{age:-1}) # 1 升序 	-1 降序 (没有这个字段的数据排在前面)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#393A34;">.sort</span><span style="color:#999999;">(</span><span style="color:#393A34;">{age:-1}) # 1 升序 	-1 降序 (没有这个字段的数据排在前面)</span></span></code></pre></div><ul><li><strong>分页</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">.skip</span><span style="color:#666666;">(</span><span style="color:#80A665;">40</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">.limit</span><span style="color:#666666;">(</span><span style="color:#80A665;">30</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;"># 跳过40条数据查30条数据 (起始0,则从40开始)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#393A34;">.skip</span><span style="color:#999999;">(</span><span style="color:#59873A;">40</span><span style="color:#999999;">)</span><span style="color:#393A34;">.limit</span><span style="color:#999999;">(</span><span style="color:#59873A;">30</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;"># 跳过40条数据查30条数据 (起始0,则从40开始)</span></span></code></pre></div><ul><li><strong>条数</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#80A665;">.count</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#59873A;">.count</span><span style="color:#999999;">()</span></span></code></pre></div><ul><li><strong>去重</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.find</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">.distinct</span><span style="color:#666666;">(</span><span style="color:#80A665;">&#39;字段&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.find</span><span style="color:#999999;">()</span><span style="color:#393A34;">.distinct</span><span style="color:#999999;">(</span><span style="color:#59873A;">&#39;字段&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><ul><li><strong>对比语法:</strong></li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220507231641824.png" alt="image-20220507231641824"></p><h3 id="_2-插入" tabindex="-1">2.插入 <a class="header-anchor" href="#_2-插入" aria-label="Permalink to &quot;2.插入&quot;">​</a></h3><ul><li><strong>单条文档</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.insert(</span><span style="color:#DBD7CAEE;">{&#39;</span><span style="color:#80A665;">name</span><span style="color:#80A665;">&#39;:&#39;</span><span style="color:#80A665;">李四</span><span style="color:#80A665;">&#39;,age:18,sex:&#39;</span><span style="color:#80A665;">男</span><span style="color:#80A665;">&#39;});  # 提示已弃用</span></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(&#39;</span><span style="color:#80A665;">users</span><span style="color:#80A665;">&#39;).insert({&#39;</span><span style="color:#80A665;">name</span><span style="color:#80A665;">&#39;:&#39;</span><span style="color:#80A665;">李四</span><span style="color:#80A665;">&#39;,age:18,sex:&#39;</span><span style="color:#80A665;">男</span><span style="color:#80A665;">&#39;})</span></span>
+<span class="line"><span style="color:#80A665;">db.users.insertOne({&#39;</span><span style="color:#80A665;">name</span><span style="color:#80A665;">&#39;:&#39;</span><span style="color:#80A665;">赵六</span><span style="color:#80A665;">&#39;})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.insert(</span><span style="color:#393A34;">{&#39;</span><span style="color:#59873A;">name</span><span style="color:#59873A;">&#39;:&#39;</span><span style="color:#59873A;">李四</span><span style="color:#59873A;">&#39;,age:18,sex:&#39;</span><span style="color:#59873A;">男</span><span style="color:#59873A;">&#39;});  # 提示已弃用</span></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(&#39;</span><span style="color:#59873A;">users</span><span style="color:#59873A;">&#39;).insert({&#39;</span><span style="color:#59873A;">name</span><span style="color:#59873A;">&#39;:&#39;</span><span style="color:#59873A;">李四</span><span style="color:#59873A;">&#39;,age:18,sex:&#39;</span><span style="color:#59873A;">男</span><span style="color:#59873A;">&#39;})</span></span>
+<span class="line"><span style="color:#59873A;">db.users.insertOne({&#39;</span><span style="color:#59873A;">name</span><span style="color:#59873A;">&#39;:&#39;</span><span style="color:#59873A;">赵六</span><span style="color:#59873A;">&#39;})</span></span></code></pre></div><ul><li><strong>多条文档</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.insert([</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#80A665;">&#39;缘一&#39;</span><span style="color:#80A665;">},</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#80A665;">&#39;二楞&#39;</span><span style="color:#80A665;">}]</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#80A665;">db.users.insertMany([</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#80A665;">&#39;缘一1&#39;</span><span style="color:#80A665;">},</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#80A665;">&#39;二楞1&#39;</span><span style="color:#80A665;">}]</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#DBD7CAEE;">).insertMany</span><span style="color:#666666;">([</span><span style="color:#DBD7CAEE;">{name:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhang3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">,age:19},{name:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhang4</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">,age:19}</span><span style="color:#666666;">])</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.insert([</span><span style="color:#393A34;">{name:</span><span style="color:#59873A;">&#39;缘一&#39;</span><span style="color:#59873A;">},</span><span style="color:#393A34;">{name:</span><span style="color:#59873A;">&#39;二楞&#39;</span><span style="color:#59873A;">}]</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#59873A;">db.users.insertMany([</span><span style="color:#393A34;">{name:</span><span style="color:#59873A;">&#39;缘一1&#39;</span><span style="color:#59873A;">},</span><span style="color:#393A34;">{name:</span><span style="color:#59873A;">&#39;二楞1&#39;</span><span style="color:#59873A;">}]</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#393A34;">).insertMany</span><span style="color:#999999;">([</span><span style="color:#393A34;">{name:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhang3</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">,age:19},{name:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhang4</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">,age:19}</span><span style="color:#999999;">])</span></span></code></pre></div><ul><li><strong>脚本方式</strong></li></ul><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">for</span><span style="color:#666666;">(</span><span style="color:#B8A965;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#80A665;">i&lt;5</span><span style="color:#666666;">;</span><span style="color:#80A665;">i++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">{ </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">db.users.insert(</span><span style="color:#DBD7CAEE;">{id:i,name:</span><span style="color:#80A665;">&#39;zhang&#39;</span><span style="color:#80A665;">+i}</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">for</span><span style="color:#999999;">(</span><span style="color:#998418;">let</span><span style="color:#393A34;"> </span><span style="color:#B56959;">i</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#59873A;">i&lt;5</span><span style="color:#999999;">;</span><span style="color:#59873A;">i++</span><span style="color:#999999;">)</span><span style="color:#393A34;">{ </span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">db.users.insert(</span><span style="color:#393A34;">{id:i,name:</span><span style="color:#59873A;">&#39;zhang&#39;</span><span style="color:#59873A;">+i}</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><h3 id="_3-删除" tabindex="-1">3.删除 <a class="header-anchor" href="#_3-删除" aria-label="Permalink to &quot;3.删除&quot;">​</a></h3><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.remove(</span><span style="color:#DBD7CAEE;">{}) 	</span><span style="color:#758575DD;">#删除所有文档</span></span>
+<span class="line"><span style="color:#80A665;">db.users.remove(</span><span style="color:#DBD7CAEE;">{_id:ObjectId(</span><span style="color:#80A665;">&quot;62767f841f41a9d7de748124&quot;</span><span style="color:#DBD7CAEE;">)})	 </span><span style="color:#758575DD;">#删除某一条</span></span>
+<span class="line"><span style="color:#80A665;">db.users.remove(</span><span style="color:#DBD7CAEE;">{age:20})	 </span><span style="color:#758575DD;">#删除满足条件的数据</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#DBD7CAEE;">).deleteOne</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{name:&#39;zhang3&#39;})	 #删除某一条</span></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">.deleteMany</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{age:18})	 #删除满足条件的数据</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.remove(</span><span style="color:#393A34;">{}) 	</span><span style="color:#A0ADA0;">#删除所有文档</span></span>
+<span class="line"><span style="color:#59873A;">db.users.remove(</span><span style="color:#393A34;">{_id:ObjectId(</span><span style="color:#59873A;">&quot;62767f841f41a9d7de748124&quot;</span><span style="color:#393A34;">)})	 </span><span style="color:#A0ADA0;">#删除某一条</span></span>
+<span class="line"><span style="color:#59873A;">db.users.remove(</span><span style="color:#393A34;">{age:20})	 </span><span style="color:#A0ADA0;">#删除满足条件的数据</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#393A34;">).deleteOne</span><span style="color:#999999;">(</span><span style="color:#393A34;">{name:&#39;zhang3&#39;})	 #删除某一条</span></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">.deleteMany</span><span style="color:#999999;">(</span><span style="color:#393A34;">{age:18})	 #删除满足条件的数据</span></span></code></pre></div><h3 id="_4-更新" tabindex="-1">4.更新 <a class="header-anchor" href="#_4-更新" aria-label="Permalink to &quot;4.更新&quot;">​</a></h3><p>语法 :</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#BD976A;">集合名称</span><span style="color:#666666;">.</span><span style="color:#80A665;">update</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">query</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">update</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">updert</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">boolean</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">, </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        multi:</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">boolean</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    	writeConcern:</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">document</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> //抛出异常的级别</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#B07D48;">集合名称</span><span style="color:#999999;">.</span><span style="color:#59873A;">update</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">query</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">update</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">updert</span><span style="color:#393A34;">:</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">boolean</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">, </span></span>
+<span class="line"><span style="color:#393A34;">        multi:</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">boolean</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">,</span></span>
+<span class="line"><span style="color:#393A34;">    	writeConcern:</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">document</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> //抛出异常的级别</span></span>
+<span class="line"><span style="color:#393A34;">    }</span></span>
+<span class="line"><span style="color:#393A34;">)</span></span></code></pre></div><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">db.users.update(</span><span style="color:#DBD7CAEE;">{_id:ObjectId(</span><span style="color:#80A665;">&#39;627686574f57a31b328b63ab&#39;</span><span style="color:#DBD7CAEE;">)},{</span><span style="color:#BD976A;">$set</span><span style="color:#DBD7CAEE;">:{</span><span style="color:#80A665;">age:24,likes:[</span><span style="color:#80A665;">&#39;代码&#39;</span><span style="color:#80A665;">,</span><span style="color:#80A665;">&#39;吃饭&#39;</span><span style="color:#80A665;">]}}</span><span style="color:#DBD7CAEE;">)  </span><span style="color:#758575DD;">#指定更新</span></span>
+<span class="line"><span style="color:#80A665;">db.users.update(</span><span style="color:#DBD7CAEE;">{age:18}</span><span style="color:#80A665;">,</span><span style="color:#DBD7CAEE;">{</span><span style="color:#BD976A;">$set</span><span style="color:#DBD7CAEE;">:{age:24,likes:[</span><span style="color:#80A665;">&#39;动漫&#39;</span><span style="color:#80A665;">,</span><span style="color:#80A665;">&#39;美女&#39;</span><span style="color:#80A665;">]}}</span><span style="color:#DBD7CAEE;">)  </span><span style="color:#758575DD;">#更新匹配到的第一条</span></span>
+<span class="line"><span style="color:#80A665;">db.users.update(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#80A665;">age:18},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#BD976A;">$set</span><span style="color:#DBD7CAEE;">:{</span><span style="color:#80A665;">age:24,likes:[</span><span style="color:#80A665;">&#39;动漫&#39;</span><span style="color:#80A665;">,</span><span style="color:#80A665;">&#39;美女&#39;</span><span style="color:#80A665;">]}},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#80A665;">multi:true}</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#更新多条</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#80A665;">upsert:true}</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">#不存在则插入</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">)  #更新匹配到的所有</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">db.getCollection(</span><span style="color:#80A665;">&#39;users&#39;</span><span style="color:#DBD7CAEE;">).update</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">{age:18},{$set:{age:24,likes:[&#39;动漫&#39;,&#39;美女&#39;]}})	#更新匹配到的第一条</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">db.users.update(</span><span style="color:#393A34;">{_id:ObjectId(</span><span style="color:#59873A;">&#39;627686574f57a31b328b63ab&#39;</span><span style="color:#393A34;">)},{</span><span style="color:#B07D48;">$set</span><span style="color:#393A34;">:{</span><span style="color:#59873A;">age:24,likes:[</span><span style="color:#59873A;">&#39;代码&#39;</span><span style="color:#59873A;">,</span><span style="color:#59873A;">&#39;吃饭&#39;</span><span style="color:#59873A;">]}}</span><span style="color:#393A34;">)  </span><span style="color:#A0ADA0;">#指定更新</span></span>
+<span class="line"><span style="color:#59873A;">db.users.update(</span><span style="color:#393A34;">{age:18}</span><span style="color:#59873A;">,</span><span style="color:#393A34;">{</span><span style="color:#B07D48;">$set</span><span style="color:#393A34;">:{age:24,likes:[</span><span style="color:#59873A;">&#39;动漫&#39;</span><span style="color:#59873A;">,</span><span style="color:#59873A;">&#39;美女&#39;</span><span style="color:#59873A;">]}}</span><span style="color:#393A34;">)  </span><span style="color:#A0ADA0;">#更新匹配到的第一条</span></span>
+<span class="line"><span style="color:#59873A;">db.users.update(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#59873A;">age:18},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#B07D48;">$set</span><span style="color:#393A34;">:{</span><span style="color:#59873A;">age:24,likes:[</span><span style="color:#59873A;">&#39;动漫&#39;</span><span style="color:#59873A;">,</span><span style="color:#59873A;">&#39;美女&#39;</span><span style="color:#59873A;">]}},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#59873A;">multi:true}</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#更新多条</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#59873A;">upsert:true}</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">#不存在则插入</span></span>
+<span class="line"><span style="color:#393A34;">)  #更新匹配到的所有</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">db.getCollection(</span><span style="color:#59873A;">&#39;users&#39;</span><span style="color:#393A34;">).update</span><span style="color:#999999;">(</span><span style="color:#393A34;">{age:18},{$set:{age:24,likes:[&#39;动漫&#39;,&#39;美女&#39;]}})	#更新匹配到的第一条</span></span></code></pre></div><h2 id="五、mongoose学习" tabindex="-1">五、<a href="http://www.mongoosejs.net/docs/index.html" target="_blank" rel="noreferrer">Mongoose学习</a> <a class="header-anchor" href="#五、mongoose学习" aria-label="Permalink to &quot;五、[Mongoose学习](http://www.mongoosejs.net/docs/index.html)&quot;">​</a></h2><h3 id="_1-插入" tabindex="-1">1.插入 <a class="header-anchor" href="#_1-插入" aria-label="Permalink to &quot;1.插入&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">register</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">User</span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#80A665;">save</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">//转化为json才能移除密码</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#80A665;">toJSON</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">delete</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">password</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">注册成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">user</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">next</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">register</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">User</span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#59873A;">save</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">//转化为json才能移除密码</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#59873A;">toJSON</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">delete</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">password</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">注册成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">user</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">next</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_2-删除" tabindex="-1">2.删除 <a class="header-anchor" href="#_2-删除" aria-label="Permalink to &quot;2.删除&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">deleteArticle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Types</span><span style="color:#666666;">.</span><span style="color:#80A665;">ObjectId</span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">findByIdAndRemove</span><span style="color:#666666;">(</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">result: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">succ</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章删除成功!</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">deleteArticle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Types</span><span style="color:#999999;">.</span><span style="color:#59873A;">ObjectId</span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">findByIdAndRemove</span><span style="color:#999999;">(</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">result: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">succ</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章删除成功!</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_3-更新" tabindex="-1">3.更新 <a class="header-anchor" href="#_3-更新" aria-label="Permalink to &quot;3.更新&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">updateArticle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">article</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">article</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">_id</span><span style="color:#666666;">:</span><span style="color:#BD976A;">id</span><span style="color:#666666;">,</span><span style="color:#BD976A;">title</span><span style="color:#666666;">,</span><span style="color:#BD976A;">desc</span><span style="color:#666666;">,</span><span style="color:#BD976A;">body</span><span style="color:#666666;">,</span><span style="color:#BD976A;">tagList</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">article</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">article</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">findByIdAndUpdate</span><span style="color:#666666;">(</span><span style="color:#BD976A;">id</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">$set</span><span style="color:#666666;">:</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">article</span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">new</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">succ</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章更新成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">article</span><span style="color:#666666;">:</span><span style="color:#BD976A;">article</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">updateArticle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">article</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">article</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">_id</span><span style="color:#999999;">:</span><span style="color:#B07D48;">id</span><span style="color:#999999;">,</span><span style="color:#B07D48;">title</span><span style="color:#999999;">,</span><span style="color:#B07D48;">desc</span><span style="color:#999999;">,</span><span style="color:#B07D48;">body</span><span style="color:#999999;">,</span><span style="color:#B07D48;">tagList</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">article</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">article</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">findByIdAndUpdate</span><span style="color:#999999;">(</span><span style="color:#B07D48;">id</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">$set</span><span style="color:#999999;">:</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">article</span><span style="color:#999999;">},</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">new</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">succ</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章更新成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">article</span><span style="color:#999999;">:</span><span style="color:#B07D48;">article</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_4-查询" tabindex="-1">4.查询 <a class="header-anchor" href="#_4-查询" aria-label="Permalink to &quot;4.查询&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//获取一个文章</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">getArticleById</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//映射用户</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">article</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">findById</span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#BD976A;">articleId</span><span style="color:#666666;">).</span><span style="color:#80A665;">populate</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">author</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">article</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章不存在!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">succ</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章查询成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">article</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//获取一个文章</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">getArticleById</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//映射用户</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">article</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">findById</span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#B07D48;">articleId</span><span style="color:#999999;">).</span><span style="color:#59873A;">populate</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">author</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">article</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">return</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章不存在!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">succ</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章查询成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">article</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 获取文章列表</span></span>
+<span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#80A665;">getArticles</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">limit</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#BD976A;">offset</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#BD976A;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">author</span><span style="color:#666666;">,</span><span style="color:#BD976A;">favorited</span><span style="color:#666666;">,</span><span style="color:#BD976A;">sortBy</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">conditions</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">filter</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tag</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">filter</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tag</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//某个作者的文章</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">author</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">User</span><span style="color:#666666;">.</span><span style="color:#80A665;">findOne</span><span style="color:#666666;">({</span><span style="color:#B8A965;">username</span><span style="color:#666666;">:</span><span style="color:#BD976A;">author</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">filter</span><span style="color:#666666;">.</span><span style="color:#BD976A;">author</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#BD976A;">user</span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">_id</span><span style="color:#CB7676;">:null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">articleList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">filter</span><span style="color:#666666;">).</span><span style="color:#80A665;">skip</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Number</span><span style="color:#666666;">.</span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">offset</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">limit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Number</span><span style="color:#666666;">.</span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">limit</span><span style="color:#666666;">)).</span><span style="color:#80A665;">sort</span><span style="color:#666666;">({</span><span style="color:#B8A965;">creeateAt</span><span style="color:#666666;">:</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,...</span><span style="color:#BD976A;">sortBy</span><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">articleCount</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">filter</span><span style="color:#666666;">).</span><span style="color:#80A665;">skip</span><span style="color:#666666;">(</span><span style="color:#BD976A;">offset</span><span style="color:#666666;">).</span><span style="color:#80A665;">limit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">limit</span><span style="color:#666666;">).</span><span style="color:#80A665;">count</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">totalCount</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Article</span><span style="color:#666666;">.</span><span style="color:#80A665;">countDocuments</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">articleList</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">暂无文章!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">succ</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">文章查询列表成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">articleList</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">articleCount</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">totalCount</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">errs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 获取文章列表</span></span>
+<span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#59873A;">getArticles</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">limit</span><span style="color:#999999;">=</span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#B07D48;">offset</span><span style="color:#999999;">=</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#B07D48;">tag</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">author</span><span style="color:#999999;">,</span><span style="color:#B07D48;">favorited</span><span style="color:#999999;">,</span><span style="color:#B07D48;">sortBy</span><span style="color:#999999;">}</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">conditions</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">filter</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tag</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">filter</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tag</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//某个作者的文章</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">author</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">User</span><span style="color:#999999;">.</span><span style="color:#59873A;">findOne</span><span style="color:#999999;">({</span><span style="color:#998418;">username</span><span style="color:#999999;">:</span><span style="color:#B07D48;">author</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">filter</span><span style="color:#999999;">.</span><span style="color:#B07D48;">author</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B07D48;">user</span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">_id</span><span style="color:#AB5959;">:null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">articleList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">filter</span><span style="color:#999999;">).</span><span style="color:#59873A;">skip</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Number</span><span style="color:#999999;">.</span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">offset</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">limit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Number</span><span style="color:#999999;">.</span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">limit</span><span style="color:#999999;">)).</span><span style="color:#59873A;">sort</span><span style="color:#999999;">({</span><span style="color:#998418;">creeateAt</span><span style="color:#999999;">:</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,...</span><span style="color:#B07D48;">sortBy</span><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">articleCount</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">filter</span><span style="color:#999999;">).</span><span style="color:#59873A;">skip</span><span style="color:#999999;">(</span><span style="color:#B07D48;">offset</span><span style="color:#999999;">).</span><span style="color:#59873A;">limit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">limit</span><span style="color:#999999;">).</span><span style="color:#59873A;">count</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">totalCount</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Article</span><span style="color:#999999;">.</span><span style="color:#59873A;">countDocuments</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">articleList</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">return</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">暂无文章!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">succ</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">文章查询列表成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">articleList</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">articleCount</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">totalCount</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">errs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_5-模型" tabindex="-1">5.模型 <a class="header-anchor" href="#_5-模型" aria-label="Permalink to &quot;5.模型&quot;">​</a></h3><p>📝model/index.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mongoose</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dbUri</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../config/config.default</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">connect</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dbUri</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">db</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#BD976A;">connection</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">error</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#BD976A;">error</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#BD976A;">console</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">MongDB数据库连接失败!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">));</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">once</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">open</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">MongDB数据库连接成功!</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Cat</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">model</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Cat</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">User</span><span style="color:#666666;">:</span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">model</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">User</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./user</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">Article</span><span style="color:#666666;">:</span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">model</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Article</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./article</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)),</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mongoose</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dbUri</span><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../config/config.default</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">connect</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dbUri</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">db</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#B07D48;">connection</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">error</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#B07D48;">error</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#B07D48;">console</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">MongDB数据库连接失败!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">));</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">once</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">open</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">MongDB数据库连接成功!</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Cat</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">model</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Cat</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">User</span><span style="color:#999999;">:</span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">model</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">User</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./user</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)),</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">Article</span><span style="color:#999999;">:</span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">model</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Article</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./article</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)),</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝model/base.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//基础模型 </span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">createAt</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Date</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Date</span><span style="color:#666666;">.</span><span style="color:#BD976A;">now</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">updtedAt</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Date</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Date</span><span style="color:#666666;">.</span><span style="color:#BD976A;">now</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//基础模型 </span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">createAt</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Date</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Date</span><span style="color:#999999;">.</span><span style="color:#B07D48;">now</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">updtedAt</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Date</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Date</span><span style="color:#999999;">.</span><span style="color:#B07D48;">now</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝model/user.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mongoose</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">baseSchema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./base</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">md5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../util/md5</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//用户模型</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userSchema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">Schema</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">...</span><span style="color:#BD976A;">baseSchema</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">username</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">password</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">set</span><span style="color:#666666;">:</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">md5</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">select</span><span style="color:#666666;">:</span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">email</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">bio</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">image</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userSchema</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mongoose</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">baseSchema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./base</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">md5</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../util/md5</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//用户模型</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userSchema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">Schema</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">...</span><span style="color:#B07D48;">baseSchema</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">username</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">password</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">set</span><span style="color:#999999;">:</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">md5</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">select</span><span style="color:#999999;">:</span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">email</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">bio</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">image</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userSchema</span></span></code></pre></div><p>📝model/article.js</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mongoose</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Schema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Schema</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">baseSchema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./base</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//文章模型</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">articleSchema</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mongoose</span><span style="color:#666666;">.</span><span style="color:#80A665;">Schema</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">...</span><span style="color:#BD976A;">baseSchema</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">desc</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">body</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">favoritesCount</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Number</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">tagList</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:[</span><span style="color:#BD976A;">String</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">author</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#BD976A;">Schema</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Types</span><span style="color:#666666;">.</span><span style="color:#BD976A;">ObjectId</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">ref</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">User</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">required</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">articleSchema</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mongoose</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Schema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Schema</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">baseSchema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./base</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//文章模型</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">articleSchema</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mongoose</span><span style="color:#999999;">.</span><span style="color:#59873A;">Schema</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">...</span><span style="color:#B07D48;">baseSchema</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">title</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">desc</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">body</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">favoritesCount</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Number</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">tagList</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">type</span><span style="color:#999999;">:[</span><span style="color:#B07D48;">String</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">author</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#B07D48;">Schema</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Types</span><span style="color:#999999;">.</span><span style="color:#B07D48;">ObjectId</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">ref</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">User</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">required</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">articleSchema</span></span></code></pre></div>`,74),e=[o];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/BackEnd_NodeJS_MongoDB\347\254\224\350\256\260.md.eb6021c2.lean.js" "b/assets/BackEnd_NodeJS_MongoDB\347\254\224\350\256\260.md.eb6021c2.lean.js"
new file mode 100644
index 00000000..f0214726
--- /dev/null
+++ "b/assets/BackEnd_NodeJS_MongoDB\347\254\224\350\256\260.md.eb6021c2.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/NodeJS/MongoDB笔记.md","filePath":"BackEnd/NodeJS/MongoDB笔记.md"}'),p={name:"BackEnd/NodeJS/MongoDB笔记.md"},o=l("",74),e=[o];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/BackEnd_NodeJS_Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md.84c9f765.js" "b/assets/BackEnd_NodeJS_Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md.84c9f765.js"
new file mode 100644
index 00000000..0a2a14e1
--- /dev/null
+++ "b/assets/BackEnd_NodeJS_Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md.84c9f765.js"
@@ -0,0 +1,247 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"Node大文件上传","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/NodeJS/Node大文件上传.md","filePath":"BackEnd/NodeJS/Node大文件上传.md"}'),p={name:"BackEnd/NodeJS/Node大文件上传.md"},o=l(`<h1 id="node大文件上传" tabindex="-1">Node大文件上传 <a class="header-anchor" href="#node大文件上传" aria-label="Permalink to &quot;Node大文件上传&quot;">​</a></h1><ol><li>创建文件唯一 HASH</li><li>发请求检查文件是否已传过 <ol><li>传过:提示&#39;秒传成功&#39;</li><li>未传过:开始切片并上传，创建任务池，循环上传切片</li><li>传过未传完:从下一切片开始传</li></ol></li><li>上传完成，发送合并切片请求</li></ol><h2 id="vue-前端代码" tabindex="-1">Vue 前端代码 <a class="header-anchor" href="#vue-前端代码" aria-label="Permalink to &quot;Vue 前端代码&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-upload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">:http-request</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">customRequest</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#80A665;">trigger</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">primary</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">选择文件</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-button</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-upload</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">axios</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">axios</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">SparkMD5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">spark-md5</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">customRequest</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">({</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#CB7676;"> </span><span style="color:#666666;">})</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">formData</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">FormData</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">formData</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fileName</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">hash</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">calcFileHash</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">chunks</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">createFileChunk</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 检查文件是否存在</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// const { data: { data: { exist } } } = await checkFileExist(hash)</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">res</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">uploadChunks</span><span style="color:#666666;">(</span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">checkFileExist</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">return</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">axios</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">http://localhost:3000/upload/checkFile</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#BD976A;">hash</span></span>
+<span class="line"><span style="color:#666666;">  })</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Chunk</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">index</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Blob</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">ChunkSize</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">1024</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">1024</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;"> </span><span style="color:#758575DD;">// 2M</span></span>
+<span class="line"><span style="color:#758575DD;">// 创建分片</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">createFileChunk</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Chunk</span><span style="color:#666666;">[] =</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">chunkCount</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">ceil</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;"> / </span><span style="color:#BD976A;">ChunkSize</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">for</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunkCount</span><span style="color:#666666;">;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Blob</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> * </span><span style="color:#BD976A;">ChunkSize</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> + </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> * </span><span style="color:#BD976A;">ChunkSize</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">name</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#CB7676;"> + </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">-</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;"> + </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">lastIndexOf</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> + </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#B8A965;">index</span><span style="color:#666666;">: </span><span style="color:#BD976A;">i</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    })</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">return</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunks</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">// 创建文件hash值</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">calcFileHash</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">: </span><span style="color:#5DA994;">File</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">return</span><span style="color:#CB7676;"> new </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">spark</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#BD976A;">SparkMD5</span><span style="color:#666666;">.</span><span style="color:#80A665;">ArrayBuffer</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">reader</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">FileReader</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">size</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">offset</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">1024</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">1024</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 第一个2M，最后一个区块数据全要</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">chunks</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">offset</span><span style="color:#666666;">)]</span></span>
+<span class="line"><span style="color:#CB7676;">    let </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">offset</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">while</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#4D9375;">if</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">offset</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 最后一个区快</span></span>
+<span class="line"><span style="color:#CB7676;">        </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">offset</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#666666;">}</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">else</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 中间的区块</span></span>
+<span class="line"><span style="color:#CB7676;">        const </span><span style="color:#BD976A;">mid</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">offset</span><span style="color:#CB7676;"> / </span><span style="color:#4C9A91;">2</span></span>
+<span class="line"><span style="color:#CB7676;">        const </span><span style="color:#BD976A;">end</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#BD976A;">offset</span></span>
+<span class="line"><span style="color:#CB7676;">        </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> + </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">        </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">mid</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">mid</span><span style="color:#CB7676;"> + </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">        </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">end</span><span style="color:#CB7676;"> - </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">end</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;"> += </span><span style="color:#BD976A;">offset</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 中间的，取前中后各2各字节</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">reader</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsArrayBuffer</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new </span><span style="color:#80A665;">Blob</span><span style="color:#666666;">(</span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">reader</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">e</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#BD976A;">spark</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">ArrayBuffer</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">spark</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">())</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">// 上传分片</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">uploadChunks</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">(</span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Array</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">Chunk</span><span style="color:#666666;">&gt;,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 转成promise</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">requestList</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(({</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#CB7676;"> </span><span style="color:#666666;">})</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">form</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">FormData</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">form</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">chunk</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">chunk</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">form</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hash</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">hash</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">form</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">return</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{ </span><span style="color:#BD976A;">form</span><span style="color:#666666;">, </span><span style="color:#B8A965;">index</span><span style="color:#666666;">: </span><span style="color:#BD976A;">index</span><span style="color:#666666;">, </span><span style="color:#B8A965;">error</span><span style="color:#666666;">: </span><span style="color:#4C9A91;">0</span><span style="color:#666666;"> }</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">  let </span><span style="color:#BD976A;">index</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Array</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">any</span><span style="color:#666666;">&gt;&gt; =</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">max</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">6</span><span style="color:#CB7676;"> </span><span style="color:#758575DD;">// 设置浏览器运行最大并发数  目前6个为当前的主流</span></span>
+<span class="line"><span style="color:#CB7676;">  let </span><span style="color:#BD976A;">allProgress</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">index</span><span style="color:#CB7676;"> </span><span style="color:#758575DD;">// 总进度</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">while</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">requestList</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">task</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">axios</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://localhost:3000/upload/postFile</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">requestList</span><span style="color:#666666;">[</span><span style="color:#BD976A;">index</span><span style="color:#666666;">].</span><span style="color:#BD976A;">form</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#80A665;">onUploadProgress</span><span style="color:#666666;">: (</span><span style="color:#BD976A;">progress</span><span style="color:#666666;">) =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#BD976A;">allProgress</span><span style="color:#666666;"> </span><span style="color:#CB7676;">+=</span><span style="color:#666666;"> (</span><span style="color:#BD976A;">progress</span><span style="color:#666666;">.</span><span style="color:#BD976A;">loaded</span><span style="color:#666666;"> </span><span style="color:#CB7676;">/</span><span style="color:#666666;"> (</span><span style="color:#BD976A;">progress</span><span style="color:#666666;">.</span><span style="color:#BD976A;">total</span><span style="color:#666666;"> </span><span style="color:#CB7676;">?</span><span style="color:#666666;"> </span><span style="color:#BD976A;">progress</span><span style="color:#666666;">.</span><span style="color:#BD976A;">total</span><span style="color:#666666;"> </span><span style="color:#CB7676;">:</span><span style="color:#666666;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)) </span><span style="color:#758575DD;">// 这是单个分片的</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#CB7676;">const </span><span style="color:#BD976A;">percent</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">((</span><span style="color:#BD976A;">allProgress</span><span style="color:#CB7676;"> / </span><span style="color:#BD976A;">requestList</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> * </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// if (params.onProgress) params.onProgress({ percent })</span></span>
+<span class="line"><span style="color:#666666;">      }</span></span>
+<span class="line"><span style="color:#666666;">    })</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">task</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">.</span><span style="color:#80A665;">splice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">.</span><span style="color:#80A665;">findIndex</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">item</span><span style="color:#CB7676;"> === </span><span style="color:#BD976A;">task</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">task</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">if</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#CB7676;"> === </span><span style="color:#BD976A;">max</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">      </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">race</span><span style="color:#666666;">(</span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#758575DD;">// 竞赛等出一个执行完毕的请求</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">index</span><span style="color:#CB7676;">++</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ taskPool ]-95</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">all</span><span style="color:#666666;">(</span><span style="color:#BD976A;">taskPool</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">style</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">scoped</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">scss</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">upload-demo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">style</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-upload</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">:http-request</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">customRequest</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#59873A;">trigger</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-button</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">primary</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">选择文件</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-button</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-upload</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">axios</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">axios</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">SparkMD5</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">spark-md5</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">customRequest</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">({</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#AB5959;"> </span><span style="color:#999999;">})</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">formData</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">FormData</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">formData</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fileName</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">hash</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">calcFileHash</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">chunks</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">createFileChunk</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 检查文件是否存在</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// const { data: { data: { exist } } } = await checkFileExist(hash)</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">res</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">uploadChunks</span><span style="color:#999999;">(</span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">checkFileExist</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">return</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">axios</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">http://localhost:3000/upload/checkFile</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#B07D48;">hash</span></span>
+<span class="line"><span style="color:#999999;">  })</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Chunk</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">index</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Blob</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">ChunkSize</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">1024</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">1024</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">2</span><span style="color:#AB5959;"> </span><span style="color:#A0ADA0;">// 2M</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 创建分片</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">createFileChunk</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Chunk</span><span style="color:#999999;">[] =</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">chunkCount</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">ceil</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;"> / </span><span style="color:#B07D48;">ChunkSize</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">for</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunkCount</span><span style="color:#999999;">;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Blob</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> * </span><span style="color:#B07D48;">ChunkSize</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> + </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> * </span><span style="color:#B07D48;">ChunkSize</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">name</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#AB5959;"> + </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">-</span><span style="color:#B5695999;">&quot;</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;"> + </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">lastIndexOf</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> + </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#998418;">index</span><span style="color:#999999;">: </span><span style="color:#B07D48;">i</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    })</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">return</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunks</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 创建文件hash值</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">calcFileHash</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">File</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">return</span><span style="color:#AB5959;"> new </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">spark</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#B07D48;">SparkMD5</span><span style="color:#999999;">.</span><span style="color:#59873A;">ArrayBuffer</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">reader</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">FileReader</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">size</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">offset</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">2</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">1024</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">1024</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 第一个2M，最后一个区块数据全要</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">chunks</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">offset</span><span style="color:#999999;">)]</span></span>
+<span class="line"><span style="color:#AB5959;">    let </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">offset</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">while</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#1E754F;">if</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">offset</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 最后一个区快</span></span>
+<span class="line"><span style="color:#AB5959;">        </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">offset</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#999999;">}</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">else</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 中间的区块</span></span>
+<span class="line"><span style="color:#AB5959;">        const </span><span style="color:#B07D48;">mid</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">offset</span><span style="color:#AB5959;"> / </span><span style="color:#2F798A;">2</span></span>
+<span class="line"><span style="color:#AB5959;">        const </span><span style="color:#B07D48;">end</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#B07D48;">offset</span></span>
+<span class="line"><span style="color:#AB5959;">        </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> + </span><span style="color:#2F798A;">2</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">        </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">mid</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">mid</span><span style="color:#AB5959;"> + </span><span style="color:#2F798A;">2</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">        </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">end</span><span style="color:#AB5959;"> - </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">end</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;"> += </span><span style="color:#B07D48;">offset</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 中间的，取前中后各2各字节</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">reader</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsArrayBuffer</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new </span><span style="color:#59873A;">Blob</span><span style="color:#999999;">(</span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">reader</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">e</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#B07D48;">spark</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">ArrayBuffer</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">spark</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">())</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 上传分片</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">uploadChunks</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">(</span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">Chunk</span><span style="color:#999999;">&gt;,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 转成promise</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">requestList</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(({</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#AB5959;"> </span><span style="color:#999999;">})</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">form</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">FormData</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">form</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">chunk</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">chunk</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">form</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hash</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">hash</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">form</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">return</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{ </span><span style="color:#B07D48;">form</span><span style="color:#999999;">, </span><span style="color:#998418;">index</span><span style="color:#999999;">: </span><span style="color:#B07D48;">index</span><span style="color:#999999;">, </span><span style="color:#998418;">error</span><span style="color:#999999;">: </span><span style="color:#2F798A;">0</span><span style="color:#999999;"> }</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">  let </span><span style="color:#B07D48;">index</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">any</span><span style="color:#999999;">&gt;&gt; =</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">max</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">6</span><span style="color:#AB5959;"> </span><span style="color:#A0ADA0;">// 设置浏览器运行最大并发数  目前6个为当前的主流</span></span>
+<span class="line"><span style="color:#AB5959;">  let </span><span style="color:#B07D48;">allProgress</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">index</span><span style="color:#AB5959;"> </span><span style="color:#A0ADA0;">// 总进度</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">while</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">requestList</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">task</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">axios</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://localhost:3000/upload/postFile</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">requestList</span><span style="color:#999999;">[</span><span style="color:#B07D48;">index</span><span style="color:#999999;">].</span><span style="color:#B07D48;">form</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#59873A;">onUploadProgress</span><span style="color:#999999;">: (</span><span style="color:#B07D48;">progress</span><span style="color:#999999;">) =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#B07D48;">allProgress</span><span style="color:#999999;"> </span><span style="color:#AB5959;">+=</span><span style="color:#999999;"> (</span><span style="color:#B07D48;">progress</span><span style="color:#999999;">.</span><span style="color:#B07D48;">loaded</span><span style="color:#999999;"> </span><span style="color:#AB5959;">/</span><span style="color:#999999;"> (</span><span style="color:#B07D48;">progress</span><span style="color:#999999;">.</span><span style="color:#B07D48;">total</span><span style="color:#999999;"> </span><span style="color:#AB5959;">?</span><span style="color:#999999;"> </span><span style="color:#B07D48;">progress</span><span style="color:#999999;">.</span><span style="color:#B07D48;">total</span><span style="color:#999999;"> </span><span style="color:#AB5959;">:</span><span style="color:#999999;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)) </span><span style="color:#A0ADA0;">// 这是单个分片的</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#AB5959;">const </span><span style="color:#B07D48;">percent</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">((</span><span style="color:#B07D48;">allProgress</span><span style="color:#AB5959;"> / </span><span style="color:#B07D48;">requestList</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> * </span><span style="color:#2F798A;">100</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// if (params.onProgress) params.onProgress({ percent })</span></span>
+<span class="line"><span style="color:#999999;">      }</span></span>
+<span class="line"><span style="color:#999999;">    })</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">task</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">.</span><span style="color:#59873A;">splice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">.</span><span style="color:#59873A;">findIndex</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">item</span><span style="color:#AB5959;"> === </span><span style="color:#B07D48;">task</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">task</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">if</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#AB5959;"> === </span><span style="color:#B07D48;">max</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">      </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">race</span><span style="color:#999999;">(</span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#A0ADA0;">// 竞赛等出一个执行完毕的请求</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">index</span><span style="color:#AB5959;">++</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ taskPool ]-95</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">all</span><span style="color:#999999;">(</span><span style="color:#B07D48;">taskPool</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">style</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">scoped</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">scss</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">upload-demo</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">style</span><span style="color:#999999;">&gt;</span></span></code></pre></div>`,4),e=[o];function c(t,r,y,B,A,D){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{C as __pageData,u as default};
diff --git "a/assets/BackEnd_NodeJS_Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md.84c9f765.lean.js" "b/assets/BackEnd_NodeJS_Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md.84c9f765.lean.js"
new file mode 100644
index 00000000..38e33443
--- /dev/null
+++ "b/assets/BackEnd_NodeJS_Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.md.84c9f765.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"Node大文件上传","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/NodeJS/Node大文件上传.md","filePath":"BackEnd/NodeJS/Node大文件上传.md"}'),p={name:"BackEnd/NodeJS/Node大文件上传.md"},o=l("",4),e=[o];function c(t,r,y,B,A,D){return n(),a("div",null,e)}const u=s(p,[["render",c]]);export{C as __pageData,u as default};
diff --git "a/assets/BackEnd_NodeJS_Node\345\255\246\344\271\240\347\254\224\350\256\260.md.f1b234ff.js" "b/assets/BackEnd_NodeJS_Node\345\255\246\344\271\240\347\254\224\350\256\260.md.f1b234ff.js"
new file mode 100644
index 00000000..249e3ba2
--- /dev/null
+++ "b/assets/BackEnd_NodeJS_Node\345\255\246\344\271\240\347\254\224\350\256\260.md.f1b234ff.js"
@@ -0,0 +1,973 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/NodeJS/Node学习笔记.md","filePath":"BackEnd/NodeJS/Node学习笔记.md"}'),p={name:"BackEnd/NodeJS/Node学习笔记.md"},o=l(`<h2 id="一、读取文件" tabindex="-1">一、读取文件 <a class="header-anchor" href="#一、读取文件" aria-label="Permalink to &quot;一、读取文件&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readFile</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">utf8</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">data</span><span style="color:#666666;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">data: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//失败为undefined</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">err: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">err</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//成功为null,否则为错误对象</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	 </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">读取失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">读取成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">data</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readFile</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">utf8</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">data</span><span style="color:#999999;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">data: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//失败为undefined</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">err: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">err</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//成功为null,否则为错误对象</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	 </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">读取失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">读取成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">data</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p><strong>问题</strong></p><ul><li>相对路径在上一层读取不了文件</li><li>绝对路径不利于维护移植</li></ul><p><strong>解决</strong></p><p><code>__dirname</code>代表当前文件所处目录, 解决文件路径动态拼接问题</p><p><strong>坑点</strong>：<code>__dirname</code>输出是路径是**<em>反斜杠（\\）</em><strong>，拼接后面的路径需要写</strong><em>正斜杠（/）</em>**</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//__dirname:  D:\\PracticeProject\\Node\\readfile</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/3.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">utf8</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">data</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\\\\\\\</span><span style="color:#C98A7D;">3.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\\\\\3</span><span style="color:#C98A7D;">.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\\\\\3</span><span style="color:#C98A7D;">.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C99076;">\\\\</span><span style="color:#C98A7D;">3.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">__dirname: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">__dirname</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\\\</span><span style="color:#C98A7D;">3.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//这四个都可以成功(?)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">__dirname: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">data: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">读取失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//__dirname:  D:\\PracticeProject\\Node\\readfile</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/3.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">utf8</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">data</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\\\\\\\</span><span style="color:#B56959;">3.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\\\\\3</span><span style="color:#B56959;">.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\\\\\3</span><span style="color:#B56959;">.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#A65E2B;">\\\\</span><span style="color:#B56959;">3.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">__dirname: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">__dirname</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\\\</span><span style="color:#B56959;">3.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//这四个都可以成功(?)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">__dirname: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">data: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">读取失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="path-路径模块" tabindex="-1">path 路径模块 <a class="header-anchor" href="#path-路径模块" aria-label="Permalink to &quot;path 路径模块&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pathStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/a</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/b/c</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/d</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//  a\\b\\d 抵消路劲(../)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pathStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/a</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/b/c</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/d</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//  a\\b\\d 抵消路劲(../)</span></span></code></pre></div><p>获取文件扩展名</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fext</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">extname</span><span style="color:#666666;">(</span><span style="color:#BD976A;">fpath</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fext</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">extname</span><span style="color:#999999;">(</span><span style="color:#B07D48;">fpath</span><span style="color:#999999;">)</span></span></code></pre></div><h2 id="二、写入文件" tabindex="-1">二、写入文件 <a class="header-anchor" href="#二、写入文件" aria-label="Permalink to &quot;二、写入文件&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">writeFile</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">F:/12.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">888888</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">写入失败 </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//写入成功,错误为null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">写入成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">writeFile</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">F:/12.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">888888</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#393A34;">  </span><span style="color:#999999;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">写入失败 </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//写入成功,错误为null</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">写入成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><blockquote><p>fs.writeFile 只能创建文件，不能创建路径</p><p>重复调用 fs.writeFile 写入同一个文件，新写入的会覆盖之前内容</p></blockquote><h2 id="三、服务器操作" tabindex="-1">三、服务器操作 <a class="header-anchor" href="#三、服务器操作" aria-label="Permalink to &quot;三、服务器操作&quot;">​</a></h2><blockquote><p>服务器与普通电脑：服务器上安装了 web 服务器软件</p></blockquote><h3 id="_1-创建-web-服务器步骤" tabindex="-1">1.创建 web 服务器步骤 <a class="header-anchor" href="#_1-创建-web-服务器步骤" aria-label="Permalink to &quot;1.创建 web 服务器步骤&quot;">​</a></h3><ul><li>导入 http 模块</li><li>创建 web 服务器实例</li><li>为服务器实例绑定 request 事件，监听客户端请求</li><li>启动服务器</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">http</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#666666;">.</span><span style="color:#80A665;">createServer</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">request</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//返回数据给客户端(解决中文乱码两种方法)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">writeHead</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/plain;charset=utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// res.setHeader(&#39;Content-Type&#39;,&#39;text/html; charset=utf-8&#39;)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> 	 </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">请求url:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">,请求方法:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">method</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	 </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">服务器监听到请求</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">服务器运行在 127.0.0.1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">http</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">server</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#999999;">.</span><span style="color:#59873A;">createServer</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">request</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//返回数据给客户端(解决中文乱码两种方法)</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">writeHead</span><span style="color:#999999;">(</span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/plain;charset=utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// res.setHeader(&#39;Content-Type&#39;,&#39;text/html; charset=utf-8&#39;)</span></span>
+<span class="line"><span style="color:#393A34;"> 	 </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">请求url:</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">,请求方法:</span><span style="color:#B5695999;">&#39;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">method</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	 </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">服务器监听到请求</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">服务器运行在 127.0.0.1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="_2-动态响应内容" tabindex="-1">2.动态响应内容 <a class="header-anchor" href="#_2-动态响应内容" aria-label="Permalink to &quot;2.动态响应内容&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#666666;">.</span><span style="color:#80A665;">createServer</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">request</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/index.html</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;h1&gt;Home&lt;/h1&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/about.html</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;h1&gt;About&lt;/h1&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">setHeader</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text/html; charset=utf-8</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#BD976A;">content</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">运行在localhost:8080</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">server</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#999999;">.</span><span style="color:#59873A;">createServer</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">request</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">content</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/index.html</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">content</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;h1&gt;Home&lt;/h1&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/about.html</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">content</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;h1&gt;About&lt;/h1&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">setHeader</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text/html; charset=utf-8</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B07D48;">content</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">运行在localhost:8080</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h3 id="_3-响应文件内容" tabindex="-1">3.响应文件内容 <a class="header-anchor" href="#_3-响应文件内容" aria-label="Permalink to &quot;3.响应文件内容&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#666666;">.</span><span style="color:#80A665;">createServer</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">request</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">请求路径和方式 </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">method</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//映射服务器文件路径</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fpath</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">读取失败</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">setHeader</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/html; charset=utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#BD976A;">data</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">8888</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">服务器运行在localhost:8888</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">server</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#999999;">.</span><span style="color:#59873A;">createServer</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">request</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">请求路径和方式 </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">method</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//映射服务器文件路径</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fpath</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">读取失败</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">setHeader</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/html; charset=utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B07D48;">data</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">8888</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">服务器运行在localhost:8888</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><p><strong>优化访问方式</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">http</span><span style="color:#666666;">.</span><span style="color:#80A665;">createServer</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">request</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">请求路径和方式 </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">method</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//让访问(/,/index.html,/stock-roolup/index.html)都可以得到响应</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/stock-rollup/index.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/index.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/stock-rollup</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">url</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/stock-rollup/index.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fpath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fpath: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fpath</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">fpath</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">读取失败</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">setHeader</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/html; charset=utf-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">end</span><span style="color:#666666;">(</span><span style="color:#BD976A;">data</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">server</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">8888</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">服务器运行在localhost:8888</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">server</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">http</span><span style="color:#999999;">.</span><span style="color:#59873A;">createServer</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">request</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">请求路径和方式 </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">method</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//让访问(/,/index.html,/stock-roolup/index.html)都可以得到响应</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/stock-rollup/index.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/index.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/stock-rollup</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">url</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/stock-rollup/index.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fpath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fpath: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fpath</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">fpath</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&lt;h1&gt;Not Found 404&lt;/h1&gt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">读取失败</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">setHeader</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/html; charset=utf-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">end</span><span style="color:#999999;">(</span><span style="color:#B07D48;">data</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">server</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">8888</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">服务器运行在localhost:8888</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h2 id="四、node-模块化" tabindex="-1">四、Node 模块化 <a class="header-anchor" href="#四、node-模块化" aria-label="Permalink to &quot;四、Node 模块化&quot;">​</a></h2><p>模块分为：内置模块、自定义模块、第三方模块</p><h3 id="_1-module-对象" tabindex="-1">1.module 对象 <a class="header-anchor" href="#_1-module-对象" aria-label="Permalink to &quot;1.module 对象&quot;">​</a></h3><p>在自定义模块中，<code>module.exports</code>模式是空对象，使用<code>module.exports</code>将模块内部成员共享</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220430114048249.png" alt="image-20220430114048249"></p><h3 id="_2-模块共享" tabindex="-1">2.模块共享 <a class="header-anchor" href="#_2-模块共享" aria-label="Permalink to &quot;2.模块共享&quot;">​</a></h3><p><code>m1.js</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">lisi</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">module-m1: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">module</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">lisi</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">module-m1: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">module</span><span style="color:#999999;">);</span></span></code></pre></div><p><code>m2.js</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./m1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">m1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./m1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">m1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span></span></code></pre></div><p>运行: <code>node m2.js</code></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220430120846611.png" alt="image-20220430120846611"></p><p>导出的对象以<code>module.expports</code>为准, 使用<code>require()</code>得到的永远是<code>module.expports</code>指向的对象</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//m1.js</span></span>
+<span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#B8A965;">exports</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#666666;">={</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">lisi</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">20</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//m2.js</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./m1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">m1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//lisi</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">m1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//20</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//m1.js</span></span>
+<span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#998418;">exports</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#999999;">={</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">lisi</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">20</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//m2.js</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./m1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">m1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//lisi</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">m1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//20</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220430121633293.png" alt="image-20220430121633293"></p><h2 id="五、模块加载机制" tabindex="-1">五、模块加载机制 <a class="header-anchor" href="#五、模块加载机制" aria-label="Permalink to &quot;五、模块加载机制&quot;">​</a></h2><ol><li><p>优先从缓存中加载，模块多次 require()只会执行一次</p></li><li><p>内置模块的加载优先级是最高的</p></li><li><p>自定义模块 require 时，必须在路径指定<code>./或../</code>开头的路径标识符</p></li></ol><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502220923072.png" alt="image-20220502220923072">4. 第三方模块记载机制</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502221028461.png" alt="image-20220502221028461"></p><ol start="5"><li><p>目录作为模块</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502221133208.png" alt="image-20220502221133208"></p></li></ol><h2 id="六、express-模块" tabindex="-1">六、Express 模块 <a class="header-anchor" href="#六、express-模块" aria-label="Permalink to &quot;六、Express 模块&quot;">​</a></h2><p><strong>前端两种服务器：</strong></p><p>​ Web 网站服务器：专门对外提供 Web 网页资源服务器</p><p>​ API 接口服务器：专门对外提供 API 接口服务器</p><h3 id="_1-express-创建服务器" tabindex="-1">1.Express 创建服务器 <a class="header-anchor" href="#_1-express-创建服务器" aria-label="Permalink to &quot;1.Express 创建服务器&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/zhj</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhj被访问</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhj被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">run 80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/zhj</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhj被访问</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhj被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">run 80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="_2-express-中间件" tabindex="-1">2.Express 中间件 <a class="header-anchor" href="#_2-express-中间件" aria-label="Permalink to &quot;2.Express 中间件&quot;">​</a></h3><ul><li><strong>概念</strong></li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501095630708.png" alt="image-20220501095630708"></p><ul><li><p><strong>定义与使用全局中间件</strong></p><blockquote><p>可以调用多个中间件对请求进行**<em>预处理</em>**</p></blockquote><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501095912439.png" alt="image-20220501095912439"></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">全局中间件被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">mw</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/zjj</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.name: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//zhangsan</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zjj被访问</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zjj被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">run 80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">全局中间件被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">mw</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/zjj</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.name: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//zhangsan</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zjj被访问</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zjj被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">run 80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><ul><li><p><strong>中间件本质</strong></p><p>next 函数可以流转关系转交给下一个中间件或路由</p></li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501100043506.png" alt="image-20220501100043506"></p><ul><li><strong>局部中间件</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">中间件mw1被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//在路由加一个参数,</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/mw1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">mw1</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.age: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mw1被访问</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mw1被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">...</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">中间件mw1被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//在路由加一个参数,</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/mw1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">mw1</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.age: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mw1被访问</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mw1被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">...</span></span></code></pre></div><ul><li><strong>多个局部中间件</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">全局中间件被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">中间件mw1被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mw2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">中间件mw2被执行了</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">mw</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/zhj</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.name: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhj被访问</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhj被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#758575DD;">//两种传参方式</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/mw1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,[</span><span style="color:#BD976A;">mw1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">mw2</span><span style="color:#666666;">],(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#758575DD;">//app.get(&#39;/mw1&#39;,mw1,mw2,(req,res)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.age: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//20</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mw1被访问哈哈哈</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">run 80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">全局中间件被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">中间件mw1被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mw2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">中间件mw2被执行了</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">mw</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/zhj</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.name: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhj被访问</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhj被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#A0ADA0;">//两种传参方式</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/mw1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,[</span><span style="color:#B07D48;">mw1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">mw2</span><span style="color:#999999;">],(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#A0ADA0;">//app.get(&#39;/mw1&#39;,mw1,mw2,(req,res)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.age: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//20</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mw1被访问哈哈哈</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">run 80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220501101526777.png" alt="image-20220501101526777"></p><ul><li><strong>中间件注意事项</strong></li></ul><ol><li>一定要在路由之前注册中间件</li><li>可以连续调用多个中间件对请求进行处理</li><li>中间件函数必须有<code>next()</code>函数</li><li><code>next()</code>后不要写额外代码</li><li>连续调用的多个中间件共享 req 和 res 对象</li></ol><ul><li><strong>中间件分类</strong></li></ul><ol><li>应用级别中间件：绑定到 app 实例上的中间件</li><li>路由级别中间件：绑定到 router 实例上的中间件</li><li>错误级别中间件：捕获项目异常错误的中间件</li></ol><h2 id="七、编写接口" tabindex="-1">七、编写接口 <a class="header-anchor" href="#七、编写接口" aria-label="Permalink to &quot;七、编写接口&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//index.js</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./router</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//配置解析urlencoded请求体中间件(在路由中间件前使用)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">urlencoded</span><span style="color:#666666;">({</span><span style="color:#B8A965;">extended</span><span style="color:#666666;">:</span><span style="color:#4D9375;">false</span><span style="color:#666666;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//CORS解决跨域</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cors</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">cors</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cors</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">router</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">server running 127.0.0.1:80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//index.js</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./router</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//配置解析urlencoded请求体中间件(在路由中间件前使用)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">urlencoded</span><span style="color:#999999;">({</span><span style="color:#998418;">extended</span><span style="color:#999999;">:</span><span style="color:#1E754F;">false</span><span style="color:#999999;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//CORS解决跨域</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cors</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">cors</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cors</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">router</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">server running 127.0.0.1:80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//router.js</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">apiRouter</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">Router</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">apiRouter</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/get</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.query: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">GET 请求成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">success</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">data</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">apiRouter</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/post</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">req.body</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">POST 请求成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">success</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">data</span><span style="color:#666666;">:</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">apiRouter</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//router.js</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">apiRouter</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">Router</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">apiRouter</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/get</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.query: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">GET 请求成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">success</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">data</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">apiRouter</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/post</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">req.body</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">POST 请求成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">success</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">data</span><span style="color:#999999;">:</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">apiRouter</span></span></code></pre></div><h3 id="_1-cors-跨域资源共享" tabindex="-1">1. CORS 跨域资源共享 <a class="header-anchor" href="#_1-cors-跨域资源共享" aria-label="Permalink to &quot;1. CORS 跨域资源共享&quot;">​</a></h3><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502115641176.png" alt="image-20220502115641176"></p><h3 id="_2-cors-头部" tabindex="-1">2.CORS 头部 <a class="header-anchor" href="#_2-cors-头部" aria-label="Permalink to &quot;2.CORS 头部&quot;">​</a></h3><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502120846061.png" alt="image-20220502120846061"></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502120941415.png" alt="image-20220502120941415"></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502121028306.png" alt="image-20220502121028306"></p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502121159109.png" alt="image-20220502121159109"><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502120738921.png" alt="image-20220502120738921"></p><h2 id="八、node-连接数据库" tabindex="-1">八、Node 连接数据库 <a class="header-anchor" href="#八、node-连接数据库" aria-label="Permalink to &quot;八、Node 连接数据库&quot;">​</a></h2><h3 id="_1-配置-mysql-模块" tabindex="-1">1.配置 mysql 模块 <a class="header-anchor" href="#_1-配置-mysql-模块" aria-label="Permalink to &quot;1.配置 mysql 模块&quot;">​</a></h3><ul><li><p>安装 mysql 模块：\`npm i mysql</p></li><li><p>连接数据库并测试 mysql 是否连接成功</p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mysql</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mysql</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">db</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mysql</span><span style="color:#666666;">.</span><span style="color:#80A665;">createPool</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">host</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">127.0.0.1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">user</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">password</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">database</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mydb01</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//测试</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">select 1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">res: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//res:  [ RowDataPacket { &#39;1&#39;: 1 } ]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mysql</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mysql</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">db</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mysql</span><span style="color:#999999;">.</span><span style="color:#59873A;">createPool</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">host</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">127.0.0.1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">user</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">password</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">database</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mydb01</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//测试</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">select 1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">res: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//res:  [ RowDataPacket { &#39;1&#39;: 1 } ]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="_2-查询数据" tabindex="-1">2.查询数据 <a class="header-anchor" href="#_2-查询数据" aria-label="Permalink to &quot;2.查询数据&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//查询语句</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">qstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">select * from users</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">qstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">res: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#758575DD;">/*查询结果:</span></span>
+<span class="line"><span style="color:#758575DD;">res:  [</span></span>
+<span class="line"><span style="color:#758575DD;">  RowDataPacket { id: 1, name: &#39;张三&#39;, age: 19 },</span></span>
+<span class="line"><span style="color:#758575DD;">  RowDataPacket { id: 2, name: &#39;李四&#39;, age: 22 }</span></span>
+<span class="line"><span style="color:#758575DD;">]</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//查询语句</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">qstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">select * from users</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">qstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">,(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">res: </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*查询结果:</span></span>
+<span class="line"><span style="color:#A0ADA0;">res:  [</span></span>
+<span class="line"><span style="color:#A0ADA0;">  RowDataPacket { id: 1, name: &#39;张三&#39;, age: 19 },</span></span>
+<span class="line"><span style="color:#A0ADA0;">  RowDataPacket { id: 2, name: &#39;李四&#39;, age: 22 }</span></span>
+<span class="line"><span style="color:#A0ADA0;">]</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span></code></pre></div><h3 id="_3-插入数据" tabindex="-1">3.插入数据 <a class="header-anchor" href="#_3-插入数据" aria-label="Permalink to &quot;3.插入数据&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方式一:</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">zl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhaoliu</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">21</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//占位符的数量和表的列数需要一致,</span></span>
+<span class="line"><span style="color:#758575DD;">//否则报错ER_WRONG_VALUE_COUNT_ON_ROW: Column count doesn&#39;t match value count at row 1</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">istr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">insert into users values(?,?,?)</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">istr</span><span style="color:#666666;">,[</span><span style="color:#BD976A;">zl</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">,</span><span style="color:#BD976A;">zl</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">zl</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">],(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">res:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//res.affectedRows大于0表示插入成功</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#758575DD;">/* 返回结果:</span></span>
+<span class="line"><span style="color:#758575DD;">res: OkPacket {</span></span>
+<span class="line"><span style="color:#758575DD;">  fieldCount: 0,</span></span>
+<span class="line"><span style="color:#758575DD;">  affectedRows: 1,</span></span>
+<span class="line"><span style="color:#758575DD;">  insertId: 3,</span></span>
+<span class="line"><span style="color:#758575DD;">  serverStatus: 2,</span></span>
+<span class="line"><span style="color:#758575DD;">  warningCount: 0,</span></span>
+<span class="line"><span style="color:#758575DD;">  message: &#39;&#39;,</span></span>
+<span class="line"><span style="color:#758575DD;">  protocol41: true,</span></span>
+<span class="line"><span style="color:#758575DD;">  changedRows: 0</span></span>
+<span class="line"><span style="color:#758575DD;">}</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方式二:(便捷形式)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">istr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">insert into users set ?</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">istr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">zl</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#666666;">&gt;</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">插入成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方式一:</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">zl</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhaoliu</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">21</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//占位符的数量和表的列数需要一致,</span></span>
+<span class="line"><span style="color:#A0ADA0;">//否则报错ER_WRONG_VALUE_COUNT_ON_ROW: Column count doesn&#39;t match value count at row 1</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">istr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">insert into users values(?,?,?)</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">istr</span><span style="color:#999999;">,[</span><span style="color:#B07D48;">zl</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">,</span><span style="color:#B07D48;">zl</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">zl</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">],(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">res:</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//res.affectedRows大于0表示插入成功</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#A0ADA0;">/* 返回结果:</span></span>
+<span class="line"><span style="color:#A0ADA0;">res: OkPacket {</span></span>
+<span class="line"><span style="color:#A0ADA0;">  fieldCount: 0,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  affectedRows: 1,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  insertId: 3,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  serverStatus: 2,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  warningCount: 0,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  message: &#39;&#39;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  protocol41: true,</span></span>
+<span class="line"><span style="color:#A0ADA0;">  changedRows: 0</span></span>
+<span class="line"><span style="color:#A0ADA0;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方式二:(便捷形式)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">istr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">insert into users set ?</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">istr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">zl</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#999999;">&gt;</span><span style="color:#2F798A;">0</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">插入成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,);</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="_4-更新数据" tabindex="-1">4.更新数据 <a class="header-anchor" href="#_4-更新数据" aria-label="Permalink to &quot;4.更新数据&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方式一:</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">laoqi</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ustr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">update  users set name=?,age=? where id=?</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ustr</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">res: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">更新成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#758575DD;">//方式二:(便捷形式)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ustr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">update  users set ? where id=?</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ustr</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">user</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">更新成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方式一:</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">laoqi</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ustr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">update  users set name=?,age=? where id=?</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ustr</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">res: </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">更新成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方式二:(便捷形式)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ustr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">update  users set ? where id=?</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ustr</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">user</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">更新成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h3 id="_5-删除数据" tabindex="-1">5.删除数据 <a class="header-anchor" href="#_5-删除数据" aria-label="Permalink to &quot;5.删除数据&quot;">​</a></h3><ul><li>硬删除</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">delete from users where id=?</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//只有一个占位符可省略数组括号</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dstr</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">硬删除成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">delete from users where id=?</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//只有一个占位符可省略数组括号</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dstr</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">硬删除成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><ul><li>软删除</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">deleted</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dstr</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">update users set ? where id = ?</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#BD976A;">db</span><span style="color:#666666;">.</span><span style="color:#80A665;">query</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dstr</span><span style="color:#666666;">,[</span><span style="color:#BD976A;">user</span><span style="color:#666666;">,</span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">],(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">message</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#BD976A;">affectedRows</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">软删除成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">deleted</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dstr</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">update users set ? where id = ?</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#B07D48;">db</span><span style="color:#999999;">.</span><span style="color:#59873A;">query</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dstr</span><span style="color:#999999;">,[</span><span style="color:#B07D48;">user</span><span style="color:#999999;">,</span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">],(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">message</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#B07D48;">affectedRows</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">软删除成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h2 id="九、身份认证" tabindex="-1">九、身份认证 <a class="header-anchor" href="#九、身份认证" aria-label="Permalink to &quot;九、身份认证&quot;">​</a></h2><h3 id="_1-http-协议的特性" tabindex="-1">1. http 协议的特性 <a class="header-anchor" href="#_1-http-协议的特性" aria-label="Permalink to &quot;1. http 协议的特性&quot;">​</a></h3><ul><li><strong>无状态性</strong>：多个请求之间相互独立，服务器不会保留每次 HTTP 请求的状态</li><li><strong>无连接</strong>：服务器挨个处理访问队列里的访问，处理完一个就关闭连接</li></ul><h3 id="_2-cookie-特性" tabindex="-1">2.Cookie 特性 <a class="header-anchor" href="#_2-cookie-特性" aria-label="Permalink to &quot;2.Cookie 特性&quot;">​</a></h3><ul><li>自动发送</li><li>域名独立</li><li>过期时限</li><li>4KB 限制</li></ul><blockquote><p>注意：Cookie 不具有安全性，可以伪造，所以不要用 Cookie 保存隐私数据。</p></blockquote><h3 id="_3-session-认证" tabindex="-1">3.Session 认证 <a class="header-anchor" href="#_3-session-认证" aria-label="Permalink to &quot;3.Session 认证&quot;">​</a></h3><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502193259029.png" alt="image-20220502193259029"></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//配置 Session 中间件</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">session</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express-session</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">session</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">secret</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">usersession</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">resave</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">saveUninitialized</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 托管静态页面</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">static</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./pages</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#758575DD;">// 解析 POST 提交过来的表单数据</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">urlencoded</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">extended</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 登录的 API 接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api/login</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断用户提交的登录信息是否正确</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">username</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">admin</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#BD976A;">password</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">000000</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">登录失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//将登录成功后的用户信息，保存到 Session 中(express-session配置后才有)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 用户的信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#BD976A;">islogin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 用户的登录状态</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">登录成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 获取用户姓名的接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api/username</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//从 Session 中获取用户的名称，响应给客户端</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#BD976A;">islogin</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fail</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">success</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">username</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#666666;">.</span><span style="color:#BD976A;">username</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 退出登录的接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api/logout</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//清空 Session 信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">session</span><span style="color:#666666;">.</span><span style="color:#80A665;">destroy</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">msg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">退出登录成功</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 调用 app.listen 方法，指定端口号并启动web服务器</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Express server running at http://127.0.0.1:80</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//配置 Session 中间件</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">session</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express-session</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">session</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">secret</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">usersession</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">resave</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">saveUninitialized</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 托管静态页面</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">static</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./pages</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 解析 POST 提交过来的表单数据</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">urlencoded</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">extended</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#999999;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 登录的 API 接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api/login</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断用户提交的登录信息是否正确</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">username</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">admin</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#B07D48;">password</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">000000</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">登录失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//将登录成功后的用户信息，保存到 Session 中(express-session配置后才有)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 用户的信息</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#B07D48;">islogin</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 用户的登录状态</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">登录成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 获取用户姓名的接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api/username</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//从 Session 中获取用户的名称，响应给客户端</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#B07D48;">islogin</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fail</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">success</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">username</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#999999;">.</span><span style="color:#B07D48;">username</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 退出登录的接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api/logout</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//清空 Session 信息</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">session</span><span style="color:#999999;">.</span><span style="color:#59873A;">destroy</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">msg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">退出登录成功</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 调用 app.listen 方法，指定端口号并启动web服务器</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Express server running at http://127.0.0.1:80</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><blockquote><p>Session 认证弊端：需要配合 Cookie，Cookie 不支持跨域，需要做额外配置，才能实现跨域 Session 认证。</p></blockquote><h3 id="_4-jwt-认证" tabindex="-1">4.JWT 认证 <a class="header-anchor" href="#_4-jwt-认证" aria-label="Permalink to &quot;4.JWT 认证&quot;">​</a></h3><p><strong>原理</strong>：服务端通多用户信息生成 Token，发送并保存在客户端，服务器通过还原 Token 来认证用户身份。</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502195232085.png" alt="image-20220502195232085"></p><p>JWT 组成部分：Header（头部）、Payload（有效载荷)、Signature（签名）。形式：<code>Header.Payload.Signature</code></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220502195537066.png" alt="image-20220502195537066"></p><p><strong>JWT 使用</strong></p><p>安装<code>jsonwebtoken</code>、<code>express-jwt</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">jwt</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">jsonwebtoken</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">expressJWT</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">express-jwt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 允许跨域资源共享</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cors</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">cors</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#80A665;">cors</span><span style="color:#666666;">())</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 解析 post 表单数据的中间件</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bodyParser</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">body-parser</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#BD976A;">bodyParser</span><span style="color:#666666;">.</span><span style="color:#80A665;">urlencoded</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">extended</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 02：定义 secret 密钥，建议将密钥命名为 secretKey</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">secretKey</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">coder8888</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 04：注册将 JWT 字符串解析还原成 JSON 对象的中间件</span></span>
+<span class="line"><span style="color:#758575DD;">// 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#80A665;">expressJWT</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">secret</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">secretKey</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}).</span><span style="color:#80A665;">unless</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">path</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#E6CC77;">\\/</span><span style="color:#C4704F;">api</span><span style="color:#E6CC77;">\\/</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 登录接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/api/login</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 将 req.body 请求体中的数据，转存为 userinfo 常量</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userinfo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 登录失败</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">userinfo</span><span style="color:#666666;">.</span><span style="color:#BD976A;">username</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">admin</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userinfo</span><span style="color:#666666;">.</span><span style="color:#BD976A;">password</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">000000</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">400</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">登录失败！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 登录成功</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端</span></span>
+<span class="line"><span style="color:#758575DD;">   参数1：用户的信息对象</span></span>
+<span class="line"><span style="color:#758575DD;">   参数2：加密的秘钥</span></span>
+<span class="line"><span style="color:#758575DD;">   参数3：配置对象，可以配置当前 token 的有效期</span></span>
+<span class="line"><span style="color:#758575DD;">   记住：千万不要把密码加密到 token 字符中*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tokenStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">jwt</span><span style="color:#666666;">.</span><span style="color:#80A665;">sign</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">username</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">userinfo</span><span style="color:#666666;">.</span><span style="color:#BD976A;">username</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">secretKey</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">expiresIn</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">30s</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">登录成功！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">token</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tokenStr</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 要发送给客户端的 token 字符串</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 这是一个有权限的 API 接口</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/admin/getinfo</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">获取用户信息成功！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">data</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">user</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 要发送给客户端的用户信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">((</span><span style="color:#BD976A;">err</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 这次错误是由 token 解析失败导致的</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">UnauthorizedError</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">401</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">无效的token</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">status</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">未知的错误</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">8888</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Express server running at http://127.0.0.1:8888</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">jwt</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">jsonwebtoken</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">expressJWT</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">express-jwt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 允许跨域资源共享</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cors</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">cors</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#59873A;">cors</span><span style="color:#999999;">())</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 解析 post 表单数据的中间件</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bodyParser</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">body-parser</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B07D48;">bodyParser</span><span style="color:#999999;">.</span><span style="color:#59873A;">urlencoded</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">extended</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#999999;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 02：定义 secret 密钥，建议将密钥命名为 secretKey</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">secretKey</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">coder8888</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 04：注册将 JWT 字符串解析还原成 JSON 对象的中间件</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#59873A;">expressJWT</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">secret</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">secretKey</span><span style="color:#393A34;"> </span><span style="color:#999999;">}).</span><span style="color:#59873A;">unless</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">path</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#BDA437;">\\/</span><span style="color:#AB5E3F;">api</span><span style="color:#BDA437;">\\/</span><span style="color:#B5695999;">/</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">}))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 登录接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/api/login</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 将 req.body 请求体中的数据，转存为 userinfo 常量</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userinfo</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 登录失败</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">userinfo</span><span style="color:#999999;">.</span><span style="color:#B07D48;">username</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">admin</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userinfo</span><span style="color:#999999;">.</span><span style="color:#B07D48;">password</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">000000</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">400</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">登录失败！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 登录成功</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端</span></span>
+<span class="line"><span style="color:#A0ADA0;">   参数1：用户的信息对象</span></span>
+<span class="line"><span style="color:#A0ADA0;">   参数2：加密的秘钥</span></span>
+<span class="line"><span style="color:#A0ADA0;">   参数3：配置对象，可以配置当前 token 的有效期</span></span>
+<span class="line"><span style="color:#A0ADA0;">   记住：千万不要把密码加密到 token 字符中*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tokenStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">jwt</span><span style="color:#999999;">.</span><span style="color:#59873A;">sign</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#998418;">username</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">userinfo</span><span style="color:#999999;">.</span><span style="color:#B07D48;">username</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">secretKey</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">expiresIn</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">30s</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">登录成功！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">token</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tokenStr</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 要发送给客户端的 token 字符串</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 这是一个有权限的 API 接口</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/admin/getinfo</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">获取用户信息成功！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">data</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">user</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 要发送给客户端的用户信息</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">((</span><span style="color:#B07D48;">err</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 这次错误是由 token 解析失败导致的</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">UnauthorizedError</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">401</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">无效的token</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">status</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">未知的错误</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">8888</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Express server running at http://127.0.0.1:8888</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div>`,112),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/BackEnd_NodeJS_Node\345\255\246\344\271\240\347\254\224\350\256\260.md.f1b234ff.lean.js" "b/assets/BackEnd_NodeJS_Node\345\255\246\344\271\240\347\254\224\350\256\260.md.f1b234ff.lean.js"
new file mode 100644
index 00000000..10b299da
--- /dev/null
+++ "b/assets/BackEnd_NodeJS_Node\345\255\246\344\271\240\347\254\224\350\256\260.md.f1b234ff.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/NodeJS/Node学习笔记.md","filePath":"BackEnd/NodeJS/Node学习笔记.md"}'),p={name:"BackEnd/NodeJS/Node学习笔记.md"},o=l("",112),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/BackEnd_NodeJS_Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md.faa27b4e.js" "b/assets/BackEnd_NodeJS_Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md.faa27b4e.js"
new file mode 100644
index 00000000..692dd6e0
--- /dev/null
+++ "b/assets/BackEnd_NodeJS_Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md.faa27b4e.js"
@@ -0,0 +1,145 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"Node 简单上传文件","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/NodeJS/Node简单上传文件.md","filePath":"BackEnd/NodeJS/Node简单上传文件.md"}'),p={name:"BackEnd/NodeJS/Node简单上传文件.md"},o=l(`<h1 id="node-简单上传文件" tabindex="-1">Node 简单上传文件 <a class="header-anchor" href="#node-简单上传文件" aria-label="Permalink to &quot;Node 简单上传文件&quot;">​</a></h1><h2 id="vue-前端代码" tabindex="-1">Vue 前端代码 <a class="header-anchor" href="#vue-前端代码" aria-label="Permalink to &quot;Vue 前端代码&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">axios</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">axios</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onUpload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">formData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">FormData</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">formData</span><span style="color:#666666;">.</span><span style="color:#80A665;">append</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fileName</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">.</span><span style="color:#BD976A;">files</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//fileName:后端接收的参数名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ formData ]-6</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">formData</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">axios</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">http://localhost:3000/upload/postFile</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">formData</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">headers</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Content-Type</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">multipart/form-data</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ res ]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ err ]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">file</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">@change</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">onUpload</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">axios</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">axios</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onUpload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">formData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">FormData</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">formData</span><span style="color:#999999;">.</span><span style="color:#59873A;">append</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fileName</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">.</span><span style="color:#B07D48;">files</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//fileName:后端接收的参数名</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ formData ]-6</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">formData</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">axios</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">http://localhost:3000/upload/postFile</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">formData</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">headers</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Content-Type</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">multipart/form-data</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ res ]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ err ]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">file</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">@change</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">onUpload</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="express-后端代码" tabindex="-1">Express 后端代码 <a class="header-anchor" href="#express-后端代码" aria-label="Permalink to &quot;Express 后端代码&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">express</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">multer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">multer</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">express</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">express</span><span style="color:#666666;">.</span><span style="color:#80A665;">Router</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">use</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/upload</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">multer</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">storage</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">multer</span><span style="color:#666666;">.</span><span style="color:#80A665;">diskStorage</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//设置文件存储位置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">destination</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cb</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">date</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">year</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">date</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFullYear</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">month</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">date</span><span style="color:#666666;">.</span><span style="color:#80A665;">getMonth</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">().</span><span style="color:#80A665;">padStart</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">day</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">date</span><span style="color:#666666;">.</span><span style="color:#80A665;">getDate</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dir</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./public/uploads/</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">year</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">month</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">day</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//判断目录是否存在，没有则创建</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">existsSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">mkdirSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">recursive</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//dir就是上传文件存放的目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">cb</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dir</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//设置文件名称</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">filename</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cb</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">// 获取原来的文件名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">originalname</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//获取文件前缀</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prefix</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldName</span><span style="color:#666666;">.</span><span style="color:#80A665;">startsWith</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldName</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">prefix</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">-</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Date</span><span style="color:#666666;">.</span><span style="color:#80A665;">now</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">extname</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">originalname</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//fileName就是上传文件的文件名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">cb</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileName</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">//访问地址为:localhost:3000/upload/index,操作界面,使用 Vue 时可不需要这个接口</span></span>
+<span class="line"><span style="color:#BD976A;">router</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/index</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//接口地址为:localhost:3000/upload/postFile ,input的name属性值为imgFile和upload.single(&quot;imgFile&quot;)对应</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">send</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">  &lt;form action=&quot;http://localhost:3000/upload/postFile&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  &lt;input id=&quot;postFile&quot; type=&quot;file&quot; name=&quot;fileName&quot; multiple&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  &lt;button type=&quot;submit&quot;&gt;上传&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;/form&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#BD976A;">router</span><span style="color:#666666;">.</span><span style="color:#80A665;">post</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">/postFile</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upload</span><span style="color:#666666;">.</span><span style="color:#80A665;">single</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fileName</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">req</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">json</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">file</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">req</span><span style="color:#666666;">.</span><span style="color:#BD976A;">file</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">app</span><span style="color:#666666;">.</span><span style="color:#80A665;">listen</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">server is running at http://localhost:3000</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">express</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">multer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">multer</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">express</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">express</span><span style="color:#999999;">.</span><span style="color:#59873A;">Router</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">use</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/upload</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">multer</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">storage</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">multer</span><span style="color:#999999;">.</span><span style="color:#59873A;">diskStorage</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//设置文件存储位置</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">destination</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cb</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">date</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">year</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">date</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFullYear</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">month</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">date</span><span style="color:#999999;">.</span><span style="color:#59873A;">getMonth</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">().</span><span style="color:#59873A;">padStart</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">day</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">date</span><span style="color:#999999;">.</span><span style="color:#59873A;">getDate</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dir</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./public/uploads/</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">year</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">month</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">day</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//判断目录是否存在，没有则创建</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">existsSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">mkdirSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">recursive</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//dir就是上传文件存放的目录</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">cb</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dir</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//设置文件名称</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">filename</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cb</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">// 获取原来的文件名</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldName</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">originalname</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//获取文件前缀</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prefix</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldName</span><span style="color:#999999;">.</span><span style="color:#59873A;">startsWith</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldName</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldName</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileName</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">prefix</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">-</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Date</span><span style="color:#999999;">.</span><span style="color:#59873A;">now</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">extname</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">originalname</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//fileName就是上传文件的文件名</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">cb</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileName</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//访问地址为:localhost:3000/upload/index,操作界面,使用 Vue 时可不需要这个接口</span></span>
+<span class="line"><span style="color:#B07D48;">router</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/index</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//接口地址为:localhost:3000/upload/postFile ,input的name属性值为imgFile和upload.single(&quot;imgFile&quot;)对应</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">send</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">  &lt;form action=&quot;http://localhost:3000/upload/postFile&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  &lt;input id=&quot;postFile&quot; type=&quot;file&quot; name=&quot;fileName&quot; multiple&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  &lt;button type=&quot;submit&quot;&gt;上传&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;/form&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#B07D48;">router</span><span style="color:#999999;">.</span><span style="color:#59873A;">post</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">/postFile</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upload</span><span style="color:#999999;">.</span><span style="color:#59873A;">single</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fileName</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">req</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">json</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">file</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">req</span><span style="color:#999999;">.</span><span style="color:#B07D48;">file</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">app</span><span style="color:#999999;">.</span><span style="color:#59873A;">listen</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">server is running at http://localhost:3000</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><p><strong>可以借助接口调试工具测试或直接访问：<code>http://localhost:3000/upload/index</code></strong></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302131417657.png" alt="image-20230213141712478"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302131418470.png" alt="image-20230213141820443"></p>`,8),e=[o];function t(c,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/BackEnd_NodeJS_Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md.faa27b4e.lean.js" "b/assets/BackEnd_NodeJS_Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md.faa27b4e.lean.js"
new file mode 100644
index 00000000..ff275f1a
--- /dev/null
+++ "b/assets/BackEnd_NodeJS_Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.md.faa27b4e.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"Node 简单上传文件","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/NodeJS/Node简单上传文件.md","filePath":"BackEnd/NodeJS/Node简单上传文件.md"}'),p={name:"BackEnd/NodeJS/Node简单上传文件.md"},o=l("",8),e=[o];function t(c,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/BackEnd_Server_Docker\345\255\246\344\271\240\347\254\224\350\256\260.md.d29feca6.js" "b/assets/BackEnd_Server_Docker\345\255\246\344\271\240\347\254\224\350\256\260.md.d29feca6.js"
new file mode 100644
index 00000000..e0c4e9d0
--- /dev/null
+++ "b/assets/BackEnd_Server_Docker\345\255\246\344\271\240\347\254\224\350\256\260.md.d29feca6.js"
@@ -0,0 +1,221 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/Server/Docker学习笔记.md","filePath":"BackEnd/Server/Docker学习笔记.md"}'),p={name:"BackEnd/Server/Docker学习笔记.md"},o=l(`<h2 id="一、解决痛点" tabindex="-1">一、解决痛点 <a class="header-anchor" href="#一、解决痛点" aria-label="Permalink to &quot;一、解决痛点&quot;">​</a></h2><ol><li>环境不一致</li><li>版本不一样</li><li>配置不一致，配置费力费时</li></ol><blockquote><p>把源码+配置+环境+版本打包成镜像，装载在Dokcer容器引擎上，达到跨平台无缝接轨运作。 一次镜像，处处运行，从搬家到搬楼。</p></blockquote><h2 id="二、优点和应用" tabindex="-1">二、优点和应用 <a class="header-anchor" href="#二、优点和应用" aria-label="Permalink to &quot;二、优点和应用&quot;">​</a></h2><ol><li>便捷升级和快速扩容</li><li>更简单的系统运维</li><li>镜像小、更高效的计算资源</li><li>更快的应用交付和平缓迁移</li><li>利用宿主机内核，不需要加载操作系统OS内核</li></ol><h2 id="三、基本组成" tabindex="-1">三、基本组成 <a class="header-anchor" href="#三、基本组成" aria-label="Permalink to &quot;三、基本组成&quot;">​</a></h2><ol><li>镜像：一个只读的模板，用于创建容器，一个镜像可以创建多个容器。</li><li>容器：镜像创建出来的虚拟化运行环境容器实例（简易的Linux环境）。</li><li>仓库：集中存放镜像的场所，分为公开库和私有库。</li></ol><h2 id="四、工作原理" tabindex="-1">四、工作原理 <a class="header-anchor" href="#四、工作原理" aria-label="Permalink to &quot;四、工作原理&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032203456.png" alt=""><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032204209.png" alt=""></p><h2 id="五、centos安装docker" tabindex="-1">五、CentOS安装Docker <a class="header-anchor" href="#五、centos安装docker" aria-label="Permalink to &quot;五、CentOS安装Docker&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">sudo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">yum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">yum-utils</span></span>
+<span class="line"><span style="color:#80A665;">yum-config-manager</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--add-repo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo</span></span>
+<span class="line"><span style="color:#80A665;">sudo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">yum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker-ce</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker-ce-cli</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">containerd.io</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker-compose-plugin</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">version</span></span>
+<span class="line"><span style="color:#80A665;">systemctl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#启动</span></span>
+<span class="line"><span style="color:#80A665;">ps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-ef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">grep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">hello-world</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#测试</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">sudo</span><span style="color:#393A34;"> </span><span style="color:#B56959;">yum</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-y</span><span style="color:#393A34;"> </span><span style="color:#B56959;">yum-utils</span></span>
+<span class="line"><span style="color:#59873A;">yum-config-manager</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--add-repo</span><span style="color:#393A34;"> </span><span style="color:#B56959;">http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo</span></span>
+<span class="line"><span style="color:#59873A;">sudo</span><span style="color:#393A34;"> </span><span style="color:#B56959;">yum</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker-ce</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker-ce-cli</span><span style="color:#393A34;"> </span><span style="color:#B56959;">containerd.io</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker-compose-plugin</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">version</span></span>
+<span class="line"><span style="color:#59873A;">systemctl</span><span style="color:#393A34;"> </span><span style="color:#B56959;">start</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#启动</span></span>
+<span class="line"><span style="color:#59873A;">ps</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-ef</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">grep</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#B56959;">hello-world</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#测试</span></span></code></pre></div><h2 id="六、阿里云镜像加速" tabindex="-1">六、阿里云镜像加速 <a class="header-anchor" href="#六、阿里云镜像加速" aria-label="Permalink to &quot;六、阿里云镜像加速&quot;">​</a></h2><p><a href="https://blog.csdn.net/weixin_45764765/article/details/128367219" target="_blank" rel="noreferrer">参考教程</a></p><h2 id="七、常用命令" tabindex="-1">七、常用命令 <a class="header-anchor" href="#七、常用命令" aria-label="Permalink to &quot;七、常用命令&quot;">​</a></h2><h3 id="_1-docker" tabindex="-1">1. Docker <a class="header-anchor" href="#_1-docker" aria-label="Permalink to &quot;1. Docker&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">systemctl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">enable</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#开机启动</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">system</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">df</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#负载查看</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">systemctl</span><span style="color:#393A34;"> </span><span style="color:#B56959;">enable</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#开机启动</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">system</span><span style="color:#393A34;"> </span><span style="color:#B56959;">df</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#负载查看</span></span></code></pre></div><h3 id="_2-镜像" tabindex="-1">2. 镜像 <a class="header-anchor" href="#_2-镜像" aria-label="Permalink to &quot;2. 镜像&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">images</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#展示本地镜像 -a 所有，-q只显示ID</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">mongo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#搜索镜像</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">redis</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--limit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#展示Stars排名前五条</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">镜像名[:TAG]</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#下载镜像，没有版本号默认最新</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rmi</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">hello-world</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#强制删除镜像</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">images</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#展示本地镜像 -a 所有，-q只显示ID</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">search</span><span style="color:#393A34;"> </span><span style="color:#B56959;">mongo</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#搜索镜像</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">search</span><span style="color:#393A34;"> </span><span style="color:#B56959;">redis</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--limit</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#展示Stars排名前五条</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull</span><span style="color:#393A34;"> </span><span style="color:#B56959;">镜像名[:TAG]</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#下载镜像，没有版本号默认最新</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rmi</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-f</span><span style="color:#393A34;"> </span><span style="color:#B56959;">hello-world</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#强制删除镜像</span></span></code></pre></div><blockquote><p>虚悬镜像：构建或删除过程中产生的仓库名和标签都为none的镜像，没啥用建议删除 <code>docker image ls -f dangling=true</code> 删除：<code>docker image prune</code></p></blockquote><p><strong>生成新镜像</strong></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">agt-get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">update</span></span>
+<span class="line"><span style="color:#80A665;">apt-get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">vim</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">commit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-m=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vim is ok</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-a=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fxj</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">myubt:1.1</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">agt-get</span><span style="color:#393A34;"> </span><span style="color:#B56959;">update</span></span>
+<span class="line"><span style="color:#59873A;">apt-get</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-y</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#B56959;">vim</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">commit</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-m=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vim is ok</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-a=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fxj</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#B56959;">myubt:1.1</span></span></code></pre></div><p><strong>本地镜像推送到阿里云</strong></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#发布和拉取</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">login</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--username=yunzhishangfxj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">registry.cn-hangzhou.aliyuncs.com</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> [ImageId] registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:</span><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">镜像版本号</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:[镜像版本号]</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:1.1</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#记得带版本</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#发布和拉取</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">login</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--username=yunzhishangfxj</span><span style="color:#393A34;"> </span><span style="color:#B56959;">registry.cn-hangzhou.aliyuncs.com</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> [ImageId] registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:</span><span style="color:#999999;">[</span><span style="color:#393A34;">镜像版本号</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span><span style="color:#393A34;"> </span><span style="color:#B56959;">registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:[镜像版本号]</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;"> </span><span style="color:#B56959;">registry.cn-hangzhou.aliyuncs.com/fanxj/mubt:1.1</span><span style="color:#393A34;">  </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#记得带版本</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032206243.png" alt=""></p><h3 id="_3-容器" tabindex="-1">3. 容器 <a class="header-anchor" href="#_3-容器" aria-label="Permalink to &quot;3. 容器&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#列出正在运行容器 -a -s</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ub01</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">ubuntu</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">#-p: 外部主机端口:docker容器端口 -P:随机分配主机端口映射到内部容器端口</span></span>
+<span class="line"><span style="color:#758575DD;">#-i:交互式 -t:输出伪终端 -d:后台运行 --name=&quot;容器名&quot; /bin/bash:指定命令解释器</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">exit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#退出，ctrl+q+p:退出但不停止</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">exec</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#重新进容器，exit退出不会停止容器</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id或容器名</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">restart</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">stop</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">kill</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#强制停止</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id或容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#删除已停止容器 、未停止 -f 强制删除</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">$(</span><span style="color:#80A665;">docker</span><span style="color:#C98A7D;"> ps </span><span style="color:#C99076;">-a</span><span style="color:#C98A7D;"> </span><span style="color:#C99076;">-q</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-q</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">xargs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#一次性删除多个再运行的</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ps</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#列出正在运行容器 -a -s</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ub01</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">  </span><span style="color:#B56959;">ubuntu</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">#-p: 外部主机端口:docker容器端口 -P:随机分配主机端口映射到内部容器端口</span></span>
+<span class="line"><span style="color:#A0ADA0;">#-i:交互式 -t:输出伪终端 -d:后台运行 --name=&quot;容器名&quot; /bin/bash:指定命令解释器</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">exit</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#退出，ctrl+q+p:退出但不停止</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">exec</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#重新进容器，exit退出不会停止容器</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">start</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id或容器名</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">restart</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">stop</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">kill</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#强制停止</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id或容器名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#删除已停止容器 、未停止 -f 强制删除</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-f</span><span style="color:#393A34;"> </span><span style="color:#999999;">$(</span><span style="color:#59873A;">docker</span><span style="color:#B56959;"> ps </span><span style="color:#A65E2B;">-a</span><span style="color:#B56959;"> </span><span style="color:#A65E2B;">-q</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ps</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-a</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-q</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">xargs</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#一次性删除多个再运行的</span></span></code></pre></div><h4 id="启动守护式" tabindex="-1">启动守护式 <a class="header-anchor" href="#启动守护式" aria-label="Permalink to &quot;启动守护式&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#前台交互启动</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#后台守护启动</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#前台交互启动</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#后台守护启动</span></span></code></pre></div><h4 id="查看容器日志" tabindex="-1">查看容器日志 <a class="header-anchor" href="#查看容器日志" aria-label="Permalink to &quot;查看容器日志&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">logs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看容器日志</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">inspect</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看容器内部细节</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">logs</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看容器日志</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">inspect</span><span style="color:#393A34;">  </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看容器内部细节</span></span></code></pre></div><h4 id="容器备份到主机" tabindex="-1">容器备份到主机 <a class="header-anchor" href="#容器备份到主机" aria-label="Permalink to &quot;容器备份到主机&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">cp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id:容器文件路径</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">目的主机路径</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#备份文件</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">xxx.tar</span><span style="color:#DBD7CAEE;">	 </span><span style="color:#758575DD;">#备份整个容器</span></span>
+<span class="line"><span style="color:#80A665;">cat</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ub.tar</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">恢复后的镜像名</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#从tar包中恢复成镜像</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-it</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">镜像id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#重新恢复容器</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">cp</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id:容器文件路径</span><span style="color:#393A34;"> </span><span style="color:#B56959;">目的主机路径</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#备份文件</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">export</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B56959;">xxx.tar</span><span style="color:#393A34;">	 </span><span style="color:#A0ADA0;">#备份整个容器</span></span>
+<span class="line"><span style="color:#59873A;">cat</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ub.tar</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">import</span><span style="color:#393A34;"> </span><span style="color:#B56959;">-</span><span style="color:#393A34;"> </span><span style="color:#B56959;">恢复后的镜像名</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#从tar包中恢复成镜像</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-it</span><span style="color:#393A34;">  </span><span style="color:#B56959;">镜像id</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#重新恢复容器</span></span></code></pre></div><h4 id="容器卷" tabindex="-1">容器卷 <a class="header-anchor" href="#容器卷" aria-label="Permalink to &quot;容器卷&quot;">​</a></h4><h2 id="八、dockerfile编写" tabindex="-1">八、<a href="https://docs.docker.com/engine/reference/builder/#from" target="_blank" rel="noreferrer">Dockerfile</a>编写 <a class="header-anchor" href="#八、dockerfile编写" aria-label="Permalink to &quot;八、[Dockerfile](https://docs.docker.com/engine/reference/builder/#from)编写&quot;">​</a></h2><div class="language-dockerfile vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">dockerfile</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#基础镜像，基于什么镜像什么版本作为模版 </span></span>
+<span class="line"><span style="color:#4D9375;">From</span><span style="color:#DBD7CAEE;"> xxx:1.1 </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#构建参数，运行时无效，可以构建时候临时修改变量（docker build --build-arg B=10）</span></span>
+<span class="line"><span style="color:#4D9375;">ARG</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#定义运行时环境变量，运行时一直生效后续可以引用， ARG变量可以传递给ENV</span></span>
+<span class="line"><span style="color:#4D9375;">ENV</span><span style="color:#DBD7CAEE;"> NGINX_HOME /usr/local/nginx</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定进入容器后的默认工作目录（落脚点）</span></span>
+<span class="line"><span style="color:#4D9375;">WORKDIR</span><span style="color:#DBD7CAEE;"> $NGINX_HOME</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#将宿主机的文件拷贝到镜像</span></span>
+<span class="line"><span style="color:#4D9375;">COPY</span><span style="color:#DBD7CAEE;"> &lt;src&gt;  &lt;dest&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#将主机目录下的文件拷贝到镜像，且会自动处理URL和解压tar压缩包</span></span>
+<span class="line"><span style="color:#4D9375;">ADD</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#Dockerfile构建时运行(docker build)， </span></span>
+<span class="line"><span style="color:#4D9375;">RUN</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#容器启动后(docker run)执行的脚本，多个命令时只会生效最后一个???</span></span>
+<span class="line"><span style="color:#758575DD;">#会被docker run之后的参数替换(/bin/bash)</span></span>
+<span class="line"><span style="color:#4D9375;">CMD</span><span style="color:#DBD7CAEE;">  [</span><span style="color:#C98A7D;">&quot;/etc/nginx/nginx.conf&quot;</span><span style="color:#DBD7CAEE;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#类似CMD,但是不会(docker run)后面命令覆盖，而且可以接收CMD传的参数</span></span>
+<span class="line"><span style="color:#4D9375;">ENTRYPOINT</span><span style="color:#DBD7CAEE;"> [</span><span style="color:#C98A7D;">&quot;nginx&quot;</span><span style="color:#DBD7CAEE;">,</span><span style="color:#C98A7D;">&quot;-c&quot;</span><span style="color:#DBD7CAEE;">] ==&gt; nginx -c /etc/nginx/nginx.conf</span></span>
+<span class="line"><span style="color:#758575DD;">#docker run nginx:test -c /etc/nginx/new.conf ==&gt; nginx -c /etc/nginx/new.conf</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">一般语句为：</span></span>
+<span class="line"><span style="color:#4D9375;">FROM</span><span style="color:#DBD7CAEE;"> WORKDIR COPY-ADD RUN CMD-ENTRYPOINT</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#暴露镜像的指定端口</span></span>
+<span class="line"><span style="color:#4D9375;">EXPOSE</span><span style="color:#DBD7CAEE;"> 9999</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定容器卷</span></span>
+<span class="line"><span style="color:#4D9375;">VOLUME</span><span style="color:#DBD7CAEE;"> [</span><span style="color:#C98A7D;">&quot;/var/www&quot;</span><span style="color:#DBD7CAEE;">, </span><span style="color:#C98A7D;">&quot;/var/log/apache2&quot;</span><span style="color:#DBD7CAEE;">, </span><span style="color:#C98A7D;">&quot;/etc/apache2&quot;</span><span style="color:#DBD7CAEE;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定元数据，标识容器便于查找</span></span>
+<span class="line"><span style="color:#4D9375;">LABEL</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#当前镜像构建的时候不会执行，基于当前镜像的镜像去构建的时候才会在FROM后执行</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">ONBUILD </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定容器使用什么信号，一般指定信号名</span></span>
+<span class="line"><span style="color:#4D9375;">STOPSIGNAL</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#检查容易的健康状态</span></span>
+<span class="line"><span style="color:#4D9375;">HEALTHCHECK</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#指定命令解释器 linux为/bin/sh，windows为cmd</span></span>
+<span class="line"><span style="color:#4D9375;">SHELL</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#用于指定RUN CMD等指令运行时的用户身份，不指定是root(用户名:用户组 或 USER 用户id:组id)</span></span>
+<span class="line"><span style="color:#4D9375;">USER</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#基础镜像，基于什么镜像什么版本作为模版 </span></span>
+<span class="line"><span style="color:#1E754F;">From</span><span style="color:#393A34;"> xxx:1.1 </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#构建参数，运行时无效，可以构建时候临时修改变量（docker build --build-arg B=10）</span></span>
+<span class="line"><span style="color:#1E754F;">ARG</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#定义运行时环境变量，运行时一直生效后续可以引用， ARG变量可以传递给ENV</span></span>
+<span class="line"><span style="color:#1E754F;">ENV</span><span style="color:#393A34;"> NGINX_HOME /usr/local/nginx</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定进入容器后的默认工作目录（落脚点）</span></span>
+<span class="line"><span style="color:#1E754F;">WORKDIR</span><span style="color:#393A34;"> $NGINX_HOME</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#将宿主机的文件拷贝到镜像</span></span>
+<span class="line"><span style="color:#1E754F;">COPY</span><span style="color:#393A34;"> &lt;src&gt;  &lt;dest&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#将主机目录下的文件拷贝到镜像，且会自动处理URL和解压tar压缩包</span></span>
+<span class="line"><span style="color:#1E754F;">ADD</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#Dockerfile构建时运行(docker build)， </span></span>
+<span class="line"><span style="color:#1E754F;">RUN</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#容器启动后(docker run)执行的脚本，多个命令时只会生效最后一个???</span></span>
+<span class="line"><span style="color:#A0ADA0;">#会被docker run之后的参数替换(/bin/bash)</span></span>
+<span class="line"><span style="color:#1E754F;">CMD</span><span style="color:#393A34;">  [</span><span style="color:#B56959;">&quot;/etc/nginx/nginx.conf&quot;</span><span style="color:#393A34;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#类似CMD,但是不会(docker run)后面命令覆盖，而且可以接收CMD传的参数</span></span>
+<span class="line"><span style="color:#1E754F;">ENTRYPOINT</span><span style="color:#393A34;"> [</span><span style="color:#B56959;">&quot;nginx&quot;</span><span style="color:#393A34;">,</span><span style="color:#B56959;">&quot;-c&quot;</span><span style="color:#393A34;">] ==&gt; nginx -c /etc/nginx/nginx.conf</span></span>
+<span class="line"><span style="color:#A0ADA0;">#docker run nginx:test -c /etc/nginx/new.conf ==&gt; nginx -c /etc/nginx/new.conf</span></span>
+<span class="line"><span style="color:#393A34;">一般语句为：</span></span>
+<span class="line"><span style="color:#1E754F;">FROM</span><span style="color:#393A34;"> WORKDIR COPY-ADD RUN CMD-ENTRYPOINT</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#暴露镜像的指定端口</span></span>
+<span class="line"><span style="color:#1E754F;">EXPOSE</span><span style="color:#393A34;"> 9999</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定容器卷</span></span>
+<span class="line"><span style="color:#1E754F;">VOLUME</span><span style="color:#393A34;"> [</span><span style="color:#B56959;">&quot;/var/www&quot;</span><span style="color:#393A34;">, </span><span style="color:#B56959;">&quot;/var/log/apache2&quot;</span><span style="color:#393A34;">, </span><span style="color:#B56959;">&quot;/etc/apache2&quot;</span><span style="color:#393A34;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定元数据，标识容器便于查找</span></span>
+<span class="line"><span style="color:#1E754F;">LABEL</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#当前镜像构建的时候不会执行，基于当前镜像的镜像去构建的时候才会在FROM后执行</span></span>
+<span class="line"><span style="color:#393A34;">ONBUILD </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定容器使用什么信号，一般指定信号名</span></span>
+<span class="line"><span style="color:#1E754F;">STOPSIGNAL</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#检查容易的健康状态</span></span>
+<span class="line"><span style="color:#1E754F;">HEALTHCHECK</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#指定命令解释器 linux为/bin/sh，windows为cmd</span></span>
+<span class="line"><span style="color:#1E754F;">SHELL</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#用于指定RUN CMD等指令运行时的用户身份，不指定是root(用户名:用户组 或 USER 用户id:组id)</span></span>
+<span class="line"><span style="color:#1E754F;">USER</span></span></code></pre></div><h2 id="九、docker网络" tabindex="-1">九、Docker网络 <a class="header-anchor" href="#九、docker网络" aria-label="Permalink to &quot;九、Docker网络&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ls</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看网络</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">inspect</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">网络名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看网络源数据</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">网络名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#删除网络</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">create</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">网络名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#新建网络</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">inspect</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">bridge</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">grep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docker0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看网卡信息</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;"># --network 不指定默认就是网桥模式</span></span>
+<span class="line"><span style="color:#758575DD;">#host主机模式(不能指定端口，共享宿主机的ip，没有自己的ip，http://宿主机ip:端口)</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">host</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">镜像名</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">none</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">镜像名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#只有lo网卡</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ls</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看网络</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">inspect</span><span style="color:#393A34;"> </span><span style="color:#B56959;">网络名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看网络源数据</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">网络名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#删除网络</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">create</span><span style="color:#393A34;"> </span><span style="color:#B56959;">网络名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#新建网络</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">inspect</span><span style="color:#393A34;"> </span><span style="color:#B56959;">bridge</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">grep</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docker0</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看网卡信息</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;"># --network 不指定默认就是网桥模式</span></span>
+<span class="line"><span style="color:#A0ADA0;">#host主机模式(不能指定端口，共享宿主机的ip，没有自己的ip，http://宿主机ip:端口)</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">host</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器名</span><span style="color:#393A34;"> </span><span style="color:#B56959;">镜像名</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">none</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器名</span><span style="color:#393A34;"> </span><span style="color:#B56959;">镜像名</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#只有lo网卡</span></span></code></pre></div><h4 id="共用网卡" tabindex="-1">共用网卡 <a class="header-anchor" href="#共用网卡" aria-label="Permalink to &quot;共用网卡&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">container:另一个容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">容器名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/bin/bash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">镜像名</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#758575DD;">#共用的容器关闭，这个容器网卡也没有啦</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">container:另一个容器名</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">容器名</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/bin/bash</span><span style="color:#393A34;"> </span><span style="color:#B56959;">镜像名</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#A0ADA0;">#共用的容器关闭，这个容器网卡也没有啦</span></span></code></pre></div><h4 id="自定义网络" tabindex="-1">自定义网络 <a class="header-anchor" href="#自定义网络" aria-label="Permalink to &quot;自定义网络&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#启动两个网桥模式容器</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8081</span><span style="color:#C98A7D;">:8080</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat81</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8082</span><span style="color:#C98A7D;">:8080</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat82</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#两个ip可以相互ping通，痛点：按域名ping不通</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#启动两个网桥模式容器</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8081</span><span style="color:#B56959;">:8080</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat81</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8082</span><span style="color:#B56959;">:8080</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat82</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#两个ip可以相互ping通，痛点：按域名ping不通</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8081</span><span style="color:#C98A7D;">:8080</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">my_network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat81</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat</span></span>
+<span class="line"><span style="color:#80A665;">docker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8082</span><span style="color:#C98A7D;">:8080</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">my_network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat82</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tomcat</span></span>
+<span class="line"><span style="color:#758575DD;">#ip、域名互ping都能通（维护好主机和ip的关系）</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8081</span><span style="color:#B56959;">:8080</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">my_network</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat81</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat</span></span>
+<span class="line"><span style="color:#59873A;">docker</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8082</span><span style="color:#B56959;">:8080</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--network</span><span style="color:#393A34;"> </span><span style="color:#B56959;">my_network</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat82</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tomcat</span></span>
+<span class="line"><span style="color:#A0ADA0;">#ip、域名互ping都能通（维护好主机和ip的关系）</span></span></code></pre></div><h2 id="十、容器编排" tabindex="-1">十、<a href="https://docs.docker.com/compose/compose-file/" target="_blank" rel="noreferrer">容器编排</a> <a class="header-anchor" href="#十、容器编排" aria-label="Permalink to &quot;十、[容器编排](https://docs.docker.com/compose/compose-file/)&quot;">​</a></h2><blockquote><p>意义：集中快速管理多个容器</p></blockquote><h4 id="_1-安装compose" tabindex="-1">1. <a href="https://docs.docker.com/compose/install/" target="_blank" rel="noreferrer">安装Compose</a> <a class="header-anchor" href="#_1-安装compose" aria-label="Permalink to &quot;1. [安装Compose](https://docs.docker.com/compose/install/)&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">curl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-SL</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-o</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/usr/local/bin/docker-compose</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">curl</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-SL</span><span style="color:#393A34;"> </span><span style="color:#B56959;">https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-o</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/usr/local/bin/docker-compose</span></span></code></pre></div><h4 id="_2-常用命令" tabindex="-1">2. <a href="https://cloud.tencent.com/developer/article/1499032" target="_blank" rel="noreferrer">常用命令</a> <a class="header-anchor" href="#_2-常用命令" aria-label="Permalink to &quot;2. [常用命令](https://cloud.tencent.com/developer/article/1499032)&quot;">​</a></h4><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032205681.png" alt=""></p><h4 id="_3-安装-portainer" tabindex="-1">3. <a href="https://cloud.tencent.com/developer/article/2047779" target="_blank" rel="noreferrer">安装 Portainer</a> <a class="header-anchor" href="#_3-安装-portainer" aria-label="Permalink to &quot;3. [安装 Portainer](https://cloud.tencent.com/developer/article/2047779)&quot;">​</a></h4>`,49),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{d as __pageData,C as default};
diff --git "a/assets/BackEnd_Server_Docker\345\255\246\344\271\240\347\254\224\350\256\260.md.d29feca6.lean.js" "b/assets/BackEnd_Server_Docker\345\255\246\344\271\240\347\254\224\350\256\260.md.d29feca6.lean.js"
new file mode 100644
index 00000000..aea5ffe2
--- /dev/null
+++ "b/assets/BackEnd_Server_Docker\345\255\246\344\271\240\347\254\224\350\256\260.md.d29feca6.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/Server/Docker学习笔记.md","filePath":"BackEnd/Server/Docker学习笔记.md"}'),p={name:"BackEnd/Server/Docker学习笔记.md"},o=l("",49),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{d as __pageData,C as default};
diff --git "a/assets/BackEnd_Server_Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md.9d658cc4.js" "b/assets/BackEnd_Server_Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md.9d658cc4.js"
new file mode 100644
index 00000000..72736748
--- /dev/null
+++ "b/assets/BackEnd_Server_Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md.9d658cc4.js"
@@ -0,0 +1,11 @@
+import{_ as s,o as a,c as n,Q as t}from"./chunks/framework.c53372a0.js";const D=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/Server/Nginx学习笔记.md","filePath":"BackEnd/Server/Nginx学习笔记.md"}'),l={name:"BackEnd/Server/Nginx学习笔记.md"},e=t(`<h2 id="一、nginx安装" tabindex="-1">一、Nginx安装 <a class="header-anchor" href="#一、nginx安装" aria-label="Permalink to &quot;一、Nginx安装&quot;">​</a></h2><h3 id="_1-安装命令" tabindex="-1">1.安装命令 <a class="header-anchor" href="#_1-安装命令" aria-label="Permalink to &quot;1.安装命令&quot;">​</a></h3><table><thead><tr><th>Ubuntu</th><th>apt install nginx</th></tr></thead><tbody><tr><td>CentOS(Red Hat系列)</td><td>yum install nginx</td></tr></tbody></table><h3 id="_2-linux目录结构" tabindex="-1">2.Linux目录结构 <a class="header-anchor" href="#_2-linux目录结构" aria-label="Permalink to &quot;2.Linux目录结构&quot;">​</a></h3><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032207741.png" alt=""></p><h3 id="_3-基础命令" tabindex="-1">3.基础命令 <a class="header-anchor" href="#_3-基础命令" aria-label="Permalink to &quot;3.基础命令&quot;">​</a></h3><table><thead><tr><th>nginx -v/nginx -V</th><th>查看nginx版本等信息</th></tr></thead><tbody><tr><td>systemctl start/stop nginx</td><td>启动/停止nginx</td></tr><tr><td>systemctl status nginx</td><td>查看nginx运行状态</td></tr><tr><td>ps -ef | grep nginx</td><td>查看nginx进程</td></tr><tr><td>kill -QUIT 进程号</td><td></td></tr><tr><td>kill -TERM 进程号</td><td>从容停止</td></tr><tr><td>kill -TERM 进程号</td><td></td></tr><tr><td>kill -INT 进程号</td><td>快速停止</td></tr><tr><td>pkill -9 nginx</td><td>强制停止</td></tr></tbody></table><h2 id="编写配置" tabindex="-1">编写配置 <a class="header-anchor" href="#编写配置" aria-label="Permalink to &quot;编写配置&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">nginx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-t</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">#检查配置文件有没有问题</span></span>
+<span class="line"><span style="color:#80A665;">grep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-Ei</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">\\{|\\}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D;">nginx.conf</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#检查配置文件括号配对问题</span></span>
+<span class="line"><span style="color:#80A665;">nginx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">reload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#重载配置</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">nginx</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-t</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">#检查配置文件有没有问题</span></span>
+<span class="line"><span style="color:#59873A;">grep</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-Ei</span><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">\\{|\\}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">   </span><span style="color:#B56959;">nginx.conf</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#检查配置文件括号配对问题</span></span>
+<span class="line"><span style="color:#59873A;">nginx</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-s</span><span style="color:#393A34;"> </span><span style="color:#B56959;">reload</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#重载配置</span></span></code></pre></div><h2 id="日志分析器" tabindex="-1">日志分析器 <a class="header-anchor" href="#日志分析器" aria-label="Permalink to &quot;日志分析器&quot;">​</a></h2><h2 id="netstat命令" tabindex="-1"><a href="https://linux.cn/article-2434-1.html" target="_blank" rel="noreferrer">netstat命令</a> <a class="header-anchor" href="#netstat命令" aria-label="Permalink to &quot;[netstat命令](https://linux.cn/article-2434-1.html)&quot;">​</a></h2><h2 id="curl命令" tabindex="-1"><a href="https://blog.csdn.net/u013514928/article/details/102810250" target="_blank" rel="noreferrer">curl命令</a> <a class="header-anchor" href="#curl命令" aria-label="Permalink to &quot;[curl命令](https://blog.csdn.net/u013514928/article/details/102810250)&quot;">​</a></h2><h2 id="centos7联网" tabindex="-1">CentOS7联网 <a class="header-anchor" href="#centos7联网" aria-label="Permalink to &quot;CentOS7联网&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ip</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#查看网卡</span></span>
+<span class="line"><span style="color:#B8A965;">cd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/etc/sysconfig/network-scripts</span></span>
+<span class="line"><span style="color:#80A665;">vi</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ifcfg-ens160</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#把ONBOOT=no ===&gt; 改为yes</span></span>
+<span class="line"><span style="color:#80A665;">systemctl</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">restart</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">network</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#重启网络</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ip</span><span style="color:#393A34;"> </span><span style="color:#B56959;">a</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#查看网卡</span></span>
+<span class="line"><span style="color:#998418;">cd</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/etc/sysconfig/network-scripts</span></span>
+<span class="line"><span style="color:#59873A;">vi</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ifcfg-ens160</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#把ONBOOT=no ===&gt; 改为yes</span></span>
+<span class="line"><span style="color:#59873A;">systemctl</span><span style="color:#393A34;"> </span><span style="color:#B56959;">restart</span><span style="color:#393A34;"> </span><span style="color:#B56959;">network</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#重启网络</span></span></code></pre></div>`,14),o=[e];function p(r,c,i,d,y,h){return a(),n("div",null,o)}const g=s(l,[["render",p]]);export{D as __pageData,g as default};
diff --git "a/assets/BackEnd_Server_Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md.9d658cc4.lean.js" "b/assets/BackEnd_Server_Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md.9d658cc4.lean.js"
new file mode 100644
index 00000000..21053ba4
--- /dev/null
+++ "b/assets/BackEnd_Server_Nginx\345\255\246\344\271\240\347\254\224\350\256\260.md.9d658cc4.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as t}from"./chunks/framework.c53372a0.js";const D=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"BackEnd/Server/Nginx学习笔记.md","filePath":"BackEnd/Server/Nginx学习笔记.md"}'),l={name:"BackEnd/Server/Nginx学习笔记.md"},e=t("",14),o=[e];function p(r,c,i,d,y,h){return a(),n("div",null,o)}const g=s(l,[["render",p]]);export{D as __pageData,g as default};
diff --git "a/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.25af9886.js" "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.25af9886.js"
new file mode 100644
index 00000000..d0c881b3
--- /dev/null
+++ "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.25af9886.js"
@@ -0,0 +1,351 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"Angular基础总结一","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Angular/Angular基础总结一.md","filePath":"Framework/Angular/Angular基础总结一.md"}'),p={name:"Framework/Angular/Angular基础总结一.md"},o=l(`<h1 id="angular基础总结一" tabindex="-1">Angular基础总结一 <a class="header-anchor" href="#angular基础总结一" aria-label="Permalink to &quot;Angular基础总结一&quot;">​</a></h1><h2 id="一、ngmodule" tabindex="-1">一、NgModule <a class="header-anchor" href="#一、ngmodule" aria-label="Permalink to &quot;一、NgModule&quot;">​</a></h2><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>被@NgModule所装饰的类被称为angular module</p></div><h4 id="ngmodule元数据" tabindex="-1">@NgModule元数据 <a class="header-anchor" href="#ngmodule元数据" aria-label="Permalink to &quot;@NgModule元数据&quot;">​</a></h4><ul><li><strong>declarations</strong> —— 该模块的依赖项（该模块用到的组件、指令、管道）。</li><li><strong>imports</strong> —— 导入其他的ngModule。</li><li><strong>providers</strong> —— 提供各种服务。</li><li><strong>bootstrap</strong> —— 根组件，Angular 创建它并插入 index.html 宿主页面</li></ul><h4 id="declarations-数组" tabindex="-1">declarations 数组 <a class="header-anchor" href="#declarations-数组" aria-label="Permalink to &quot;declarations 数组&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">模块中使用的组件必须先在declarations</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">数组中声名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">一个组件只能被一个模块声名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">3</span><span style="color:#666666;">.</span><span style="color:#BD976A;">在declarations中的组件默认只能在当前模块中使用</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">在其他模块使用必须exports导出</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">模块中使用的组件必须先在declarations</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">数组中声名</span></span>
+<span class="line"><span style="color:#393A34;">2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">一个组件只能被一个模块声名</span></span>
+<span class="line"><span style="color:#393A34;">3</span><span style="color:#999999;">.</span><span style="color:#B07D48;">在declarations中的组件默认只能在当前模块中使用</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">在其他模块使用必须exports导出</span></span></code></pre></div><h4 id="imports-数组" tabindex="-1">imports 数组 <a class="header-anchor" href="#imports-数组" aria-label="Permalink to &quot;imports 数组&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">只会出现在</span><span style="color:#DBD7CAEE;">@</span><span style="color:#BD976A;">NgModule装饰器中</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">模块想要正常工作</span><span style="color:#DBD7CAEE;">，</span><span style="color:#80A665;">除了本身的依赖项</span><span style="color:#666666;">(</span><span style="color:#BD976A;">declarations</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">还可能需要其他模块导出的依赖项</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">3</span><span style="color:#666666;">.</span><span style="color:#BD976A;">只要是angular</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">module</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">都可以导入imports数组中</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">比如ng内置</span><span style="color:#DBD7CAEE;">、</span><span style="color:#BD976A;">第三方</span><span style="color:#DBD7CAEE;">、</span><span style="color:#BD976A;">自定义的模块</span><span style="color:#DBD7CAEE;">。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">只会出现在</span><span style="color:#393A34;">@</span><span style="color:#B07D48;">NgModule装饰器中</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#393A34;">2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">模块想要正常工作</span><span style="color:#393A34;">，</span><span style="color:#59873A;">除了本身的依赖项</span><span style="color:#999999;">(</span><span style="color:#B07D48;">declarations</span><span style="color:#999999;">)</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">还可能需要其他模块导出的依赖项</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#393A34;">3</span><span style="color:#999999;">.</span><span style="color:#B07D48;">只要是angular</span><span style="color:#393A34;"> </span><span style="color:#998418;">module</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">都可以导入imports数组中</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">比如ng内置</span><span style="color:#393A34;">、</span><span style="color:#B07D48;">第三方</span><span style="color:#393A34;">、</span><span style="color:#B07D48;">自定义的模块</span><span style="color:#393A34;">。</span></span></code></pre></div><h4 id="providers-数组" tabindex="-1">providers 数组 <a class="header-anchor" href="#providers-数组" aria-label="Permalink to &quot;providers 数组&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">该数组为当前模块提供一系列服务</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">该数组为当前模块提供一系列服务</span></span></code></pre></div><h4 id="bootstrap-数组" tabindex="-1">bootstrap 数组 <a class="header-anchor" href="#bootstrap-数组" aria-label="Permalink to &quot;bootstrap 数组&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">应用是通过引导根模块</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AppModule</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">来启动的</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">引导过程还会创建</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bootstrap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">数组中列出的组件</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">并把它们逐个插入到浏览器的</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">DOM</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">中</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#BD976A;">该数组中的每个组件</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">都作为组件树的根</span><span style="color:#DBD7CAEE;">（</span><span style="color:#BD976A;">根组件</span><span style="color:#DBD7CAEE;">），</span><span style="color:#80A665;">后续所有组件都是基于根组件的</span><span style="color:#666666;">(</span><span style="color:#BD976A;">如图</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#BD976A;">虽然也可以在宿主页面中放多个组件</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">但是大多数应用只有一个组件树</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">并且只从一个根组件开始引导</span><span style="color:#DBD7CAEE;">。</span></span>
+<span class="line"><span style="color:#BD976A;">这个根组件通常叫做</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AppComponent</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">并且位于根模块的</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bootstrap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">数组中</span><span style="color:#DBD7CAEE;">。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">应用是通过引导根模块</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AppModule</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">来启动的</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">引导过程还会创建</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bootstrap</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">数组中列出的组件</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">并把它们逐个插入到浏览器的</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">DOM</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">中</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#B07D48;">该数组中的每个组件</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">都作为组件树的根</span><span style="color:#393A34;">（</span><span style="color:#B07D48;">根组件</span><span style="color:#393A34;">），</span><span style="color:#59873A;">后续所有组件都是基于根组件的</span><span style="color:#999999;">(</span><span style="color:#B07D48;">如图</span><span style="color:#999999;">)</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#B07D48;">虽然也可以在宿主页面中放多个组件</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">但是大多数应用只有一个组件树</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">并且只从一个根组件开始引导</span><span style="color:#393A34;">。</span></span>
+<span class="line"><span style="color:#B07D48;">这个根组件通常叫做</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AppComponent</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">并且位于根模块的</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bootstrap</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">数组中</span><span style="color:#393A34;">。</span></span></code></pre></div><details class="details custom-block"><summary>结构图</summary><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211101223938.png"></details><h2 id="二、模板基础语法" tabindex="-1">二、模板基础语法 <a class="header-anchor" href="#二、模板基础语法" aria-label="Permalink to &quot;二、模板基础语法&quot;">​</a></h2><h4 id="_1-模板表达式" tabindex="-1">1. 模板表达式 <a class="header-anchor" href="#_1-模板表达式" aria-label="Permalink to &quot;1. 模板表达式&quot;">​</a></h4><blockquote><p><strong>模版中还可以写些简单的逻辑，比如判断或运算</strong></p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;h1&gt;{{title}}&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;p&gt; sum : {{1 + 1}}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;p&gt;price: {{price * 0.7}}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;p&gt;与方法结合: {{price * 0.7 + getVal()}}.&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,    </span><span style="color:#758575DD;">//内联模板</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">h1 { color: yellow }</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">]    </span><span style="color:#758575DD;">//内联样式</span></span>
+<span class="line"><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">title</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">my-angular-title</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">price</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">getVal</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">number</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">33</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;h1&gt;{{title}}&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;p&gt; sum : {{1 + 1}}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;p&gt;price: {{price * 0.7}}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;p&gt;与方法结合: {{price * 0.7 + getVal()}}.&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B5695999;">\`</span><span style="color:#999999;">,    </span><span style="color:#A0ADA0;">//内联模板</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">h1 { color: yellow }</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">]    </span><span style="color:#A0ADA0;">//内联样式</span></span>
+<span class="line"><span style="color:#999999;">})</span><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">title</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">my-angular-title</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">price</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">getVal</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">number</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">33</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><b>模板表达式遵循原则：</b></p><ul><li>非常简单</li><li>执行迅速</li><li>没有可见的副作用(即模版中的逻辑不能改变组件的变量)</li></ul></div><h4 id="_2-模板来源" tabindex="-1">2. 模板来源 <a class="header-anchor" href="#_2-模板来源" aria-label="Permalink to &quot;2. 模板来源&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.scss</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">] </span><span style="color:#758575DD;">//注意： styleUrls</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.scss</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">] </span><span style="color:#A0ADA0;">//注意： styleUrls</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_3-属性绑定" tabindex="-1">3. 属性绑定 <a class="header-anchor" href="#_3-属性绑定" aria-label="Permalink to &quot;3. 属性绑定&quot;">​</a></h4><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">../assets/images/zorro.jpg</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">madao</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span><span style="color:#758575DD;">&lt;!-- 静态绑定--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[src]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zorroSrc</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zorro</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;">     </span><span style="color:#758575DD;">&lt;!-- 简写形式--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bind-src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zorroSrc</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zorro</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">&lt;!-- 完整形式--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[disabled]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">isDisabled</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">click</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">button</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- zorroSrc、zorro、isDisabled均为变量 --&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">../assets/images/zorro.jpg</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">madao</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span><span style="color:#A0ADA0;">&lt;!-- 静态绑定--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[src]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zorroSrc</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zorro</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;">     </span><span style="color:#A0ADA0;">&lt;!-- 简写形式--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bind-src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zorroSrc</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zorro</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">&lt;!-- 完整形式--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[disabled]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">isDisabled</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">click</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">button</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- zorroSrc、zorro、isDisabled均为变量 --&gt;</span></span></code></pre></div><h4 id="_4-自定义属性绑定" tabindex="-1">4. 自定义属性绑定 <a class="header-anchor" href="#_4-自定义属性绑定" aria-label="Permalink to &quot;4. 自定义属性绑定&quot;">​</a></h4><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[attr.data-title]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">customTitle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一行文字</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[attr.title]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">customTitle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">测试自定义标题属性</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[attr.data-title]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">customTitle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一行文字</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[attr.title]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">customTitle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">测试自定义标题属性</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h4 id="_5-插值表达式属性绑定" tabindex="-1">5. 插值表达式属性绑定 <a class="header-anchor" href="#_5-插值表达式属性绑定" aria-label="Permalink to &quot;5. 插值表达式属性绑定&quot;">​</a></h4><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{{ picUrl }}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{{ picInfo }}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">&lt;!-- 不常用 --&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{{ picUrl }}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{{ picInfo }}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">&lt;!-- 不常用 --&gt;</span></span></code></pre></div><h4 id="_6-单个class样式绑定" tabindex="-1">6. 单个class样式绑定 <a class="header-anchor" href="#_6-单个class样式绑定" aria-label="Permalink to &quot;6. 单个class样式绑定&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-primary]=&quot;theme === &#39;primary&#39;&quot;&gt;Primary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-secondary]=&quot;true&quot;&gt;secondary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-success]=&quot;isSuccess&quot;&gt;success&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;&#39;啦啦啦&#39;&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;0&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;undefined&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">theme</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">primary</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">isSuccess</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-primary]=&quot;theme === &#39;primary&#39;&quot;&gt;Primary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-secondary]=&quot;true&quot;&gt;secondary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-success]=&quot;isSuccess&quot;&gt;success&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;&#39;啦啦啦&#39;&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;0&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; class=&quot;btn&quot; [class.btn-danger]=&quot;undefined&quot;&gt;danger&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">theme</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">primary</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">isSuccess</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_7-绑定多个class" tabindex="-1">7. 绑定多个class <a class="header-anchor" href="#_7-绑定多个class" aria-label="Permalink to &quot;7. 绑定多个class&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls&quot;&gt;btnCls&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls2&quot;&gt;btnCls2&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls3&quot;&gt;btnCls3&lt;/button&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!-- 也可以用内置指令ngClass --&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls&quot;&gt;btnCls&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls2&quot;&gt;btnCls2&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls3&quot;&gt;btnCls3&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">btnCls</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">btn btn-primary</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">btnCls2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">btn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">btn-success</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">btnCls3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#B8A965;">btn</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">btn-info</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#666666;">    };</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls&quot;&gt;btnCls&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls2&quot;&gt;btnCls2&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [class]=&quot;btnCls3&quot;&gt;btnCls3&lt;/button&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">      &lt;!-- 也可以用内置指令ngClass --&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls&quot;&gt;btnCls&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls2&quot;&gt;btnCls2&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button type=&quot;button&quot; [ngClass]=&quot;btnCls3&quot;&gt;btnCls3&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">btnCls</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">btn btn-primary</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">btnCls2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">btn</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">btn-success</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">btnCls3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#998418;">btn</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">btn-info</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#999999;">    };</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_8-绑定单个style" tabindex="-1">8. 绑定单个style <a class="header-anchor" href="#_8-绑定单个style" aria-label="Permalink to &quot;8. 绑定单个style&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style.color]=&quot;&#39;##f60&#39;&quot;&gt;一段文字&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style.height]=&quot;&#39;50px&#39;&quot; [style.border]=&quot;&#39;1px solid&#39;&quot;&gt;设置高度&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style.height.px]=&quot;50&quot; [style.border]=&quot;&#39;1px solid&#39;&quot;&gt;设置高度&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style.color]=&quot;&#39;##f60&#39;&quot;&gt;一段文字&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style.height]=&quot;&#39;50px&#39;&quot; [style.border]=&quot;&#39;1px solid&#39;&quot;&gt;设置高度&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style.height.px]=&quot;50&quot; [style.border]=&quot;&#39;1px solid&#39;&quot;&gt;设置高度&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span></code></pre></div><h4 id="_9-绑定多个style" tabindex="-1">9. 绑定多个style <a class="header-anchor" href="#_9-绑定多个style" aria-label="Permalink to &quot;9. 绑定多个style&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style]=&quot;style1&quot;&gt;style1&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style]=&quot;style2&quot;&gt;style2&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [style]=&quot;style3&quot;&gt;style3&lt;/p&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!-- 内置指令ngStyle绑定, 不推荐 --&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!--  &lt;p [ngStyle]=&quot;style1&quot;&gt;style1&lt;/p&gt;--&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!--  &lt;p [ngStyle]=&quot;style2&quot;&gt;style2&lt;/p&gt;--&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;!-- ngStyle只接收对象 --&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p [ngStyle]=&quot;style3&quot;&gt;style3&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">style1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">width: 200px;height: 50px;text-align: center;border: 1px solid;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">style2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">width</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">200px</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">height</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">50px</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text-align</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">border</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1px solid</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 有问题</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">style3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">200px</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">50px</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text-align</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1px solid</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  };</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style]=&quot;style1&quot;&gt;style1&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style]=&quot;style2&quot;&gt;style2&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [style]=&quot;style3&quot;&gt;style3&lt;/p&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">      &lt;!-- 内置指令ngStyle绑定, 不推荐 --&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;!--  &lt;p [ngStyle]=&quot;style1&quot;&gt;style1&lt;/p&gt;--&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;!--  &lt;p [ngStyle]=&quot;style2&quot;&gt;style2&lt;/p&gt;--&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">      &lt;!-- ngStyle只接收对象 --&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p [ngStyle]=&quot;style3&quot;&gt;style3&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">style1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">width: 200px;height: 50px;text-align: center;border: 1px solid;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">style2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">width</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">200px</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">height</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">50px</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text-align</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">border</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1px solid</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 有问题</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">style3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">200px</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">50px</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text-align</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1px solid</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  };</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><b>样式优先级</b></p><p>1.某个类或样式绑定越具体，它的优先级就越高</p><p>2.绑定总是优先于静态属性</p></div><h4 id="_10-绑定事件" tabindex="-1">10. 绑定事件 <a class="header-anchor" href="#_10-绑定事件" aria-label="Permalink to &quot;10. 绑定事件&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button (click)=&quot;onClick()&quot;&gt;CLICK&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;button  (click)=&quot;onClick1($event)&quot;&gt;Primary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: []</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">onClick</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">onClick</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">onClick1</span><span style="color:#666666;">(</span><span style="color:#BD976A;">event</span><span style="color:#666666;">: </span><span style="color:#5DA994;">MouseEvent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">onClick1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">event</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button (click)=&quot;onClick()&quot;&gt;CLICK&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;button  (click)=&quot;onClick1($event)&quot;&gt;Primary&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: []</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">onClick</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">onClick</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">onClick1</span><span style="color:#999999;">(</span><span style="color:#B07D48;">event</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">MouseEvent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">onClick1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">event</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_11-输入与输出属性" tabindex="-1">11. 输入与输出属性 <a class="header-anchor" href="#_11-输入与输出属性" aria-label="Permalink to &quot;11. 输入与输出属性&quot;">​</a></h4><blockquote><p>输入属性：用于父组件传值给子组件（父传子）<code> @Input()</code></p><p>输出属性：用于子组件传值给父组件（子传父）<code>@Output()</code></p></blockquote><h4 id="输入属性-input" tabindex="-1">输入属性<code>@Input</code> <a class="header-anchor" href="#输入属性-input" aria-label="Permalink to &quot;输入属性\`@Input\`&quot;">​</a></h4><p>📝父组件</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;app-mycpn [item]=&quot;currentItem&quot;&gt;&lt;/app-mycpn&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;!-- &lt;app-mycpn item=&quot;我是传入的字符串&quot;&gt;&lt;/app-mycpn&gt;--&gt; &lt;!--静态属性可不用[]包裹 --&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">currentItem</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Television</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;app-mycpn [item]=&quot;currentItem&quot;&gt;&lt;/app-mycpn&gt;</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;!-- &lt;app-mycpn item=&quot;我是传入的字符串&quot;&gt;&lt;/app-mycpn&gt;--&gt; &lt;!--静态属性可不用[]包裹 --&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">currentItem</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Television</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝子组件</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-mycpn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">               Today&#39;s item: {{item}}</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;/p&gt;</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">MycpnComponent</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">   </span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">//@Input(&#39;aliasItem&#39;) item: string; 提供别名，item变量只可以在本组件使用</span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">//相当于对父组件传入的aliasItem变量进行重命名</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-mycpn</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">               Today&#39;s item: {{item}}</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;/p&gt;</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">MycpnComponent</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span><span style="color:#393A34;">   </span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//@Input(&#39;aliasItem&#39;) item: string; 提供别名，item变量只可以在本组件使用</span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//相当于对父组件传入的aliasItem变量进行重命名</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="输出属性-output" tabindex="-1">输出属性<code>@Output()</code> <a class="header-anchor" href="#输出属性-output" aria-label="Permalink to &quot;输出属性\`@Output()\`&quot;">​</a></h4><p>📝父组件</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;app-mycpn  (newItemEvent)=&quot;addItem($event)&quot;&gt;&lt;/app-mycpn&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">items</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">item1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">item2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">item3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">item4</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">addItem</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newItem</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">items</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newItem</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;app-mycpn  (newItemEvent)=&quot;addItem($event)&quot;&gt;&lt;/app-mycpn&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">items</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">item1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">item2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">item3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">item4</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">addItem</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newItem</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">items</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newItem</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝子组件</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-mycpn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;label&gt;Add an item: &lt;input ##newItem&gt;&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">             &lt;button (click)=&quot;addNewItem(newItem.value)&quot;&gt;Add to parent&#39;s list&lt;/button&gt;</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">MycpnComponent</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newItemEvent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// @Output(&#39;newItem&#39;) newItemEvent = new EventEmitter&lt;string&gt;();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">addNewItem</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">newItemEvent</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-mycpn</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;label&gt;Add an item: &lt;input ##newItem&gt;&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">             &lt;button (click)=&quot;addNewItem(newItem.value)&quot;&gt;Add to parent&#39;s list&lt;/button&gt;</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">MycpnComponent</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newItemEvent</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// @Output(&#39;newItem&#39;) newItemEvent = new EventEmitter&lt;string&gt;();</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">addNewItem</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">newItemEvent</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>还可以元数据中声名输入、输出属性。<a href="https://angular.cn/guide/styleguide##decorate-input-and-output-properties" target="_blank" rel="noreferrer">（不推荐）</a></p></blockquote><h2 id="三、组件样式" tabindex="-1">三、组件样式 <a class="header-anchor" href="#三、组件样式" aria-label="Permalink to &quot;三、组件样式&quot;">​</a></h2><h4 id="宿主选择器" tabindex="-1">宿主选择器 <a class="header-anchor" href="#宿主选择器" aria-label="Permalink to &quot;宿主选择器&quot;">​</a></h4><blockquote><p><code>:host</code>选择是是把宿主元素作为目标的唯一方式</p></blockquote><div class="language-md vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">它选中的是组件模板标签，比如&lt;app-child&gt;&lt;/app-child&gt;，相当于在父组件的style中使用标签选择器选择 app-child {}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">它选中的是组件模板标签，比如&lt;app-child&gt;&lt;/app-child&gt;，相当于在父组件的style中使用标签选择器选择 app-child {}</span></span></code></pre></div><p>当宿主标签上有 <code>active</code> 类名时生效</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">:</span><span style="color:#BD976A;">host</span><span style="color:#DBD7CAEE;">(</span><span style="color:#666666;">.</span><span style="color:#BD976A;">active</span><span style="color:#DBD7CAEE;">) </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> #</span><span style="color:#666666;">#</span><span style="color:#C99076;">ccc</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">:</span><span style="color:#B07D48;">host</span><span style="color:#393A34;">(</span><span style="color:#999999;">.</span><span style="color:#B07D48;">active</span><span style="color:#393A34;">) </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> #</span><span style="color:#999999;">#</span><span style="color:#A65E2B;">ccc</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="祖先选择器" tabindex="-1">祖先选择器 <a class="header-anchor" href="#祖先选择器" aria-label="Permalink to &quot;祖先选择器&quot;">​</a></h4><blockquote><p>当某个祖先元素有 CSS 类 light 时，才会把 background-color 样式应用到组件内部的所有 .title 元素中，找到根元素(html标签)为止</p></blockquote><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">:host-context(</span><span style="color:#666666;">.</span><span style="color:#BD976A;">light</span><span style="color:#DBD7CAEE;">) </span><span style="color:#666666;">.</span><span style="color:#BD976A;">title</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> #</span><span style="color:#666666;">#</span><span style="color:#C99076;">bfa</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">:host-context(</span><span style="color:#999999;">.</span><span style="color:#B07D48;">light</span><span style="color:#393A34;">) </span><span style="color:#999999;">.</span><span style="color:#B07D48;">title</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> #</span><span style="color:#999999;">#</span><span style="color:#A65E2B;">bfa</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="样式模块化" tabindex="-1">样式模块化 <a class="header-anchor" href="#样式模块化" aria-label="Permalink to &quot;样式模块化&quot;">​</a></h4><blockquote><p>在 @Component 的元数据中指定的样式只会对该组件的模板生效</p><p>组件的样式不会影响到子组件中的模板</p><p>组件的样式不会影响到投影内容</p></blockquote><h4 id="视图封装模式" tabindex="-1">视图封装模式 <a class="header-anchor" href="#视图封装模式" aria-label="Permalink to &quot;视图封装模式&quot;">​</a></h4><blockquote><p>ShadowDom -- <strong>不进不出</strong>，没有样式能进来，组件样式出不去, 就自己玩</p><p>Emulated --<strong>只进不出</strong>， 默认选项，全局样式能进来，组件样式出不去</p><p>None -- <strong>能进能出</strong>，此时组件的样式是全局生效的，注意与其他组件发生样式冲突，（对父组件样式也能生效）</p></blockquote>`,64),t=[o];function e(c,r,y,i,A,D){return n(),a("div",null,t)}const u=s(p,[["render",e]]);export{C as __pageData,u as default};
diff --git "a/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.25af9886.lean.js" "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.25af9886.lean.js"
new file mode 100644
index 00000000..6527f5ee
--- /dev/null
+++ "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.25af9886.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"Angular基础总结一","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Angular/Angular基础总结一.md","filePath":"Framework/Angular/Angular基础总结一.md"}'),p={name:"Framework/Angular/Angular基础总结一.md"},o=l("",64),t=[o];function e(c,r,y,i,A,D){return n(),a("div",null,t)}const u=s(p,[["render",e]]);export{C as __pageData,u as default};
diff --git "a/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md.574a1956.js" "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md.574a1956.js"
new file mode 100644
index 00000000..977be888
--- /dev/null
+++ "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md.574a1956.js"
@@ -0,0 +1,861 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Angular/Angular基础总结三.md","filePath":"Framework/Angular/Angular基础总结三.md"}'),p={name:"Framework/Angular/Angular基础总结三.md"},o=l(`<h2 id="组件投影" tabindex="-1">组件投影 <a class="header-anchor" href="#组件投影" aria-label="Permalink to &quot;组件投影&quot;">​</a></h2><p>📝shadow.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">    shadow works!</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">select</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.head</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">select</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[attr-content]</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">select</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">section</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">    shadow works!</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-content</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">select</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.head</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-content</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">select</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[attr-content]</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-content</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">select</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">section</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝app.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">&lt;!-- 组件投影 --&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-shadow</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">head</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">头部投影内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">section</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">标签选择器投影内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">section</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr-content</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">自定义属性选择器投影内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">app-shadow</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">&lt;!-- 组件投影 --&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-shadow</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">head</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">头部投影内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">section</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">标签选择器投影内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">section</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr-content</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">自定义属性选择器投影内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">app-shadow</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>🎖️结果展示</p><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106153131.png"><h2 id="viewchild" tabindex="-1">ViewChild <a class="header-anchor" href="#viewchild" aria-label="Permalink to &quot;ViewChild&quot;">​</a></h2><p>📝parent.component.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ElementRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewChild</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ChildComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./child/child.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-parent</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./parent.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./parent.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ParentComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// @ViewChild(&#39;box&#39;,{static:true}) private box:ElementRef //获取dom</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// @ViewChild(ChildComponent,{static:true}) private instance:ChildComponent  //获取子组件方式一</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChild</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">childcomponent</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span><span style="color:#B8A965;">static</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">childInstance</span><span style="color:#666666;">:</span><span style="color:#5DA994;">ChildComponent</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//获取子组件实例方式二</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//执行秩序（1）</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;constructor&#39;,this.box);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;constructor&#39;,this.instance?.childdata);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;constructor&#39;,this.childInstance?.childdata);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">constructor</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childInstance</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//（2）</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;ngOnInit&#39;,this.box.nativeElement);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;ngOnInit&#39;,this.instance.childdata);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngOnInit</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childInstance</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(&#39;ngOnInit&#39;,this.childInstance.childdata);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//（3）在变更检测后执行，能保证获取到元素</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  console.log(&#39;ngAfterViewInit&#39;,this.box.nativeElement);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  console.log(&#39;ngAfterViewInit&#39;,this.instance.childdata);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterViewInit</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childInstance</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childdata</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ElementRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewChild</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ChildComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./child/child.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-parent</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./parent.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./parent.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ParentComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// @ViewChild(&#39;box&#39;,{static:true}) private box:ElementRef //获取dom</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// @ViewChild(ChildComponent,{static:true}) private instance:ChildComponent  //获取子组件方式一</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChild</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">childcomponent</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span><span style="color:#998418;">static</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">childInstance</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">ChildComponent</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//获取子组件实例方式二</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//执行秩序（1）</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;constructor&#39;,this.box);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;constructor&#39;,this.instance?.childdata);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;constructor&#39;,this.childInstance?.childdata);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">constructor</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childInstance</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//（2）</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;ngOnInit&#39;,this.box.nativeElement);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;ngOnInit&#39;,this.instance.childdata);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngOnInit</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childInstance</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(&#39;ngOnInit&#39;,this.childInstance.childdata);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//（3）在变更检测后执行，能保证获取到元素</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  console.log(&#39;ngAfterViewInit&#39;,this.box.nativeElement);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  console.log(&#39;ngAfterViewInit&#39;,this.instance.childdata);</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterViewInit</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childInstance</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childdata</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="viewchildren" tabindex="-1">ViewChildren <a class="header-anchor" href="#viewchildren" aria-label="Permalink to &quot;ViewChildren&quot;">​</a></h2><p>📝parent.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">&lt;!-- ViewChildren批量获取元素和组件 --&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">boxs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#boxs</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">mybox</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">boxs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#boxs</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">mybox</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">boxs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#boxs</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">mybox</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-child</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">&lt;!-- ViewChildren批量获取元素和组件 --&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">boxs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#boxs</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">mybox</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">boxs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#boxs</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">mybox</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">boxs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#boxs</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">mybox</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-child</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝parent.component.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">QueryList</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewChild</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewChildren</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ChildComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./child/child.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-parent</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./parent.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./parent.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ParentComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// ViewChildren批量获取元素和组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChildren</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ChildComponent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">childs</span><span style="color:#666666;">:</span><span style="color:#5DA994;">QueryList</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">ChildComponent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChildren</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">boxs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">childs1</span><span style="color:#666666;">:</span><span style="color:#5DA994;">QueryList</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">ChildComponent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//（3）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childs</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childs1</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//输出QueryList数组 </span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//QueryList中监听子组件变化的回调函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">childs1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">.</span><span style="color:#80A665;">subscribe</span><span style="color:#666666;">((</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">QueryList</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewChild</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewChildren</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ChildComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./child/child.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-parent</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./parent.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./parent.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ParentComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// ViewChildren批量获取元素和组件</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChildren</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ChildComponent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">childs</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">QueryList</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">ChildComponent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChildren</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">boxs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">childs1</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">QueryList</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">ChildComponent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//（3）</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childs</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childs1</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//输出QueryList数组 </span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//QueryList中监听子组件变化的回调函数</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">childs1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">.</span><span style="color:#59873A;">subscribe</span><span style="color:#999999;">((</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="contentchild" tabindex="-1">ContentChild <a class="header-anchor" href="#contentchild" aria-label="Permalink to &quot;ContentChild&quot;">​</a></h2><blockquote><p>获取投影中的dom元素、指令、组件</p></blockquote><p>📝content-parent.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-child</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">head</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#head</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">head</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">main</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">main</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">footer</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">footer</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">app-content-child</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-child</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">head</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#head</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">head</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">main</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">main</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">footer</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">footer</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">app-content-child</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝content-child.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">content-child works!</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-content</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">content-child works!</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-content</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝content-child.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ContentChild</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ElementRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ContentBoxComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../content-box/content-box.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-content-child</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./content-child.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./content-child.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ContentChildComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChild</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">head</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span><span style="color:#B8A965;">static</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#666666;">:</span><span style="color:#5DA994;">ElementRef</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//获取投影中的dom元素</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChild</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ContentBoxComponent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">contentbox</span><span style="color:#666666;">:</span><span style="color:#5DA994;">ElementRef</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//获取组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChild</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">cbox</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span><span style="color:#B8A965;">static</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cbox</span><span style="color:#666666;">:</span><span style="color:#5DA994;">ElementRef</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// 有多个只会获取第一个</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">head</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">contentbox</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cbox</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ContentChild</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ElementRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ContentBoxComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../content-box/content-box.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-content-child</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./content-child.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./content-child.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ContentChildComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChild</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">head</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span><span style="color:#998418;">static</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">ElementRef</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//获取投影中的dom元素</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChild</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ContentBoxComponent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">contentbox</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">ElementRef</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//获取组件</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChild</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">cbox</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span><span style="color:#998418;">static</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cbox</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">ElementRef</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// 有多个只会获取第一个</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">head</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">contentbox</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cbox</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="contentchildren" tabindex="-1">ContentChildren <a class="header-anchor" href="#contentchildren" aria-label="Permalink to &quot;ContentChildren&quot;">​</a></h2><blockquote><p><strong>用法类似ViewChildren, 批量获取投影中到组件或指令。</strong></p><p><strong>默认只批量获取直属组件，获取所有组件需开启：{ descendants: true }</strong></p></blockquote><p>📝content-parent.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">content-parent works!</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-child</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">container</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-content-box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#cbox</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-content-box</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">app-content-child</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">content-parent works!</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-child</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">container</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-content-box</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#cbox</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-content-box</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">app-content-child</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝content-child.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#BD976A;">ContentChildren</span><span style="color:#666666;">,</span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">QueryList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ContentBoxComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../content-box/content-box.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-content-child</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./content-child.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./content-child.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ContentChildComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//ContentChildren没有{static:true}属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChildren</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ContentBoxComponent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cboxs</span><span style="color:#666666;">:</span><span style="color:#5DA994;">QueryList</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">ContentBoxComponent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ContentChildren</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">cbox</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span><span style="color:#B8A965;">descendants</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cboxss</span><span style="color:#666666;">:</span><span style="color:#5DA994;">QueryList</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">ContentBoxComponent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cboxs</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//只获取直属投影组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cboxss</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//获取全部投影组件   </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#B07D48;">ContentChildren</span><span style="color:#999999;">,</span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">QueryList</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ContentBoxComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../content-box/content-box.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-content-child</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./content-child.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./content-child.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ContentChildComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//ContentChildren没有{static:true}属性</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChildren</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ContentBoxComponent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cboxs</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">QueryList</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">ContentBoxComponent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ContentChildren</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">cbox</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span><span style="color:#998418;">descendants</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cboxss</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">QueryList</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">ContentBoxComponent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cboxs</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//只获取直属投影组件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cboxss</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//获取全部投影组件   </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="自定义管道" tabindex="-1">自定义管道 <a class="header-anchor" href="#自定义管道" aria-label="Permalink to &quot;自定义管道&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Pipe</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PipeTransform</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Pipe</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pipepow</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">PipepowPipe</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">PipeTransform</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">transform</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">exponent</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">):</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">number</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//value:底数    exponent:指数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">pow</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#80A665;">isNaN</span><span style="color:#666666;">(</span><span style="color:#BD976A;">exponent</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">exponent</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Pipe</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PipeTransform</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Pipe</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pipepow</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">PipepowPipe</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">PipeTransform</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">transform</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">exponent</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">):</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">number</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//value:底数    exponent:指数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">pow</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#59873A;">isNaN</span><span style="color:#999999;">(</span><span style="color:#B07D48;">exponent</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">exponent</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>在相应的Module中导入并使用</p></blockquote><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{8| pipepow}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{8| pipepow:3}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{value | pipepow:2}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Boost factor: </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">factor</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Normal power: </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">power</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{factor | pipepow:power}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{8| pipepow}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{8| pipepow:3}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{value | pipepow:2}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Boost factor: </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">factor</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Normal power: </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">power</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{factor | pipepow:power}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="非纯管道" tabindex="-1">非纯管道 <a class="header-anchor" href="#非纯管道" aria-label="Permalink to &quot;非纯管道&quot;">​</a></h2><blockquote><p>默认的管道都是纯的，Angular 会忽略复合对象中的变化，即管道只会检查原始值或对象引用</p></blockquote><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>可如果数组中的元素变化，增删改，由于引用没有变化，不会执行变更检测，所以不会执行管道的逻辑</p></div><details class="details custom-block"><summary>Pipe2Pipe</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Pipe</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PipeTransform</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Pipe</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pipe2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">pure</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//非纯管道开启方式一</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Pipe2Pipe</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">PipeTransform</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">transform</span><span style="color:#666666;">(</span><span style="color:#BD976A;">allheros</span><span style="color:#666666;">: </span><span style="color:#5DA994;">any</span><span style="color:#666666;">):</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">any</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//赛选会飞的英雄</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">allheros</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">canFly</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Pipe</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PipeTransform</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Pipe</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pipe2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">pure</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//非纯管道开启方式一</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Pipe2Pipe</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">PipeTransform</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">transform</span><span style="color:#999999;">(</span><span style="color:#B07D48;">allheros</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">):</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">any</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//赛选会飞的英雄</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">allheros</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">canFly</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><details class="details custom-block"><summary>AppComponent</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Hero</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">id</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">canFly</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">boolean</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">HEROES</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_0</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">盖伦</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">              },</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">赵信</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">              },</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">嘉文</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">              },</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">易大师</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">              },</span></span>
+<span class="line"><span style="color:#CB7676;">              </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hero_3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">泰达米尔</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#666666;">              }</span></span>
+<span class="line"><span style="color:#CB7676;">          </span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;input type=&quot;text&quot; #box (keyup.enter)=&quot;addHero(box.value)&quot; placeholder=&quot;hero name&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;button (click)=&quot;reset()&quot;&gt;Reset&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;div *ngFor=&quot;let hero of (heroes | pipe2)&quot;&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       {{hero.name}}</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">heroes</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Hero</span><span style="color:#666666;">[] =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">canFly</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">reset</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#80A665;">addHero</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">trim</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">         </span><span style="color:#758575DD;">// 不改变引用没有用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">heroes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({ </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">flier_</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;"> </span><span style="color:#CB7676;">+</span><span style="color:#666666;"> </span><span style="color:#BD976A;">Date</span><span style="color:#666666;">.</span><span style="color:#80A665;">now</span><span style="color:#666666;">(), </span><span style="color:#BD976A;">name</span><span style="color:#666666;">, </span><span style="color:#B8A965;">canFly</span><span style="color:#666666;">: </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">canFly</span><span style="color:#666666;"> });</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 开启非纯管道方式二、改变引用，触发变更检测</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// this.heroes = [...this.heroes,{id:&#39;flier&#39;+Date.now(),name,canFly:this.canFly}]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#80A665;">reset</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">heroes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">HEROES</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Hero</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">id</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">canFly</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">boolean</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">HEROES</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_0</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">盖伦</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">              },</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">赵信</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">              },</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">嘉文</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">              },</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">易大师</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">              },</span></span>
+<span class="line"><span style="color:#AB5959;">              </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hero_3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">泰达米尔</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#999999;">              }</span></span>
+<span class="line"><span style="color:#AB5959;">          </span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;input type=&quot;text&quot; #box (keyup.enter)=&quot;addHero(box.value)&quot; placeholder=&quot;hero name&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;button (click)=&quot;reset()&quot;&gt;Reset&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;div *ngFor=&quot;let hero of (heroes | pipe2)&quot;&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       {{hero.name}}</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">heroes</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Hero</span><span style="color:#999999;">[] =</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">canFly</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">reset</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#59873A;">addHero</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">trim</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">         </span><span style="color:#A0ADA0;">// 不改变引用没有用</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">heroes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({ </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">flier_</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;"> </span><span style="color:#AB5959;">+</span><span style="color:#999999;"> </span><span style="color:#B07D48;">Date</span><span style="color:#999999;">.</span><span style="color:#59873A;">now</span><span style="color:#999999;">(), </span><span style="color:#B07D48;">name</span><span style="color:#999999;">, </span><span style="color:#998418;">canFly</span><span style="color:#999999;">: </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">canFly</span><span style="color:#999999;"> });</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 开启非纯管道方式二、改变引用，触发变更检测</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// this.heroes = [...this.heroes,{id:&#39;flier&#39;+Date.now(),name,canFly:this.canFly}]</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#59873A;">reset</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">heroes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">HEROES</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">();</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h2 id="生命周期" tabindex="-1">生命周期 <a class="header-anchor" href="#生命周期" aria-label="Permalink to &quot;生命周期&quot;">​</a></h2><blockquote><p>生命周期函数：组件创建、组件更新、组件销毁的时候会触发的一系列的方法。</p><p>当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子函数。</p></blockquote><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106200214.png"><details class="details custom-block"><summary>所有生命周期钩子函数执行顺序</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterContentChecked</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterContentInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewChecked</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">DoCheck</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnChanges</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnDestroy</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">SimpleChanges</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">OnChanges</span><span style="color:#666666;">,</span><span style="color:#80A665;">DoCheck</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterContentInit</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">AfterContentChecked</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewInit</span><span style="color:#666666;">,</span><span style="color:#80A665;">AfterViewChecked</span><span style="color:#666666;">,</span><span style="color:#80A665;">OnDestroy</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(){}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//组件初始化，写简单的逻辑和数据初始化操作，（获取不到最新输入属性值）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnChanges</span><span style="color:#666666;">(</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">: </span><span style="color:#5DA994;">SimpleChanges</span><span style="color:#666666;">):</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">changes </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">changes</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//可最早获取到输入属性最新值，输入属性更新时触发，但组件内部改变输入属性是不会触发的</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngOnInit </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//适合请求数据初始化组件，只调用一次</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngDoCheck</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngDoCheck </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterContentInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//在组件内容初始化之后调用，只调用一次。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterContentInit</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterContentChecked</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//组件每次检查内容时调用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterContentChecked </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//组件相应的视图初始化之后调用，只调用一次。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterViewInit </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngAfterViewChecked</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//组件每次检查视图时调用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngAfterViewChecked</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnDestroy</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//指令销毁前调用,适合理一些残存的状态操作：</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//取消订阅可观察对象和 DOM 事件、停止 interval 计时器、</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//反注册该指令在全局或应用服务中注册过的所有回调</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngOnDestroy</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterContentChecked</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterContentInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewChecked</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">DoCheck</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnChanges</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnDestroy</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">SimpleChanges</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">OnChanges</span><span style="color:#999999;">,</span><span style="color:#59873A;">DoCheck</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterContentInit</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">AfterContentChecked</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewInit</span><span style="color:#999999;">,</span><span style="color:#59873A;">AfterViewChecked</span><span style="color:#999999;">,</span><span style="color:#59873A;">OnDestroy</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(){}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//组件初始化，写简单的逻辑和数据初始化操作，（获取不到最新输入属性值）</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnChanges</span><span style="color:#999999;">(</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">SimpleChanges</span><span style="color:#999999;">):</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">changes </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">changes</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//可最早获取到输入属性最新值，输入属性更新时触发，但组件内部改变输入属性是不会触发的</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngOnInit </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//适合请求数据初始化组件，只调用一次</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngDoCheck</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngDoCheck </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterContentInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//在组件内容初始化之后调用，只调用一次。</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterContentInit</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterContentChecked</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//组件每次检查内容时调用</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterContentChecked </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//组件相应的视图初始化之后调用，只调用一次。</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterViewInit </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngAfterViewChecked</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//组件每次检查视图时调用</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngAfterViewChecked</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnDestroy</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//指令销毁前调用,适合理一些残存的状态操作：</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//取消订阅可观察对象和 DOM 事件、停止 interval 计时器、</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//反注册该指令在全局或应用服务中注册过的所有回调</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngOnDestroy</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106202053.png"><blockquote><p>当组件、父组件发生变更检测后都会调用这三个钩子：</p><p>模板中的DOM事件触发就会进行变更检测（<code>&lt;input (input)=&quot;$event&quot;&gt;</code>）</p><p>ngDoCheck ngAfterContentChecked ngAfterViewChecked</p></blockquote><ul><li><strong>指令与组件共有的钩子</strong><ul><li>ngOnChanges</li><li>ngOnInit</li><li>ngDoCheck</li><li>ngOnDestroy</li></ul></li><li><strong>组件特有的钩子</strong><ul><li>ngAfterContentInit</li><li>ngAfterContentChecked</li><li>ngAfterViewInit</li><li>ngAfterViewChecked</li></ul></li></ul><h2 id="变更检测" tabindex="-1">变更检测 <a class="header-anchor" href="#变更检测" aria-label="Permalink to &quot;变更检测&quot;">​</a></h2><h2 id="默认策略下触发变更检测的时机" tabindex="-1">默认策略下触发变更检测的时机 <a class="header-anchor" href="#默认策略下触发变更检测的时机" aria-label="Permalink to &quot;默认策略下触发变更检测的时机&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">changeDetection</span><span style="color:#666666;">:</span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Default</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">changeDetection</span><span style="color:#999999;">:</span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Default</span></span></code></pre></div><ul><li>事件：页面 click、submit、mouse down……</li><li>XHR：从后端服务器拿到数据</li><li>定时器：setTimeout()、setInterval()</li></ul><blockquote><p>只要某个组件触发了以上中的一个，就会从顶级组件从上至下开始进行变更检测，每个组件都会进行变更检测，</p><p>检测组件中的值是否应该改变</p></blockquote><div class="warning custom-block"><p class="custom-block-title"><b>注意</b></p><p>已经检测完的组件，不允许在被子组件修改，(子组件不能修改检测完的父组件数据)，这就是单向数据流</p></div><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211101223945.png"><h2 id="onpush下触发变更检测时机" tabindex="-1">onPush下触发变更检测时机 <a class="header-anchor" href="#onpush下触发变更检测时机" aria-label="Permalink to &quot;onPush下触发变更检测时机&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">changeDetection</span><span style="color:#666666;">:</span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">.</span><span style="color:#BD976A;">OnPush</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">changeDetection</span><span style="color:#999999;">:</span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">.</span><span style="color:#B07D48;">OnPush</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>onPush策略会把组件从组件树中剥离出去，他和他的子组件都不会检测了；</p><p>定时器会触发变更检测，但是依然会跳过onPush策略组件。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>组件的@Input引用发生变化。</li><li>组件的 DOM 事件，包括它子组件的 DOM 事件，比如 click、submit、mouse down。</li><li>Observable 订阅事件，同时设置 Async pipe。</li><li>手动调用：ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()方法</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">markForCheck</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//把该视图显式标记为已更改（脏的），以便它下一轮再次进行检查。</span></span>
+<span class="line"><span style="color:#80A665;">detectChanges</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。(强行检测)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">markForCheck</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//把该视图显式标记为已更改（脏的），以便它下一轮再次进行检查。</span></span>
+<span class="line"><span style="color:#59873A;">detectChanges</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。(强行检测)</span></span></code></pre></div></div><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20211106210242.png"><h2 id="动态组件" tabindex="-1">动态组件 <a class="header-anchor" href="#动态组件" aria-label="Permalink to &quot;动态组件&quot;">​</a></h2><blockquote><p>如果说，之前在模版中调用的组件为静态组件（比如：app-xxx）</p><p>那么不用在模版里声明，而是通过ts动态插入到dom中到组件，可以视为动态组件</p></blockquote><p>📝alert.component.ts:</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Output</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EventEmitter</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AlertTheme</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">primary</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">danger</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">warning</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AlertOption</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">content</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">theme</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">AlertTheme</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-alert</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;div [class]=&quot;wrapCls&quot; role=&quot;alert&quot;&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;span class=&quot;content&quot;&gt;{{ options.content }}&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;i class=&quot;close&quot; (click)=&quot;closed.emit()&quot;&gt;×&lt;/i&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styles</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    .close {</span></span>
+<span class="line"><span style="color:#C98A7D;">      display: block;</span></span>
+<span class="line"><span style="color:#C98A7D;">      width: 20px;</span></span>
+<span class="line"><span style="color:#C98A7D;">      height: 20px;</span></span>
+<span class="line"><span style="color:#C98A7D;">      position: absolute;</span></span>
+<span class="line"><span style="color:#C98A7D;">      right: 10px;</span></span>
+<span class="line"><span style="color:#C98A7D;">      top: 50%;</span></span>
+<span class="line"><span style="color:#C98A7D;">      margin-top: -10px;</span></span>
+<span class="line"><span style="color:#C98A7D;">      cursor: pointer;</span></span>
+<span class="line"><span style="color:#C98A7D;">    }</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">changeDetection</span><span style="color:#666666;">: </span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">.</span><span style="color:#BD976A;">OnPush</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AlertComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">options</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Required</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">AlertOption</span><span style="color:#666666;">&gt; =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">theme</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">primary</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">closed</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">void</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">wrapCls</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">string</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">alert alert-</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">options</span><span style="color:#666666;">.</span><span style="color:#BD976A;">theme</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;"> fixed-top</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">setOptions</span><span style="color:#666666;">(</span><span style="color:#BD976A;">options</span><span style="color:#666666;">: </span><span style="color:#5DA994;">AlertOption</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">options</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= { ...</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">options</span><span style="color:#666666;">, ...</span><span style="color:#BD976A;">options</span><span style="color:#666666;"> };</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Output</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EventEmitter</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AlertTheme</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">primary</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">danger</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">warning</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AlertOption</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">content</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">theme</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">AlertTheme</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-alert</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;div [class]=&quot;wrapCls&quot; role=&quot;alert&quot;&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;span class=&quot;content&quot;&gt;{{ options.content }}&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;i class=&quot;close&quot; (click)=&quot;closed.emit()&quot;&gt;×&lt;/i&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styles</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    .close {</span></span>
+<span class="line"><span style="color:#B56959;">      display: block;</span></span>
+<span class="line"><span style="color:#B56959;">      width: 20px;</span></span>
+<span class="line"><span style="color:#B56959;">      height: 20px;</span></span>
+<span class="line"><span style="color:#B56959;">      position: absolute;</span></span>
+<span class="line"><span style="color:#B56959;">      right: 10px;</span></span>
+<span class="line"><span style="color:#B56959;">      top: 50%;</span></span>
+<span class="line"><span style="color:#B56959;">      margin-top: -10px;</span></span>
+<span class="line"><span style="color:#B56959;">      cursor: pointer;</span></span>
+<span class="line"><span style="color:#B56959;">    }</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">changeDetection</span><span style="color:#999999;">: </span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">.</span><span style="color:#B07D48;">OnPush</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">options</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Required</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">AlertOption</span><span style="color:#999999;">&gt; =</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">theme</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">primary</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">closed</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">void</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">get</span><span style="color:#393A34;"> </span><span style="color:#59873A;">wrapCls</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">string</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">alert alert-</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">options</span><span style="color:#999999;">.</span><span style="color:#B07D48;">theme</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;"> fixed-top</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">setOptions</span><span style="color:#999999;">(</span><span style="color:#B07D48;">options</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">AlertOption</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">options</span><span style="color:#393A34;"> </span><span style="color:#999999;">= { ...</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">options</span><span style="color:#999999;">, ...</span><span style="color:#B07D48;">options</span><span style="color:#999999;"> };</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>调用 <code>alert.component</code></p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">ApplicationRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ComponentFactoryResolver</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ComponentRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EmbeddedViewRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Injector</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">AlertComponent</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../../components/alert/alert.component</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-show-data</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./show-data.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./show-data.component.scss</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ShowDataComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">container</span><span style="color:#666666;">: </span><span style="color:#5DA994;">AlertComponent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ComponentRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">AlertComponent</span><span style="color:#666666;">&gt;;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfr</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ComponentFactoryResolver</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inject</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Injector</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">appRef</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ApplicationRef</span></span>
+<span class="line"><span style="color:#666666;">  )</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">showAlert</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">getContainer</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 调用组件的某个方法执行逻辑，比如下面这个传参</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#666666;">.</span><span style="color:#80A665;">setOptions</span><span style="color:#666666;">({ </span><span style="color:#B8A965;">content</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">一段提示</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">, </span><span style="color:#B8A965;">theme</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">warning</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;"> });</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getContainer</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AlertComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 创建指定类型的组件工厂（生产指定类型的组件）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const </span><span style="color:#BD976A;">factory</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cfr</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolveComponentFactory</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">AlertComponent</span><span style="color:#666666;">&gt;(</span><span style="color:#BD976A;">AlertComponent</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 根据指定的类型，创建组件的示例</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">factory</span><span style="color:#666666;">.</span><span style="color:#80A665;">create</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inject</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 将组件试图添加到试图树中，以激活变更检测</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">appRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">attachView</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hostView</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 将组件到模版(包括app-alert标签)，添加到body最后</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#80A665;">appendChild</span><span style="color:#666666;">((</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hostView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">EmbeddedViewRef</span><span style="color:#666666;">&lt;{}&gt;).</span><span style="color:#BD976A;">rootNodes</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">HTMLElement</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 监听组件销毁事件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">onDestroy</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">componentRef destory</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 获取组件实例，相当于用@ViewChild获取子组件一样</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const </span><span style="color:#666666;">{</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">instance</span><span style="color:#CB7676;"> </span><span style="color:#666666;">}</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 监听组件到output事件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">instance</span><span style="color:#666666;">.</span><span style="color:#BD976A;">closed</span><span style="color:#666666;">.</span><span style="color:#80A665;">subscribe</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">componentRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">destroy</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">instance</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">ApplicationRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ComponentFactoryResolver</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ComponentRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EmbeddedViewRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Injector</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">AlertComponent</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../../components/alert/alert.component</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-show-data</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./show-data.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./show-data.component.scss</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ShowDataComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">container</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ComponentRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#999999;">&gt;;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfr</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ComponentFactoryResolver</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inject</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Injector</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">appRef</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ApplicationRef</span></span>
+<span class="line"><span style="color:#999999;">  )</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">showAlert</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">getContainer</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 调用组件的某个方法执行逻辑，比如下面这个传参</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#999999;">.</span><span style="color:#59873A;">setOptions</span><span style="color:#999999;">({ </span><span style="color:#998418;">content</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">一段提示</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">, </span><span style="color:#998418;">theme</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">warning</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;"> });</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getContainer</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 创建指定类型的组件工厂（生产指定类型的组件）</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const </span><span style="color:#B07D48;">factory</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cfr</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolveComponentFactory</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">AlertComponent</span><span style="color:#999999;">&gt;(</span><span style="color:#B07D48;">AlertComponent</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 根据指定的类型，创建组件的示例</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">factory</span><span style="color:#999999;">.</span><span style="color:#59873A;">create</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inject</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 将组件试图添加到试图树中，以激活变更检测</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">appRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">attachView</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hostView</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 将组件到模版(包括app-alert标签)，添加到body最后</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#59873A;">appendChild</span><span style="color:#999999;">((</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hostView</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">as</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">EmbeddedViewRef</span><span style="color:#999999;">&lt;{}&gt;).</span><span style="color:#B07D48;">rootNodes</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">as</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">HTMLElement</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 监听组件销毁事件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">onDestroy</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">componentRef destory</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 获取组件实例，相当于用@ViewChild获取子组件一样</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const </span><span style="color:#999999;">{</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">instance</span><span style="color:#AB5959;"> </span><span style="color:#999999;">}</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 监听组件到output事件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">instance</span><span style="color:#999999;">.</span><span style="color:#B07D48;">closed</span><span style="color:#999999;">.</span><span style="color:#59873A;">subscribe</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">componentRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">destroy</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">instance</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>v9和v10，动态组件都不需要entryComponents了，当然写了也没有问题 从v11开始，entryComponents可能被删除 v8及以前，动态组件一定要声明entryComponents</p></blockquote><h2 id="ngtemplateoutlet指令" tabindex="-1">NgTemplateOutlet指令 <a class="header-anchor" href="#ngtemplateoutlet指令" aria-label="Permalink to &quot;NgTemplateOutlet指令&quot;">​</a></h2><blockquote><p>NgTemplateOutlet是一个结构型指令</p></blockquote><p>📝app.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-tmp-outlet</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[render]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">mycontent</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-tmp-outlet</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#mycontent</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段父组件传入的内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">&lt;!--使用tem-outlet组件中的数据--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#mycontent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-context</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-val</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段父组件传入的内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">使用outlet中的context:{{context}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">使用outlet中的value:{{val}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-tmp-outlet</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[render]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">mycontent</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-tmp-outlet</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#mycontent</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段父组件传入的内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!--使用tem-outlet组件中的数据--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#mycontent</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-context</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-val</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段父组件传入的内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">使用outlet中的context:{{context}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">使用outlet中的value:{{val}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝tmp-outlet.component.html</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">tmp-outlet works!</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutlet]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">render || default</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-container</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">&lt;!--传递出去tem-outlet组件中的数据--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutlet]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">render || default</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutletContext]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">myContext</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-container</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- &lt;ng-container *ngTemplateOutlet=&quot;render || default ;context:myContext&quot;&gt;&lt;/ng-container&gt;简写 --&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">&lt;!--ng-template使用效果一样 --&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutlet]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">render || default</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngTemplateOutletContext]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">myContext</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">*ngTemplateOutlet</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">render || default ;context:myContext</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#default</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段组价默认的内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- context在内部ng-template也可以绑定 --&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">#default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-context</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-val</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段组价默认的内容</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> context:{{context}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> value:{{val}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">tmp-outlet works!</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-container</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutlet]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">render || default</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-container</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!--传递出去tem-outlet组件中的数据--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-container</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutlet]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">render || default</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutletContext]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">myContext</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-container</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- &lt;ng-container *ngTemplateOutlet=&quot;render || default ;context:myContext&quot;&gt;&lt;/ng-container&gt;简写 --&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!--ng-template使用效果一样 --&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutlet]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">render || default</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngTemplateOutletContext]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">myContext</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">*ngTemplateOutlet</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">render || default ;context:myContext</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#default</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段组价默认的内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- context在内部ng-template也可以绑定 --&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">#default</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-context</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-val</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段组价默认的内容</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> context:{{context}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> value:{{val}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝tmp-outlet.component.ts</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-tmp-outlet</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./tmp-outlet.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./tmp-outlet.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">TmpOutletComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">render</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">myContext</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">$implicit</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">tmp-outlet组件里的context</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">, </span><span style="color:#B8A965;">value</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">tmp-outlet组件里的value</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-tmp-outlet</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./tmp-outlet.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./tmp-outlet.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">TmpOutletComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">render</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">myContext</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">$implicit</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">tmp-outlet组件里的context</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">, </span><span style="color:#998418;">value</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">tmp-outlet组件里的value</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,72),e=[o];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md.574a1956.lean.js" "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md.574a1956.lean.js"
new file mode 100644
index 00000000..d00510d1
--- /dev/null
+++ "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.md.574a1956.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Angular/Angular基础总结三.md","filePath":"Framework/Angular/Angular基础总结三.md"}'),p={name:"Framework/Angular/Angular基础总结三.md"},o=l("",72),e=[o];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md.0a8462a7.js" "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md.0a8462a7.js"
new file mode 100644
index 00000000..e8995044
--- /dev/null
+++ "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md.0a8462a7.js"
@@ -0,0 +1,753 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Angular/Angular基础总结二.md","filePath":"Framework/Angular/Angular基础总结二.md"}'),p={name:"Framework/Angular/Angular基础总结二.md"},o=l(`<h2 id="双向绑定" tabindex="-1">双向绑定 <a class="header-anchor" href="#双向绑定" aria-label="Permalink to &quot;双向绑定&quot;">​</a></h2><h3 id="_1-基本双向绑定" tabindex="-1">1. 基本双向绑定 <a class="header-anchor" href="#_1-基本双向绑定" aria-label="Permalink to &quot;1. 基本双向绑定&quot;">​</a></h3><p><strong>方法一：</strong></p><p>📝父组件：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;app-sbind [size]=&quot;fontSizePx&quot; (change)=&quot; fontSizePx = $event&quot;&gt;&lt;/app-sbind&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">&lt;p [style.font-size.px]=&quot;fontSizePx&quot;&gt;APP 字体大小: {{fontSizePx}}px&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fontSizePx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">&lt;app-sbind [size]=&quot;fontSizePx&quot; (change)=&quot; fontSizePx = $event&quot;&gt;&lt;/app-sbind&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">&lt;p [style.font-size.px]=&quot;fontSizePx&quot;&gt;APP 字体大小: {{fontSizePx}}px&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fontSizePx</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝子组件：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EventEmitter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Output</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-sbind</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;button (click)=&quot;dec()&quot;&gt;-&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;button (click)=&quot;inc()&quot;&gt;+&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p [style.font-size.px]=&quot;size&quot;&gt;sbind 字体大小: {{size}}px&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;/div&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./sbind.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">SbindComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//默认值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">change</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">number</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">dec</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">change</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">inc</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">change</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EventEmitter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Output</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-sbind</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;button (click)=&quot;dec()&quot;&gt;-&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;button (click)=&quot;inc()&quot;&gt;+&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p [style.font-size.px]=&quot;size&quot;&gt;sbind 字体大小: {{size}}px&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;/div&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./sbind.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">SbindComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//默认值</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">=</span><span style="color:#2F798A;">16</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">change</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">dec</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">change</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">inc</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">change</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>方法二：</strong>（联合写法）</p><p>📝父组件：<code>app.component.html</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">app-sbind</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[(size)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fontSizePx</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">app-sbind</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[style.font-size.px]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fontSizePx</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">APP 字体大小: {{fontSizePx}}px</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">app-sbind</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[(size)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fontSizePx</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">app-sbind</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[style.font-size.px]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fontSizePx</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">APP 字体大小: {{fontSizePx}}px</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝父组件：<code>app.component.ts</code></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./app.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fontSizePx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./app.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fontSizePx</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>📝子组件：<code>sbind.component.html</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">(click)</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">dec()</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">-</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">button</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">(click)</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inc()</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">+</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">button</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[style.font-size.px]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">size</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> sbind 字体大小: {{size}}px</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">(click)</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">dec()</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">-</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">button</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">(click)</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inc()</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">+</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">button</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[style.font-size.px]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">size</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> sbind 字体大小: {{size}}px</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>📝子组件：<code>sbind.component.ts</code></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EventEmitter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Output</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-sbind</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">templateUrl</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./sbind.component.html</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">styleUrls</span><span style="color:#666666;">: [</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./sbind.component.css</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">SbindComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//默认值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 双向绑定语法：output变量名=输入属性名+Change</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sizeChange</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">number</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">dec</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//减</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">sizeChange</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">inc</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//加</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">sizeChange</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EventEmitter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Output</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-sbind</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">templateUrl</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./sbind.component.html</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">styleUrls</span><span style="color:#999999;">: [</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./sbind.component.css</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">SbindComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//默认值</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">=</span><span style="color:#2F798A;">16</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 双向绑定语法：output变量名=输入属性名+Change</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sizeChange</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">dec</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//减</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">sizeChange</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">inc</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//加</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">sizeChange</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_2-input双向绑定" tabindex="-1">2. input双向绑定 <a class="header-anchor" href="#_2-input双向绑定" aria-label="Permalink to &quot;2. input双向绑定&quot;">​</a></h3><p><strong>普通写法：</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">value</span><span style="color:#666666;">]=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputVal</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">input</span><span style="color:#666666;">)=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputVal = $event.target.value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;{{</span><span style="color:#BD976A;">inputVal</span><span style="color:#666666;">}}&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//默认值 inputVal=&#39;&#39;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">value</span><span style="color:#999999;">]=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputVal</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">input</span><span style="color:#999999;">)=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputVal = $event.target.value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;{{</span><span style="color:#B07D48;">inputVal</span><span style="color:#999999;">}}&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//默认值 inputVal=&#39;&#39;</span></span></code></pre></div><p><strong>简写形式：</strong></p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><strong>ngMoel 指令来源于FormsModule模块</strong></p><p><code>[(ngMoel)]</code>可拆解为：</p><ol><li><p>名为ngModel的输入属性</p></li><li><p>名为ngModelChange的输出属性</p></li></ol></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;"> =</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngMoel)]</span><span style="color:#666666;"> =</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputVal</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">{{inputVal}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> //默认值 inputVal=&#39;&#39;</span></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- &lt;input type=&quot;text&quot; [ngModel] = &quot;inputVal&quot; (ngModelChange) =&quot;inputVal= $event&quot;&gt;</span></span>
+<span class="line"><span style="color:#758575DD;">&lt;p&gt;{{inputVal}}&lt;/p&gt; 完整写法--&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;"> =</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngMoel)]</span><span style="color:#999999;"> =</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputVal</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">{{inputVal}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> //默认值 inputVal=&#39;&#39;</span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- &lt;input type=&quot;text&quot; [ngModel] = &quot;inputVal&quot; (ngModelChange) =&quot;inputVal= $event&quot;&gt;</span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;p&gt;{{inputVal}}&lt;/p&gt; 完整写法--&gt;</span></span></code></pre></div><h3 id="_3-表单form中双向绑定" tabindex="-1">3. 表单Form中双向绑定 <a class="header-anchor" href="#_3-表单form中双向绑定" aria-label="Permalink to &quot;3. 表单Form中双向绑定&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>表单中使用[(ngModel)]，满足下列两个条件之一：</p><ul><li>给控件加上name属性</li><li>将ngModelOptions.standalone设为true</li></ul></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">form</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> /&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[ngModelOptions]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{ name: &#39;name&#39; }</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> /&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[ngModelOptions]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{ standalone: true }</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> /&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[(ngModel)]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#BD976A;">[ngModelOptions]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{  name: &#39;name&#39; ,standalone: true }</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> /&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">form</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">form</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> /&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[ngModelOptions]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{ name: &#39;name&#39; }</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> /&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[ngModelOptions]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{ standalone: true }</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> /&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[(ngModel)]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#B07D48;">[ngModelOptions]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{  name: &#39;name&#39; ,standalone: true }</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> /&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">form</span><span style="color:#999999;">&gt;</span></span></code></pre></div><details class="details custom-block"><summary>ngModel拓展</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChild</span><span style="color:#666666;">(</span><span style="color:#BD976A;">NgModel</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">ngModel</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">NgModel</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#80A665;">getVal</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">ngModel</span><span style="color:#666666;">.</span><span style="color:#BD976A;">viewModel</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//获取[(ngModel)]所绑定input的值</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#80A665;">setVal</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">ngModel</span><span style="color:#666666;">.</span><span style="color:#80A665;">viewToModelUpdate</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">newValue</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//赋值（不太好使）</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChild</span><span style="color:#999999;">(</span><span style="color:#B07D48;">NgModel</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">private</span><span style="color:#393A34;"> </span><span style="color:#59873A;">ngModel</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">NgModel</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#59873A;">getVal</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">ngModel</span><span style="color:#999999;">.</span><span style="color:#B07D48;">viewModel</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//获取[(ngModel)]所绑定input的值</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#59873A;">setVal</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">ngModel</span><span style="color:#999999;">.</span><span style="color:#59873A;">viewToModelUpdate</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">newValue</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//赋值（不太好使）</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h2 id="属性型指令" tabindex="-1">属性型指令 <a class="header-anchor" href="#属性型指令" aria-label="Permalink to &quot;属性型指令&quot;">​</a></h2><blockquote><p>指令：<strong>用于改变DOM元素的外观或行为的指令</strong>（组件是一种特殊的指令）</p></blockquote><details class="details custom-block"><summary>组件改为属性型指令</summary><p>📝AppComponent</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">app-for</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">dasfsada</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">app-for</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">dasfsada</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[app-decr]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//属性选择器</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">   </span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">DecrComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[app-decr]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//属性选择器</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">   </span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">DecrComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h2 id="结构型指令" tabindex="-1">结构型指令 <a class="header-anchor" href="#结构型指令" aria-label="Permalink to &quot;结构型指令&quot;">​</a></h2><h3 id="ngif指令" tabindex="-1"><code>*ngIf</code>指令 <a class="header-anchor" href="#ngif指令" aria-label="Permalink to &quot;\`*ngIf\`指令&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">*ngIf</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">isShow</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段文字 {{ isShow }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">&lt;!-- &lt;p *ngIf=&quot;isShow as s&quot;&gt;一段文字 {{ s }}&lt;/p&gt; 局部变量：只能在标签内部使用--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">isShow:true显示，反之（取决于绑定的值是否为真）</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">*ngIf</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">isShow</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段文字 {{ isShow }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">&lt;!-- &lt;p *ngIf=&quot;isShow as s&quot;&gt;一段文字 {{ s }}&lt;/p&gt; 局部变量：只能在标签内部使用--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">isShow:true显示，反之（取决于绑定的值是否为真）</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>会改变DOM结构，原理：移除和插入DOM节点</p></div><details class="details custom-block"><summary>*ngIf 完整写法</summary><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[ngIf]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">isShow</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">let-s</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">*ngIf</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">isShow</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">一段文字 {{ isShow }} {{s}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[ngIf]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">isShow</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">let-s</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">*ngIf</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">isShow</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">一段文字 {{ isShow }} {{s}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span></code></pre></div></details><p><strong>ngIfElese</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-if</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;div *ngIf=&quot;condition; else elseBlock&quot;&gt;condition为真时显示&lt;/div&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;ng-template ##elseBlock&gt; </span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p&gt; condition为假时显示 &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// ##elseBlock:模板的引用</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IfComp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">condition</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-if</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;div *ngIf=&quot;condition; else elseBlock&quot;&gt;condition为真时显示&lt;/div&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">    &lt;ng-template ##elseBlock&gt; </span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p&gt; condition为假时显示 &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// ##elseBlock:模板的引用</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IfComp</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">condition</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>ngIfThen</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-if</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;div *ngIf=&quot;condition; then thenBlock else elseBlock&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;ng-template ##thenBlock&gt; condition为true时显示&lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;ng-template ##elseBlock&gt; condition为false时显示&lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span><span style="color:#758575DD;">//只会显示一个ng-template，第一个div只是用于承载，并不会显示</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IfComp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">condition</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-if</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;div *ngIf=&quot;condition; then thenBlock else elseBlock&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;ng-template ##thenBlock&gt; condition为true时显示&lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;ng-template ##elseBlock&gt; condition为false时显示&lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span><span style="color:#A0ADA0;">//只会显示一个ng-template，第一个div只是用于承载，并不会显示</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IfComp</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">condition</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>TemplateRef拓展</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ChangeDetectionStrategy</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewChild</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">TemplateRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">AfterViewInit</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-if</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;button(click)=&quot;condition = !condition&quot;&gt;toggle block&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p *ngIf=&quot;condition else elseBlocks&quot;&gt;{{ condition }} === true 时显示&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">	&lt;ng-template ##firstTpl&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p&gt;{{ condition }} === false 时显示&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IfComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnInit</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">AfterViewInit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">elseBlocks</span><span style="color:#666666;">: </span><span style="color:#5DA994;">TemplateRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">any</span><span style="color:#666666;">&gt; =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//获取组件的变量elseBlocks</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">ViewChild</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">firstTpl</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">static</span><span style="color:#666666;">: </span><span style="color:#4D9375;">true</span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">primaryBlock</span><span style="color:#666666;">: </span><span style="color:#5DA994;">TemplateRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">any</span><span style="color:#666666;">&gt; =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">condition</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnInit</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ngOnInit</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">primaryBlock</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">elseBlocks</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">primaryBlock</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">   </span><span style="color:#758575DD;">//获取到##firstTpl模板引用赋值给elseBlocks变量</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//运行效果和ngIfElese案例一样</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ChangeDetectionStrategy</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewChild</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">TemplateRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">AfterViewInit</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-if</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;button(click)=&quot;condition = !condition&quot;&gt;toggle block&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p *ngIf=&quot;condition else elseBlocks&quot;&gt;{{ condition }} === true 时显示&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">	&lt;ng-template ##firstTpl&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p&gt;{{ condition }} === false 时显示&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/ng-template&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IfComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnInit</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">AfterViewInit</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">elseBlocks</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">TemplateRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">any</span><span style="color:#999999;">&gt; =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//获取组件的变量elseBlocks</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">ViewChild</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">firstTpl</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">static</span><span style="color:#999999;">: </span><span style="color:#1E754F;">true</span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">primaryBlock</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">TemplateRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">any</span><span style="color:#999999;">&gt; =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">condition</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnInit</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ngOnInit</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">primaryBlock</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">elseBlocks</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">primaryBlock</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">   </span><span style="color:#A0ADA0;">//获取到##firstTpl模板引用赋值给elseBlocks变量</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//运行效果和ngIfElese案例一样</span></span></code></pre></div></details><h3 id="ngfor指令" tabindex="-1"><code>*ngFor</code>指令 <a class="header-anchor" href="#ngfor指令" aria-label="Permalink to &quot;\`*ngFor\`指令&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-for</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;ul&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;li *ngFor=&quot;let item of Persons; </span></span>
+<span class="line"><span style="color:#C98A7D;">			index as i; count as len; let ev = even; let od = odd; let f = first; let l = last;</span></span>
+<span class="line"><span style="color:#C98A7D;">			trackBy: trackByPerson&quot;&gt;{{ item.name }}&lt;/li&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/ul&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">ForComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">Persons</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">p1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">张三</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">p2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">李四</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">p3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">王五</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">  },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#80A665;">trackByPerson</span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#BD976A;">item</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//追踪id，id值不变不刷新（提升性能）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-for</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;ul&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;li *ngFor=&quot;let item of Persons; </span></span>
+<span class="line"><span style="color:#B56959;">			index as i; count as len; let ev = even; let od = odd; let f = first; let l = last;</span></span>
+<span class="line"><span style="color:#B56959;">			trackBy: trackByPerson&quot;&gt;{{ item.name }}&lt;/li&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/ul&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">ForComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">Persons</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">p1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">张三</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  },</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">p2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">李四</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  },</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">p3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">王五</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">  },</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#59873A;">trackByPerson</span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#B07D48;">item</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//追踪id，id值不变不刷新（提升性能）</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>ngFor局部变量</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">number</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//可迭代对象中当前条目的索引。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">count</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">number</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//可迭代对象的长度。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">first</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">boolean</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//如果当前条目是可迭代对象中的第一个条目则为 true。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">last</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">boolean</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//如果当前条目是可迭代对象中的最后一个条目则为 true。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">even</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">boolean</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//如果当前条目在可迭代对象中的索引号为偶数则为 true。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">odd</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">boolean</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//如果当前条目在可迭代对象中的索引号为奇数则为 true。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">$implicit</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">T</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//迭代目标（绑定到ngForOf）中每个条目的值。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">ngForOf</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">NgIterable</span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">T</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 async 管道时（userStreams | async）。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">number</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//可迭代对象中当前条目的索引。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">count</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">number</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//可迭代对象的长度。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">first</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">boolean</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//如果当前条目是可迭代对象中的第一个条目则为 true。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">last</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">boolean</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//如果当前条目是可迭代对象中的最后一个条目则为 true。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">even</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">boolean</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//如果当前条目在可迭代对象中的索引号为偶数则为 true。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">odd</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">boolean</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//如果当前条目在可迭代对象中的索引号为奇数则为 true。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">$implicit</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">T</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//迭代目标（绑定到ngForOf）中每个条目的值。</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">ngForOf</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">NgIterable</span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">T</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 async 管道时（userStreams | async）。</span></span></code></pre></div></details><details class="details custom-block"><summary>*ngFor展开写法</summary><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">ngFor</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">[ngForOf]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">heros</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">[ngForTrackBy]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">trackByHero</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-item</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-i</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">index</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-od</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">odd</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-ev</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">even</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-len</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">count</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-f</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">first</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">let-l</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">last</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[class.even]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ev</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[class.odd]</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">od</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">index: {{ i }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">count: {{ len }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">name: {{ item.name }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">first: {{ f }} -- last: {{ l }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">hr</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">ngFor</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">[ngForOf]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">heros</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">[ngForTrackBy]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">trackByHero</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-item</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-i</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">index</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-od</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">odd</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-ev</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">even</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-len</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">count</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-f</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">first</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">let-l</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">last</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[class.even]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ev</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[class.odd]</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">od</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">index: {{ i }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">count: {{ len }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">name: {{ item.name }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">first: {{ f }} -- last: {{ l }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">hr</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span></code></pre></div></details><h3 id="ngswitch-指令" tabindex="-1"><code>[ngSwitch]</code>指令 <a class="header-anchor" href="#ngswitch-指令" aria-label="Permalink to &quot;\`[ngSwitch]\`指令&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>[ngSwitch]</code> 为属性型指令</p><p><code>*ngSwitchCase</code>为结构型指令</p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-switch</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;apple&quot; id=&quot;apple&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;label for=&quot;apple&quot;&gt;🍎&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;pear&quot; id=&quot;pear&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;label for=&quot;pear&quot;&gt;🍐&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;grape&quot; id=&quot;grape&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;label for=&quot;grape&quot;&gt;🍇&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;other&quot; id=&quot;other&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;label for=&quot;other&quot;&gt;other&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">    selected fruit: {{ fruit }}</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;div class=&quot;content&quot; [ngSwitch]=&quot;fruit&quot;&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p *ngSwitchCase=&quot;&#39;apple&#39;&quot;&gt;这是 苹果&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p *ngSwitchCase=&quot;&#39;pear&#39;&quot;&gt; 这是 梨&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p *ngSwitchCase=&quot;&#39;grape&#39;&quot;&gt;这是 葡萄&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;p *ngSwitchDefault&gt;啥都不是&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">SwitchComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fruit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-switch</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;apple&quot; id=&quot;apple&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;label for=&quot;apple&quot;&gt;🍎&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;pear&quot; id=&quot;pear&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;label for=&quot;pear&quot;&gt;🍐&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;grape&quot; id=&quot;grape&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;label for=&quot;grape&quot;&gt;🍇&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;other&quot; id=&quot;other&quot; [(ngModel)]=&quot;fruit&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;label for=&quot;other&quot;&gt;other&lt;/label&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">    selected fruit: {{ fruit }}</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">    &lt;div class=&quot;content&quot; [ngSwitch]=&quot;fruit&quot;&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p *ngSwitchCase=&quot;&#39;apple&#39;&quot;&gt;这是 苹果&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p *ngSwitchCase=&quot;&#39;pear&#39;&quot;&gt; 这是 梨&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p *ngSwitchCase=&quot;&#39;grape&#39;&quot;&gt;这是 葡萄&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;p *ngSwitchDefault&gt;啥都不是&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">SwitchComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fruit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>[ngSwitch]展开写法</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">content</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">ngSwitch</span><span style="color:#666666;">]=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">fruit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ngSwitchCase</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">apple</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;</span><span style="color:#BD976A;">这是苹果</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ngSwitchCase</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">pear</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;</span><span style="color:#BD976A;">这是梨</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ngSwitchCase</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">grape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;</span><span style="color:#BD976A;">这是葡萄</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ngSwitchDefault</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt;</span><span style="color:#BD976A;">啥都不是</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">ng</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">content</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">ngSwitch</span><span style="color:#999999;">]=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">fruit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ngSwitchCase</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">apple</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;</span><span style="color:#B07D48;">这是苹果</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ngSwitchCase</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">pear</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;</span><span style="color:#B07D48;">这是梨</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ngSwitchCase</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">grape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;</span><span style="color:#B07D48;">这是葡萄</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ngSwitchDefault</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt;</span><span style="color:#B07D48;">啥都不是</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">ng</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div></details><h2 id="自定义指令" tabindex="-1">自定义指令 <a class="header-anchor" href="#自定义指令" aria-label="Permalink to &quot;自定义指令&quot;">​</a></h2><p>使用：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">appHighlight</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">highlightColor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">red</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">appHighlight</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">[highlightColor]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">color</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">appHighlight</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">color</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">&lt;!-- 起别名后，输入属性和指令名设为一样--&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">appHighlight</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">highlightColor</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">red</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">appHighlight</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">[highlightColor]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">color</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">appHighlight</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">color</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">&lt;!-- 起别名后，输入属性和指令名设为一样--&gt;</span></span></code></pre></div><h3 id="自定义高亮指令-属性型" tabindex="-1">自定义高亮指令（属性型） <a class="header-anchor" href="#自定义高亮指令-属性型" aria-label="Permalink to &quot;自定义高亮指令（属性型）&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Directive</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ElementRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">EventEmitter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">HostListener</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Output</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Directive</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[appHighlight]</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">HighlightDirective</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">highlightColor</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">// @Input(&#39;appHighlight&#39;) highlightColor: string;起别名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Output</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">colorChange</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;();</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//1.获取dom</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">el</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ElementRef</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">appHighlight</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">HostListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mouseenter</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onMouseEnter</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">highlight</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">highlightColor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">yellow</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//内部事件监听</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">HostListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">mouseleave</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">$event</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onMouseLeave</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">highlight</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">event</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//传递事件对象</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">highlight</span><span style="color:#666666;">(</span><span style="color:#BD976A;">color</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//2.操作dom (操作dom备用选择)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">nativeElement</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">backgroundColor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">colorChange</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">color</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Directive</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ElementRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">EventEmitter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">HostListener</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Output</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Directive</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[appHighlight]</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">HighlightDirective</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">highlightColor</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// @Input(&#39;appHighlight&#39;) highlightColor: string;起别名</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Output</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">colorChange</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;();</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//1.获取dom</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">el</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ElementRef</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">appHighlight</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">   </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">HostListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mouseenter</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onMouseEnter</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">highlight</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">highlightColor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">yellow</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//内部事件监听</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">HostListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">mouseleave</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">$event</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onMouseLeave</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">highlight</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">event</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//传递事件对象</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#59873A;">highlight</span><span style="color:#999999;">(</span><span style="color:#B07D48;">color</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//2.操作dom (操作dom备用选择)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">nativeElement</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">backgroundColor</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">colorChange</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">color</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title"><b>相对于原生事件监听 addEventListener()  的优点 ：</b></p><ol><li><p>会自动销毁，不会导致内存泄漏</p></li><li><p>不用必须确保每个DOM API都能用</p></li></ol></div><h3 id="自定义unless指令-结构型" tabindex="-1">自定义unless指令（结构型） <a class="header-anchor" href="#自定义unless指令-结构型" aria-label="Permalink to &quot;自定义unless指令（结构型）&quot;">​</a></h3><details class="details custom-block"><summary>定义</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Directive</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Input</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">OnChanges</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">SimpleChanges</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">TemplateRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ViewContainerRef</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">UnlessContext</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">unknown</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">$implicit</span><span style="color:#666666;">: </span><span style="color:#5DA994;">T</span><span style="color:#666666;"> =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">appUnless</span><span style="color:#666666;">: </span><span style="color:#5DA994;">T</span><span style="color:#666666;"> =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">: </span><span style="color:#5DA994;">T</span><span style="color:#666666;"> =</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Directive</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[appUnless]</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">UnlessDirective</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">implements</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">OnChanges</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#80A665;">Input</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">appUnless</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unless</span><span style="color:#666666;">: </span><span style="color:#5DA994;">boolean</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hasView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span><span style="color:#758575DD;">//是否已显示</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">context</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">UnlessContext</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">templateRef</span><span style="color:#666666;">: </span><span style="color:#5DA994;">TemplateRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">any</span><span style="color:#666666;">&gt;,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">viewContainer</span><span style="color:#666666;">: </span><span style="color:#5DA994;">ViewContainerRef</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(this.templateRef);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// console.log(this.viewContainer);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//监听输入属性变化</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">ngOnChanges</span><span style="color:#666666;">(</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">: </span><span style="color:#5DA994;">SimpleChanges</span><span style="color:#666666;">):</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">changes</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">unless</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$implicit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">.</span><span style="color:#BD976A;">appUnless</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">unless</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">.</span><span style="color:#BD976A;">attr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">aaab</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">unless</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hasView</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">viewContainer</span><span style="color:#666666;">.</span><span style="color:#80A665;">clear</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hasView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hasView</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// 这里使用的构造提供的模版（this.templateRef）</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// 实战中可以通过一个input属性传入模版</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">viewContainer</span><span style="color:#666666;">.</span><span style="color:#80A665;">createEmbeddedView</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">templateRef</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">hasView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Directive</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Input</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">OnChanges</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">SimpleChanges</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">TemplateRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ViewContainerRef</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">UnlessContext</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">T</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">unknown</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">$implicit</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">T</span><span style="color:#999999;"> =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">appUnless</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">T</span><span style="color:#999999;"> =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">T</span><span style="color:#999999;"> =</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Directive</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[appUnless]</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">UnlessDirective</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">implements</span><span style="color:#393A34;"> </span><span style="color:#59873A;">OnChanges</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#59873A;">Input</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">appUnless</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unless</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">boolean</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hasView</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">//是否已显示</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">context</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">UnlessContext</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">templateRef</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">TemplateRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">any</span><span style="color:#999999;">&gt;,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">viewContainer</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">ViewContainerRef</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(this.templateRef);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// console.log(this.viewContainer);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//监听输入属性变化</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">ngOnChanges</span><span style="color:#999999;">(</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">SimpleChanges</span><span style="color:#999999;">):</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">changes</span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">unless</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$implicit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">.</span><span style="color:#B07D48;">appUnless</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">unless</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">.</span><span style="color:#B07D48;">attr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">aaab</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">unless</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hasView</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">viewContainer</span><span style="color:#999999;">.</span><span style="color:#59873A;">clear</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hasView</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hasView</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// 这里使用的构造提供的模版（this.templateRef）</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// 实战中可以通过一个input属性传入模版</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">viewContainer</span><span style="color:#999999;">.</span><span style="color:#59873A;">createEmbeddedView</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">templateRef</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">hasView</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><details class="details custom-block"><summary>调用</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;section&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;h3&gt;unless&lt;/h3&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;button  (click)=&quot;showUnless = !showUnless&quot;&gt;toggle unless {{ showUnless }}&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;p *appUnless=&quot;showUnless&quot;&gt;测试unless driective -- {{ showUnless }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;p *appUnless=&quot;showUnless as un&quot;&gt;测试unless driective alias un -- {{ un }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">       &lt;p *appUnless=&quot;showUnless; let un; let attr=attr;&quot;&gt;别名：  {{ un }} attr: {{ attr }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">     &lt;/section&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">show</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//false: 显示 	true: 隐藏</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;section&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;h3&gt;unless&lt;/h3&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;button  (click)=&quot;showUnless = !showUnless&quot;&gt;toggle unless {{ showUnless }}&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;p *appUnless=&quot;showUnless&quot;&gt;测试unless driective -- {{ showUnless }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;p *appUnless=&quot;showUnless as un&quot;&gt;测试unless driective alias un -- {{ un }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">       &lt;p *appUnless=&quot;showUnless; let un; let attr=attr;&quot;&gt;别名：  {{ un }} attr: {{ attr }}&lt;/p&gt;</span></span>
+<span class="line"><span style="color:#B56959;">     &lt;/section&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">show</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//false: 显示 	true: 隐藏</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h2 id="模板元素" tabindex="-1">模板元素 <a class="header-anchor" href="#模板元素" aria-label="Permalink to &quot;模板元素&quot;">​</a></h2><h3 id="ng-template" tabindex="-1"><code>ng-template</code> <a class="header-anchor" href="#ng-template" aria-label="Permalink to &quot;\`ng-template\`&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">事实上，在渲染视图之前，Angular 会把 </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-template</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> 及其内容替换为一个注释。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">是一个 Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。</span></span>
+<span class="line"><span style="color:#393A34;">事实上，在渲染视图之前，Angular 会把 </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-template</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> 及其内容替换为一个注释。</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>没有使用结构型指令，ng-template中的元素是不可见的</p></div><h3 id="ng-container" tabindex="-1"><code>ng-container</code> <a class="header-anchor" href="#ng-container" aria-label="Permalink to &quot;\`ng-container\`&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">Angular 的 </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-container</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> 是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ng-container</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">Angular 的 </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-container</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> 是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ng-container</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">someCondition</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">statement1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">statement2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">statement3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">someCondition</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">statement1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">statement2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">statement3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="模板引用变量" tabindex="-1">模板引用变量 <a class="header-anchor" href="#模板引用变量" aria-label="Permalink to &quot;模板引用变量&quot;">​</a></h3><blockquote><p>使用井号（##）声明模板引用变量，可以获取DOM 元素、指令、组件、TemplateRef 或 Web Component。</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-tpl-var</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;input ##phone placeholder=&quot;phone number&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;"> 	&lt;input ref-phone placeholder=&quot;phone number&quot; /&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">    &lt;button (click)=&quot;callPhone(phone.value)&quot;&gt;Call&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//两种写法</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">TplVarComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">callPhone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">callPhone</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-tpl-var</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;input ##phone placeholder=&quot;phone number&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;"> 	&lt;input ref-phone placeholder=&quot;phone number&quot; /&gt;</span></span>
+<span class="line"><span style="color:#B56959;">    &lt;button (click)=&quot;callPhone(phone.value)&quot;&gt;Call&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//两种写法</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">TplVarComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">callPhone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">callPhone</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>在外部获取组件引用，绑定组件内方法</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Component</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@angular/core</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#80A665;">Component</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">selector</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">app-root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">template</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;button (click)=&quot;sizer.inc()&quot;&gt;app inc&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      &lt;app-sbind [(size)]=&quot;size&quot; ##sizer&gt;&lt;/app-sbind&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">      size: {{ size }}</span></span>
+<span class="line"><span style="color:#C98A7D;">    </span></span>
+<span class="line"><span style="color:#C98A7D;">  </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">AppComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Component</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@angular/core</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#59873A;">Component</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">selector</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">app-root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">template</span><span style="color:#999999;">: </span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">      &lt;button (click)=&quot;sizer.inc()&quot;&gt;app inc&lt;/button&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      &lt;app-sbind [(size)]=&quot;size&quot; ##sizer&gt;&lt;/app-sbind&gt;</span></span>
+<span class="line"><span style="color:#B56959;">      size: {{ size }}</span></span>
+<span class="line"><span style="color:#B56959;">    </span></span>
+<span class="line"><span style="color:#B56959;">  </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">AppComponent</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="操作符" tabindex="-1">操作符 <a class="header-anchor" href="#操作符" aria-label="Permalink to &quot;操作符&quot;">​</a></h2><h3 id="管道" tabindex="-1">管道 <code>|</code> <a class="header-anchor" href="#管道" aria-label="Permalink to &quot;管道 \`|\`&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>模板变量可以通过一条或多条管道格式化数据，</p><p>默认的管道都是纯的，Angular 会忽略复合对象中的变化，即管道只会检查原始值或对象引用，</p><p>如果数组中的元素变化，增删改，引用没有变化，而不会执行管道的逻辑。</p></div><table><thead><tr><th style="text-align:center;">管道名称</th><th style="text-align:center;">作用</th></tr></thead><tbody><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/DatePipe" target="_blank" rel="noreferrer">DatePipe</a></td><td style="text-align:center;">格式化日期</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/DecimalPipe" target="_blank" rel="noreferrer">DecimalPipe</a></td><td style="text-align:center;">数字转字符串，并可以指定格式</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/KeyValuePipe" target="_blank" rel="noreferrer">KeyValuePipe</a></td><td style="text-align:center;">使ngFor可以循环Object或Map对象</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/JsonPipe" target="_blank" rel="noreferrer">JsonPipe</a></td><td style="text-align:center;">将值转成json格式</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/TitleCasePipe" target="_blank" rel="noreferrer">TitleCasePipe</a></td><td style="text-align:center;">把首字母大写，其它小写</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/SlicePipe" target="_blank" rel="noreferrer">SlicePipe</a></td><td style="text-align:center;">截取Array或String</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/PercentPipe" target="_blank" rel="noreferrer">PercentPipe</a></td><td style="text-align:center;">数字转百分比</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/LowerCasePipe" target="_blank" rel="noreferrer">LowerCasePipe</a></td><td style="text-align:center;">转化为小写</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/UpperCasePipe" target="_blank" rel="noreferrer">UpperCasePipe</a></td><td style="text-align:center;">转化为大写</td></tr><tr><td style="text-align:center;"><a href="https://angular.cn/api/common/AsyncPipe" target="_blank" rel="noreferrer">AsyncPipe</a></td><td style="text-align:center;">自动订阅模板中的Observable或Promise</td></tr></tbody></table><h3 id="安全链" tabindex="-1">安全链<code>?</code> <a class="header-anchor" href="#安全链" aria-label="Permalink to &quot;安全链\`?\`&quot;">​</a></h3><blockquote><p>用于可能为空的引用需要使用时，对null、undefined进行保护，保证数据请求前能正常渲染模板</p></blockquote><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">{{person?.name}}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">{{person?.name}}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h3 id="非空断言" tabindex="-1">非空断言<code>!</code> <a class="header-anchor" href="#非空断言" aria-label="Permalink to &quot;非空断言\`!\`&quot;">​</a></h3><div class="danger custom-block"><p class="custom-block-title">DANGER</p><p>在ts中，开启--strictNullChecks后，将一个可能是undefined或null的变量赋给一个有确切类型的变量时，会报错。在特定情况下，我们断定变量一定不是undefined或null，就可以使用非空断言操作符。</p></div><blockquote><p><strong>使用非空断言的两个步骤：</strong></p><p>tsconfig.json中设置<code>&quot;strictNullChecks&quot;: true</code></p><p>tslint.json中设置<code> &quot;no-non-null-assertion&quot;: false</code></p></blockquote><h3 id="类型转换函数-any" tabindex="-1">类型转换函数<code>$any()</code> <a class="header-anchor" href="#类型转换函数-any" aria-label="Permalink to &quot;类型转换函数\`$any()\`&quot;">​</a></h3><blockquote><p>绑定的表达式不能或很难指定类型时使用</p></blockquote><p>假设无法确定item的类型，也就不能确定item是否有bestByDate，这时就会报错。</p><p>可以用$any()把item视为any类型，避免其报错（也可以用这个函数绑定组件中不存在的变量）</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">p</span><span style="color:#666666;">&gt; {{</span><span style="color:#80A665;">$any</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">).</span><span style="color:#BD976A;">bestByDate</span><span style="color:#666666;">}}&lt;</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">p</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">p</span><span style="color:#999999;">&gt; {{</span><span style="color:#59873A;">$any</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">).</span><span style="color:#B07D48;">bestByDate</span><span style="color:#999999;">}}&lt;</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">p</span><span style="color:#999999;">&gt;</span></span></code></pre></div>`,83),e=[o];function t(c,r,y,i,D,A){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md.0a8462a7.lean.js" "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md.0a8462a7.lean.js"
new file mode 100644
index 00000000..63feae82
--- /dev/null
+++ "b/assets/Framework_Angular_Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.md.0a8462a7.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Angular/Angular基础总结二.md","filePath":"Framework/Angular/Angular基础总结二.md"}'),p={name:"Framework/Angular/Angular基础总结二.md"},o=l("",83),e=[o];function t(c,r,y,i,D,A){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Framework_React_React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.fc5d41af.js" "b/assets/Framework_React_React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.fc5d41af.js"
new file mode 100644
index 00000000..5755109f
--- /dev/null
+++ "b/assets/Framework_React_React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.fc5d41af.js"
@@ -0,0 +1,436 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/React/React基础总结一.md","filePath":"Framework/React/React基础总结一.md"}'),l={name:"Framework/React/React基础总结一.md"},o=p(`<h2 id="一、前置知识" tabindex="-1">一、前置知识 <a class="header-anchor" href="#一、前置知识" aria-label="Permalink to &quot;一、前置知识&quot;">​</a></h2><h3 id="虚拟dom" tabindex="-1">虚拟DOM <a class="header-anchor" href="#虚拟dom" aria-label="Permalink to &quot;虚拟DOM&quot;">​</a></h3><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">VDOM</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 此处一定不要写引号，因为不是字符串 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">h1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">title</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Hello,React</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">h1</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//2.渲染虚拟DOM到页面   准备好一个“容器”&lt;div id=&quot;root&quot;&gt;&lt;/div&gt; </span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(</span><span style="color:#BD976A;">VDOM</span><span style="color:#666666;">,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">VDOM</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 此处一定不要写引号，因为不是字符串 */</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">h1</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">title</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Hello,React</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">h1</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//2.渲染虚拟DOM到页面   准备好一个“容器”&lt;div id=&quot;root&quot;&gt;&lt;/div&gt; </span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(</span><span style="color:#B07D48;">VDOM</span><span style="color:#999999;">,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><p><strong>关于虚拟DOM：</strong></p><p>1.本质是Object类型的对象（一般对象）</p><p>​ 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。</p><p>​ 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上</p><p><strong>JSX语法规则</strong></p><p>​ 1.定义虚拟DOM时，不要写引号。</p><p>​ 2.标签中混入JS表达式时要用 <code>{}</code>。</p><p>​ 3.样式的类名指定不要用class，要用className。</p><p>​ 4.只有一个根标签</p><p>​ 5.标签必须闭合</p><p>​ 6.标签首字母</p><p><strong>注意</strong></p><p>一定注意区分：【js语句(代码)】与【js表达式】</p><blockquote><p>1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方</p></blockquote><pre><code> (1). a
+      (2). a+b
+      (3). demo(1)
+      (4). arr.map() 
+      (5). function test () {}
+</code></pre><blockquote><p>2.语句(代码)：</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">).</span><span style="color:#80A665;">if</span><span style="color:#666666;">(){}</span></span>
+<span class="line"><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">).</span><span style="color:#80A665;">for</span><span style="color:#666666;">(){}</span></span>
+<span class="line"><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">).</span><span style="color:#80A665;">switch</span><span style="color:#666666;">(){</span><span style="color:#4D9375;">case</span><span style="color:#DBD7CAEE;">:</span><span style="color:#BD976A;">xxxx</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">).</span><span style="color:#59873A;">if</span><span style="color:#999999;">(){}</span></span>
+<span class="line"><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">).</span><span style="color:#59873A;">for</span><span style="color:#999999;">(){}</span></span>
+<span class="line"><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">).</span><span style="color:#59873A;">switch</span><span style="color:#999999;">(){</span><span style="color:#1E754F;">case</span><span style="color:#393A34;">:</span><span style="color:#B07D48;">xxxx</span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="二、组件" tabindex="-1">二、组件 <a class="header-anchor" href="#二、组件" aria-label="Permalink to &quot;二、组件&quot;">​</a></h2><h3 id="函数式组件" tabindex="-1">函数式组件 <a class="header-anchor" href="#函数式组件" aria-label="Permalink to &quot;函数式组件&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!--</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">准备好一个</span><span style="color:#DBD7CAEE;">“</span><span style="color:#BD976A;">容器</span><span style="color:#DBD7CAEE;">” </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!--</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">引入react核心库</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/javascript</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">../js/react.development.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!--</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">引入react</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">dom</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">用于支持react操作DOM</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/javascript</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">../js/react-dom.development.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!--</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">引入babel</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">用于将jsx转为js</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/javascript</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">../js/babel.min.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text/babel</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		//1.创建函数式组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		function MyComponent()</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">; </span><span style="color:#758575DD;">//此处的this是undefined，因为babel编译后开启了严格模式</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">h2</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">函数式组件</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">h2</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		//2.渲染组件到页面</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		ReactDOM.render(</span><span style="color:#666666;">&lt;</span><span style="color:#B8A965;">MyComponent</span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;">,document.getElementById(&#39;root&#39;))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		/* </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			执行了ReactDOM.render(</span><span style="color:#666666;">&lt;</span><span style="color:#B8A965;">MyComponent</span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;">.......之后，发生了什么？</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					1.React解析组件标签，找到了MyComponent组件。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!--</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">准备好一个</span><span style="color:#393A34;">“</span><span style="color:#B07D48;">容器</span><span style="color:#393A34;">” </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!--</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">引入react核心库</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/javascript</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">../js/react.development.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!--</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">引入react</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">dom</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">用于支持react操作DOM</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/javascript</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">../js/react-dom.development.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!--</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">引入babel</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">用于将jsx转为js</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/javascript</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">../js/babel.min.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text/babel</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		//1.创建函数式组件</span></span>
+<span class="line"><span style="color:#393A34;">		function MyComponent()</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#393A34;">; </span><span style="color:#A0ADA0;">//此处的this是undefined，因为babel编译后开启了严格模式</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">h2</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">函数式组件</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">h2</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">		//2.渲染组件到页面</span></span>
+<span class="line"><span style="color:#393A34;">		ReactDOM.render(</span><span style="color:#999999;">&lt;</span><span style="color:#998418;">MyComponent</span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;">,document.getElementById(&#39;root&#39;))</span></span>
+<span class="line"><span style="color:#393A34;">		/* </span></span>
+<span class="line"><span style="color:#393A34;">			执行了ReactDOM.render(</span><span style="color:#999999;">&lt;</span><span style="color:#998418;">MyComponent</span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;">.......之后，发生了什么？</span></span>
+<span class="line"><span style="color:#393A34;">					1.React解析组件标签，找到了MyComponent组件。</span></span>
+<span class="line"><span style="color:#393A34;">					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。</span></span>
+<span class="line"><span style="color:#393A34;">		*/</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h3 id="类式组件" tabindex="-1">类式组件 <a class="header-anchor" href="#类式组件" aria-label="Permalink to &quot;类式组件&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//创建类式组件</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">MyComponent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">Component</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">render</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//render在MyComponent的原型对象上，供实例使用。</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//render中的this指向MyComponent组件实例对象。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">render中的this:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">h2</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">类式组件</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">h2</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//渲染组件到页面</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">MyComponent</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">root</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//创建类式组件</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">MyComponent</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">Component</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">render</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//render在MyComponent的原型对象上，供实例使用。</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//render中的this指向MyComponent组件实例对象。</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">render中的this:</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">h2</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">类式组件</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">h2</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//渲染组件到页面</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">MyComponent</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">root</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>执行了<code>ReactDOM.render(&lt;MyComponent/&gt;</code>.......之后，发生了什么？</p><p>​ 1.React解析组件标签，找到了MyComponent组件。</p><p>​ 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。</p><p>​ 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。</p></div><h3 id="补充" tabindex="-1">补充 <a class="header-anchor" href="#补充" aria-label="Permalink to &quot;补充&quot;">​</a></h3><p><strong>受控组件</strong>：React 中受控组件的是指表单元素的控制是交给 React ，表单元素的值是完全交由组件的 state 控制。</p><p>​ 受控组件也可以用于描述内部状态由传入 props 控制的 React 自定义组件。</p><p><strong>非受控组件</strong>： 表单元素的状态并不受 React 组件状态的影响，表单元素的值存储于 DOM 元素中。</p><p>​ 如果要 React 组件要获取 DOM 元素的值，需要通过绑定 ref 的方式去获取。</p><h3 id="组实例三大属性" tabindex="-1">组实例三大属性 <a class="header-anchor" href="#组实例三大属性" aria-label="Permalink to &quot;组实例三大属性&quot;">​</a></h3><h4 id="state" tabindex="-1">state <a class="header-anchor" href="#state" aria-label="Permalink to &quot;state&quot;">​</a></h4><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//1.创建组件</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Weather</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">Component</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//初始化状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">state</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">isHot</span><span style="color:#666666;">:</span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span><span style="color:#B8A965;">wind</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">微风</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">render</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">isHot</span><span style="color:#666666;">,</span><span style="color:#BD976A;">wind</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">state</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">h1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onClick</span><span style="color:#666666;">={</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">changeWeather</span><span style="color:#666666;">}&gt;</span><span style="color:#DBD7CAEE;">今天天气很</span><span style="color:#666666;">{</span><span style="color:#BD976A;">isHot</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">炎热</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">凉爽</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">，</span><span style="color:#666666;">{</span><span style="color:#BD976A;">wind</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">h1</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//自定义方法————要用赋值语句的形式+箭头函数 **</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">changeWeather</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">isHot</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">state</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isHot</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">setState</span><span style="color:#666666;">({</span><span style="color:#B8A965;">isHot</span><span style="color:#666666;">:</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">isHot</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//2.渲染组件到页面</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Weather</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//1.创建组件</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Weather</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">Component</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//初始化状态</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">state</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">isHot</span><span style="color:#999999;">:</span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span><span style="color:#998418;">wind</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">微风</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">render</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">isHot</span><span style="color:#999999;">,</span><span style="color:#B07D48;">wind</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">state</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">h1</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onClick</span><span style="color:#999999;">={</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">changeWeather</span><span style="color:#999999;">}&gt;</span><span style="color:#393A34;">今天天气很</span><span style="color:#999999;">{</span><span style="color:#B07D48;">isHot</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">炎热</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">凉爽</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span><span style="color:#393A34;">，</span><span style="color:#999999;">{</span><span style="color:#B07D48;">wind</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">h1</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//自定义方法————要用赋值语句的形式+箭头函数 **</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">changeWeather</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">isHot</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">state</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isHot</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">setState</span><span style="color:#999999;">({</span><span style="color:#998418;">isHot</span><span style="color:#999999;">:</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">isHot</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//2.渲染组件到页面</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Weather</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><h4 id="props" tabindex="-1">props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;props&quot;">​</a></h4><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//创建组件</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">Component</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//props简写形式: 对标签属性进行类型、必要性的限制</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">propTypes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">string</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isRequired</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//限制name必传，且为字符串</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">sex</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">string</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//限制sex为字符串</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">number</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//限制age为数值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">render</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#BD976A;">sex</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">props</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">姓名：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">性别：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">sex</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">年龄：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">age</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">/*Person.propTypes = {</span></span>
+<span class="line"><span style="color:#758575DD;">	name:PropTypes.string.isRequired, //限制name必传，且为字符串</span></span>
+<span class="line"><span style="color:#758575DD;">	sex:PropTypes.string,//限制sex为字符串</span></span>
+<span class="line"><span style="color:#758575DD;">	age:PropTypes.number,//限制age为数值</span></span>
+<span class="line"><span style="color:#758575DD;">	speak:PropTypes.func,//限制speak为函数</span></span>
+<span class="line"><span style="color:#758575DD;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">Person.defaultProps = {//指定默认标签属性值</span></span>
+<span class="line"><span style="color:#758575DD;">	sex:&#39;男&#39;,//sex默认值为男</span></span>
+<span class="line"><span style="color:#758575DD;">	age:18 //age默认值为18</span></span>
+<span class="line"><span style="color:#758575DD;">}*/</span></span>
+<span class="line"><span style="color:#758575DD;">//渲染组件到页面</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">jerry</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">={</span><span style="color:#4C9A91;">19</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">sex</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">男</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">tom</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">={</span><span style="color:#4C9A91;">18</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sex</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">女</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老刘</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span><span style="color:#B8A965;">sex</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">女</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">// ReactDOM.render(&lt;Person name={p.name} age={p.age} sex={p.sex}/&gt;,document.getElementById(&#39;test3&#39;))</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{...</span><span style="color:#BD976A;">p</span><span style="color:#666666;">}/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//创建组件</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">Component</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//props简写形式: 对标签属性进行类型、必要性的限制</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">propTypes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">string</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isRequired</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//限制name必传，且为字符串</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">sex</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">string</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//限制sex为字符串</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">number</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//限制age为数值</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">render</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#B07D48;">sex</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">props</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">姓名：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">性别：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">sex</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">年龄：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">age</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">/*Person.propTypes = {</span></span>
+<span class="line"><span style="color:#A0ADA0;">	name:PropTypes.string.isRequired, //限制name必传，且为字符串</span></span>
+<span class="line"><span style="color:#A0ADA0;">	sex:PropTypes.string,//限制sex为字符串</span></span>
+<span class="line"><span style="color:#A0ADA0;">	age:PropTypes.number,//限制age为数值</span></span>
+<span class="line"><span style="color:#A0ADA0;">	speak:PropTypes.func,//限制speak为函数</span></span>
+<span class="line"><span style="color:#A0ADA0;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">Person.defaultProps = {//指定默认标签属性值</span></span>
+<span class="line"><span style="color:#A0ADA0;">	sex:&#39;男&#39;,//sex默认值为男</span></span>
+<span class="line"><span style="color:#A0ADA0;">	age:18 //age默认值为18</span></span>
+<span class="line"><span style="color:#A0ADA0;">}*/</span></span>
+<span class="line"><span style="color:#A0ADA0;">//渲染组件到页面</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Person</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">jerry</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">={</span><span style="color:#2F798A;">19</span><span style="color:#999999;">}</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">sex</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">男</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Person</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">tom</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">={</span><span style="color:#2F798A;">18</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sex</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">女</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老刘</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span><span style="color:#998418;">sex</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">女</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">// ReactDOM.render(&lt;Person name={p.name} age={p.age} sex={p.sex}/&gt;,document.getElementById(&#39;test3&#39;))</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Person</span><span style="color:#393A34;"> </span><span style="color:#999999;">{...</span><span style="color:#B07D48;">p</span><span style="color:#999999;">}/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><p><strong>函数组件使用props</strong></p><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">props</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#BD976A;">sex</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">props</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">姓名：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">性别：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">sex</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">年龄：</span><span style="color:#666666;">{</span><span style="color:#BD976A;">age</span><span style="color:#666666;">}&lt;/</span><span style="color:#4D9375;">li</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">ul</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">Person</span><span style="color:#666666;">.</span><span style="color:#BD976A;">propTypes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">string</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isRequired</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">sex</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">string</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#BD976A;">PropTypes</span><span style="color:#666666;">.</span><span style="color:#BD976A;">number</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">Person</span><span style="color:#666666;">.</span><span style="color:#BD976A;">defaultProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">sex</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">男</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">props</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#B07D48;">sex</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">props</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">姓名：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">性别：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">sex</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">年龄：</span><span style="color:#999999;">{</span><span style="color:#B07D48;">age</span><span style="color:#999999;">}&lt;/</span><span style="color:#1E754F;">li</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">ul</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">Person</span><span style="color:#999999;">.</span><span style="color:#B07D48;">propTypes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">string</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isRequired</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">sex</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">string</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#B07D48;">PropTypes</span><span style="color:#999999;">.</span><span style="color:#B07D48;">number</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">Person</span><span style="color:#999999;">.</span><span style="color:#B07D48;">defaultProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">sex</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">男</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="refs" tabindex="-1">refs <a class="header-anchor" href="#refs" aria-label="Permalink to &quot;refs&quot;">​</a></h4><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Demo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">Component</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">myRef2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">React</span><span style="color:#666666;">.</span><span style="color:#80A665;">createRef</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//3.createRef形式</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">showData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">input1</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">refs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//1.字符串形式</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">input2</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//2.回调函数形式</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">saveInput</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">input2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">=@=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">c</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">render</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">input1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">/*字符串形式*/</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			  	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">={(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">)=&gt;{</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">input2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#666666;">;</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#BD976A;">c</span><span style="color:#666666;">);}}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">/*回调函数形式*/</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">               	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">={</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">saveInput</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">input</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">={</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">myRef</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">type</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;{</span><span style="color:#758575DD;">/*createRef形式*/</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">ReactDOM</span><span style="color:#666666;">.</span><span style="color:#80A665;">render</span><span style="color:#666666;">(&lt;</span><span style="color:#B8A965;">Demo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;,</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Demo</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">Component</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">myRef2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">React</span><span style="color:#999999;">.</span><span style="color:#59873A;">createRef</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//3.createRef形式</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">showData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">input1</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">refs</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//1.字符串形式</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">input2</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//2.回调函数形式</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">saveInput</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">input2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">=@=</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">c</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">render</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">input1</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">/*字符串形式*/</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">			  	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">={(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">)=&gt;{</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">input2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#999999;">;</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B07D48;">c</span><span style="color:#999999;">);}}</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">/*回调函数形式*/</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">               	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">={</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">saveInput</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">input</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">={</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">myRef</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">type</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;{</span><span style="color:#A0ADA0;">/*createRef形式*/</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">ReactDOM</span><span style="color:#999999;">.</span><span style="color:#59873A;">render</span><span style="color:#999999;">(&lt;</span><span style="color:#998418;">Demo</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">1</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;,</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div><blockquote><p>注意: 回调函数形式执行次数</p></blockquote><h3 id="事件处理" tabindex="-1">事件处理 <a class="header-anchor" href="#事件处理" aria-label="Permalink to &quot;事件处理&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>(1).通过onXxx属性指定事件处理函数(注意大小写)</p><p>​ a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性</p><p>​ b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效</p><p>(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref</p></div><p><strong>高阶函数</strong>：参数或返回值是一个函数满足一个条件则为高阶函数。</p><p>​ 常见的高阶函数有：Promise、setTimeout、arr.map()等等</p><p><strong>函数的柯里化</strong>：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">b</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">c</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//函数柯里化传参</span></span>
+<span class="line"><span style="color:#80A665;">saveFormData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">dataType</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">event</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">setState</span><span style="color:#666666;">({[</span><span style="color:#BD976A;">dataType</span><span style="color:#666666;">]:</span><span style="color:#BD976A;">event</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//&lt;input onChange={this.saveFormData(&#39;username&#39;)} type=&quot;text&quot; name=&quot;username&quot;/&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//箭头函数传参</span></span>
+<span class="line"><span style="color:#80A665;">saveFormData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">dataType</span><span style="color:#666666;">,</span><span style="color:#BD976A;">event</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">setState</span><span style="color:#666666;">({[</span><span style="color:#BD976A;">dataType</span><span style="color:#666666;">]:</span><span style="color:#BD976A;">event</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//&lt;input onChange={event =&gt; this.saveFormData(&#39;username&#39;,event) } type=&quot;text&quot; name=&quot;username&quot;/&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">b</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">c</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//函数柯里化传参</span></span>
+<span class="line"><span style="color:#59873A;">saveFormData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">dataType</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">event</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">setState</span><span style="color:#999999;">({[</span><span style="color:#B07D48;">dataType</span><span style="color:#999999;">]:</span><span style="color:#B07D48;">event</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//&lt;input onChange={this.saveFormData(&#39;username&#39;)} type=&quot;text&quot; name=&quot;username&quot;/&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//箭头函数传参</span></span>
+<span class="line"><span style="color:#59873A;">saveFormData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">dataType</span><span style="color:#999999;">,</span><span style="color:#B07D48;">event</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">setState</span><span style="color:#999999;">({[</span><span style="color:#B07D48;">dataType</span><span style="color:#999999;">]:</span><span style="color:#B07D48;">event</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//&lt;input onChange={event =&gt; this.saveFormData(&#39;username&#39;,event) } type=&quot;text&quot; name=&quot;username&quot;/&gt;</span></span></code></pre></div><h3 id="组件生命周期" tabindex="-1">组件生命周期 <a class="header-anchor" href="#组件生命周期" aria-label="Permalink to &quot;组件生命周期&quot;">​</a></h3><p><strong>旧版(16)</strong></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220421223156627.png" alt="image-20220421223156627"></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/* </span></span>
+<span class="line"><span style="color:#758575DD;">1. 初始化阶段: 由ReactDOM.render()触发---初次渲染</span></span>
+<span class="line"><span style="color:#758575DD;">            1.	constructor()</span></span>
+<span class="line"><span style="color:#758575DD;">            2.	componentWillMount()</span></span>
+<span class="line"><span style="color:#758575DD;">            3.	render()</span></span>
+<span class="line"><span style="color:#758575DD;">            4.	componentDidMount() =====&gt; 常用</span></span>
+<span class="line"><span style="color:#758575DD;">            一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</span></span>
+<span class="line"><span style="color:#758575DD;">            </span></span>
+<span class="line"><span style="color:#758575DD;">2. 更新阶段: 由组件内部this.setSate()或父组件render触发</span></span>
+<span class="line"><span style="color:#758575DD;">            1.	shouldComponentUpdate()</span></span>
+<span class="line"><span style="color:#758575DD;">            2.	componentWillUpdate()</span></span>
+<span class="line"><span style="color:#758575DD;">            3.	render() =====&gt; 必须使用的一个</span></span>
+<span class="line"><span style="color:#758575DD;">            4.	componentDidUpdate()</span></span>
+<span class="line"><span style="color:#758575DD;">            </span></span>
+<span class="line"><span style="color:#758575DD;">3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发</span></span>
+<span class="line"><span style="color:#758575DD;">            1.	componentWillUnmount()  =====&gt; 常用</span></span>
+<span class="line"><span style="color:#758575DD;">            一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/* </span></span>
+<span class="line"><span style="color:#A0ADA0;">1. 初始化阶段: 由ReactDOM.render()触发---初次渲染</span></span>
+<span class="line"><span style="color:#A0ADA0;">            1.	constructor()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            2.	componentWillMount()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            3.	render()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            4.	componentDidMount() =====&gt; 常用</span></span>
+<span class="line"><span style="color:#A0ADA0;">            一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</span></span>
+<span class="line"><span style="color:#A0ADA0;">            </span></span>
+<span class="line"><span style="color:#A0ADA0;">2. 更新阶段: 由组件内部this.setSate()或父组件render触发</span></span>
+<span class="line"><span style="color:#A0ADA0;">            1.	shouldComponentUpdate()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            2.	componentWillUpdate()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            3.	render() =====&gt; 必须使用的一个</span></span>
+<span class="line"><span style="color:#A0ADA0;">            4.	componentDidUpdate()</span></span>
+<span class="line"><span style="color:#A0ADA0;">            </span></span>
+<span class="line"><span style="color:#A0ADA0;">3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发</span></span>
+<span class="line"><span style="color:#A0ADA0;">            1.	componentWillUnmount()  =====&gt; 常用</span></span>
+<span class="line"><span style="color:#A0ADA0;">            一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span></code></pre></div><p><strong>新版(17+)</strong></p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220421223604701.png" alt="image-20220421223604701"></p><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#D4976C;">1.</span><span style="color:#DBD7CAEE;"> 初始化阶段: 由ReactDOM.render()触发---初次渲染</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            1.	constructor()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            2.	getDerivedStateFromProps</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            3.	render()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            4.	componentDidMount() =====&gt; 常用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</span></span>
+<span class="line"><span style="color:#D4976C;">2.</span><span style="color:#DBD7CAEE;"> 更新阶段: 由组件内部this.setSate()或父组件重新render触发</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            1.	getDerivedStateFromProps</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            2.	shouldComponentUpdate()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            3.	render()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            4.	getSnapshotBeforeUpdate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            5.	componentDidUpdate()</span></span>
+<span class="line"><span style="color:#D4976C;">3.</span><span style="color:#DBD7CAEE;"> 卸载组件: 由ReactDOM.unmountComponentAtNode()触发</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            1.	componentWillUnmount()  =====&gt; 常用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#A65E2B;">1.</span><span style="color:#393A34;"> 初始化阶段: 由ReactDOM.render()触发---初次渲染</span></span>
+<span class="line"><span style="color:#393A34;">            1.	constructor()</span></span>
+<span class="line"><span style="color:#393A34;">            2.	getDerivedStateFromProps</span></span>
+<span class="line"><span style="color:#393A34;">            3.	render()</span></span>
+<span class="line"><span style="color:#393A34;">            4.	componentDidMount() =====&gt; 常用</span></span>
+<span class="line"><span style="color:#393A34;">                        一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</span></span>
+<span class="line"><span style="color:#A65E2B;">2.</span><span style="color:#393A34;"> 更新阶段: 由组件内部this.setSate()或父组件重新render触发</span></span>
+<span class="line"><span style="color:#393A34;">            1.	getDerivedStateFromProps</span></span>
+<span class="line"><span style="color:#393A34;">            2.	shouldComponentUpdate()</span></span>
+<span class="line"><span style="color:#393A34;">            3.	render()</span></span>
+<span class="line"><span style="color:#393A34;">            4.	getSnapshotBeforeUpdate</span></span>
+<span class="line"><span style="color:#393A34;">            5.	componentDidUpdate()</span></span>
+<span class="line"><span style="color:#A65E2B;">3.</span><span style="color:#393A34;"> 卸载组件: 由ReactDOM.unmountComponentAtNode()触发</span></span>
+<span class="line"><span style="color:#393A34;">            1.	componentWillUnmount()  =====&gt; 常用</span></span>
+<span class="line"><span style="color:#393A34;">                        一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息</span></span></code></pre></div><p><strong>getSnapshotBeforeUpdate</strong></p><blockquote><p>在render之前调用，state已更新</p><p>典型场景：获取render之前的dom状态</p></blockquote><p><strong>getDerivedStateFromProps</strong></p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>1：当state需要从props初始化时，使用</p><p>2：尽量不使用，维护俩者状态需要消耗额外资源，增加复杂度</p><p>3：每次render都会调用</p><p>4：典型场景表单获取默认值</p></div><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki vitesse-dark has-diff vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> 面试相关题:</span></span>
+<span class="line"><span style="color:#4D9375;">	1). react/vue中的key有什么作用？（key的内部原理是什么？）</span></span>
+<span class="line"><span style="color:#4D9375;">	2). 为什么遍历列表时，key最好不要用index?</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#D4976C;">1.</span><span style="color:#DBD7CAEE;"> 虚拟DOM中key的作用：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">	2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        b. 旧虚拟DOM中未找到与新虚拟DOM相同的key</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    根据数据创建新的真实DOM，随后渲染到到页面</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#D4976C;">2.</span><span style="color:#DBD7CAEE;"> 用index作为key可能会引发的问题：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#D4976C;">1.</span><span style="color:#DBD7CAEE;"> 若对数据进行：逆序添加、逆序删除等破坏顺序操作:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    会产生没有必要的真实DOM更新 ==&gt; 界面效果没问题, 但效率低。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#D4976C;">2.</span><span style="color:#DBD7CAEE;"> 如果结构中还包含输入类的DOM：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    会产生错误DOM更新 ==&gt; 界面有问题。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#D4976C;">3.</span><span style="color:#DBD7CAEE;"> 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        仅用于渲染列表用于展示，使用index作为key是没有问题的。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#D4976C;">3.</span><span style="color:#DBD7CAEE;"> 开发中如何选择key?:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    2.如果确定只是简单的展示数据，用index也是可以的。</span></span></code></pre><pre class="shiki vitesse-light has-diff vp-code-light"><code><span class="line"><span style="color:#393A34;"> 面试相关题:</span></span>
+<span class="line"><span style="color:#1C6B48;">	1). react/vue中的key有什么作用？（key的内部原理是什么？）</span></span>
+<span class="line"><span style="color:#1C6B48;">	2). 为什么遍历列表时，key最好不要用index?</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A65E2B;">1.</span><span style="color:#393A34;"> 虚拟DOM中key的作用：</span></span>
+<span class="line"><span style="color:#393A34;">	1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">	2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, </span></span>
+<span class="line"><span style="color:#393A34;">                    随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：</span></span>
+<span class="line"><span style="color:#393A34;">                    (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM</span></span>
+<span class="line"><span style="color:#393A34;">                    (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        b. 旧虚拟DOM中未找到与新虚拟DOM相同的key</span></span>
+<span class="line"><span style="color:#393A34;">                    根据数据创建新的真实DOM，随后渲染到到页面</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A65E2B;">2.</span><span style="color:#393A34;"> 用index作为key可能会引发的问题：</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">1.</span><span style="color:#393A34;"> 若对数据进行：逆序添加、逆序删除等破坏顺序操作:</span></span>
+<span class="line"><span style="color:#393A34;">                    会产生没有必要的真实DOM更新 ==&gt; 界面效果没问题, 但效率低。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">2.</span><span style="color:#393A34;"> 如果结构中还包含输入类的DOM：</span></span>
+<span class="line"><span style="color:#393A34;">                    会产生错误DOM更新 ==&gt; 界面有问题。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">3.</span><span style="color:#393A34;"> 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，</span></span>
+<span class="line"><span style="color:#393A34;">        仅用于渲染列表用于展示，使用index作为key是没有问题的。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A65E2B;">3.</span><span style="color:#393A34;"> 开发中如何选择key?:</span></span>
+<span class="line"><span style="color:#393A34;">    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。</span></span>
+<span class="line"><span style="color:#393A34;">    2.如果确定只是简单的展示数据，用index也是可以的。</span></span></code></pre></div>`,59),e=[o];function t(c,r,y,D,A,i){return n(),a("div",null,e)}const C=s(l,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Framework_React_React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.fc5d41af.lean.js" "b/assets/Framework_React_React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.fc5d41af.lean.js"
new file mode 100644
index 00000000..f14e0c19
--- /dev/null
+++ "b/assets/Framework_React_React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.md.fc5d41af.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/React/React基础总结一.md","filePath":"Framework/React/React基础总结一.md"}'),l={name:"Framework/React/React基础总结一.md"},o=p("",59),e=[o];function t(c,r,y,D,A,i){return n(),a("div",null,e)}const C=s(l,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Framework_Vue_Vite\345\216\237\347\220\206\345\255\246\344\271\240.md.8895a11d.js" "b/assets/Framework_Vue_Vite\345\216\237\347\220\206\345\255\246\344\271\240.md.8895a11d.js"
new file mode 100644
index 00000000..01ce1a44
--- /dev/null
+++ "b/assets/Framework_Vue_Vite\345\216\237\347\220\206\345\255\246\344\271\240.md.8895a11d.js"
@@ -0,0 +1 @@
+import{_ as a,o as l,c as i,k as e,a as t}from"./chunks/framework.c53372a0.js";const k=JSON.parse('{"title":"Vite底层原理学习","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Vue/Vite原理学习.md","filePath":"Framework/Vue/Vite原理学习.md"}'),s={name:"Framework/Vue/Vite原理学习.md"},o=e("h1",{id:"vite底层原理学习",tabindex:"-1"},[t("Vite底层原理学习 "),e("a",{class:"header-anchor",href:"#vite底层原理学习","aria-label":'Permalink to "Vite底层原理学习"'},"​")],-1),r=e("h2",{id:"构建工具承担",tabindex:"-1"},[t("构建工具承担： "),e("a",{class:"header-anchor",href:"#构建工具承担","aria-label":'Permalink to "构建工具承担："'},"​")],-1),n=e("ol",null,[e("li",null,"模块化开发支持：ES Module、CommonJS、AMD、CMD等"),e("li",null,"处理代码兼容性：babel语法降级，less/sass/stylus等语法转换"),e("li",null,"提升项目性能：压缩代码，合并代码，图片压缩，代码分割，懒加载，预加载等"),e("li",null,"优化开发体验：热更新，自动刷新，代理服务器，自动打开浏览器等"),e("li",null,"统一开发标准：eslint代码检查，prettier代码格式化，git提交规范等")],-1),c=[o,r,n];function d(_,h,m,u,p,V){return l(),i("div",null,c)}const b=a(s,[["render",d]]);export{k as __pageData,b as default};
diff --git "a/assets/Framework_Vue_Vite\345\216\237\347\220\206\345\255\246\344\271\240.md.8895a11d.lean.js" "b/assets/Framework_Vue_Vite\345\216\237\347\220\206\345\255\246\344\271\240.md.8895a11d.lean.js"
new file mode 100644
index 00000000..01ce1a44
--- /dev/null
+++ "b/assets/Framework_Vue_Vite\345\216\237\347\220\206\345\255\246\344\271\240.md.8895a11d.lean.js"
@@ -0,0 +1 @@
+import{_ as a,o as l,c as i,k as e,a as t}from"./chunks/framework.c53372a0.js";const k=JSON.parse('{"title":"Vite底层原理学习","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Vue/Vite原理学习.md","filePath":"Framework/Vue/Vite原理学习.md"}'),s={name:"Framework/Vue/Vite原理学习.md"},o=e("h1",{id:"vite底层原理学习",tabindex:"-1"},[t("Vite底层原理学习 "),e("a",{class:"header-anchor",href:"#vite底层原理学习","aria-label":'Permalink to "Vite底层原理学习"'},"​")],-1),r=e("h2",{id:"构建工具承担",tabindex:"-1"},[t("构建工具承担： "),e("a",{class:"header-anchor",href:"#构建工具承担","aria-label":'Permalink to "构建工具承担："'},"​")],-1),n=e("ol",null,[e("li",null,"模块化开发支持：ES Module、CommonJS、AMD、CMD等"),e("li",null,"处理代码兼容性：babel语法降级，less/sass/stylus等语法转换"),e("li",null,"提升项目性能：压缩代码，合并代码，图片压缩，代码分割，懒加载，预加载等"),e("li",null,"优化开发体验：热更新，自动刷新，代理服务器，自动打开浏览器等"),e("li",null,"统一开发标准：eslint代码检查，prettier代码格式化，git提交规范等")],-1),c=[o,r,n];function d(_,h,m,u,p,V){return l(),i("div",null,c)}const b=a(s,[["render",d]]);export{k as __pageData,b as default};
diff --git "a/assets/Framework_Vue_Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md.6422a5f9.js" "b/assets/Framework_Vue_Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md.6422a5f9.js"
new file mode 100644
index 00000000..fc7f64f7
--- /dev/null
+++ "b/assets/Framework_Vue_Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md.6422a5f9.js"
@@ -0,0 +1,97 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Vue/Vue3补漏笔记.md","filePath":"Framework/Vue/Vue3补漏笔记.md"}'),p={name:"Framework/Vue/Vue3补漏笔记.md"},o=l(`<h2 id="inheritattrs" tabindex="-1">inheritAttrs <a class="header-anchor" href="#inheritattrs" aria-label="Permalink to &quot;inheritAttrs&quot;">​</a></h2><blockquote><p>唯一一个需要用额外的 <code>script</code> 块书写的选项</p></blockquote><div class="tip custom-block"><p class="custom-block-title">$attrs</p><p>透传 Attributes 是指由父组件传入，且没有被子组件声明为 props 或是 组件自定义事件的 attributes 和 事件处理函数。</p></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#FDAEB7;">Home</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">:attr</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">12345</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">:val</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">false</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#B31D28;">Home</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">:attr</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">12345</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">:val</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">false</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h3 id="场景一" tabindex="-1">场景一： <a class="header-anchor" href="#场景一" aria-label="Permalink to &quot;场景一：&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">home</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    Home work!</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">inheritAttrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//默认继承父组件属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">this.$attrs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$attrs</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">home</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    Home work!</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">inheritAttrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//默认继承父组件属性</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">this.$attrs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$attrs</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192154427.png" alt="image-20230219215449385"></p><h3 id="场景二" tabindex="-1">场景二： <a class="header-anchor" href="#场景二" aria-label="Permalink to &quot;场景二：&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">home</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    Home work!</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">inheritAttrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fasle</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//取消继承</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">this.$attrs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$attrs</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">home</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    Home work!</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">inheritAttrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fasle</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//取消继承</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">this.$attrs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$attrs</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192154391.png" alt="image-20230219215459359"></p><h3 id="场景三" tabindex="-1">场景三： <a class="header-anchor" href="#场景三" aria-label="Permalink to &quot;场景三：&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">home</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    Home work!</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">inheritAttrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fasle</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//取消继承</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">this.$attrs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$attrs</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//输出被props接收以外的属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">props</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">val</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">home</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    Home work!</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">inheritAttrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fasle</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//取消继承</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">this.$attrs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$attrs</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//输出被props接收以外的属性</span></span>
+<span class="line"><span style="color:#393A34;">	  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">props</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">val</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192155953.png" alt="image-20230219215510922"></p>`,13),t=[o];function e(c,r,y,i,D,A){return a(),n("div",null,t)}const C=s(p,[["render",e]]);export{B as __pageData,C as default};
diff --git "a/assets/Framework_Vue_Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md.6422a5f9.lean.js" "b/assets/Framework_Vue_Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md.6422a5f9.lean.js"
new file mode 100644
index 00000000..38078a19
--- /dev/null
+++ "b/assets/Framework_Vue_Vue3\350\241\245\346\274\217\347\254\224\350\256\260.md.6422a5f9.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Vue/Vue3补漏笔记.md","filePath":"Framework/Vue/Vue3补漏笔记.md"}'),p={name:"Framework/Vue/Vue3补漏笔记.md"},o=l("",13),t=[o];function e(c,r,y,i,D,A){return a(),n("div",null,t)}const C=s(p,[["render",e]]);export{B as __pageData,C as default};
diff --git "a/assets/Framework_Vue_\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md.8805bdc2.js" "b/assets/Framework_Vue_\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md.8805bdc2.js"
new file mode 100644
index 00000000..bd26085a
--- /dev/null
+++ "b/assets/Framework_Vue_\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md.8805bdc2.js"
@@ -0,0 +1,337 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"分页与搜索条件记录并回显优化","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Vue/分页与搜索条件记录并回显优化.md","filePath":"Framework/Vue/分页与搜索条件记录并回显优化.md"}'),l={name:"Framework/Vue/分页与搜索条件记录并回显优化.md"},o=p(`<h1 id="分页与搜索条件记录并回显优化" tabindex="-1">分页与搜索条件记录并回显优化 <a class="header-anchor" href="#分页与搜索条件记录并回显优化" aria-label="Permalink to &quot;分页与搜索条件记录并回显优化&quot;">​</a></h1><h2 id="整体逻辑" tabindex="-1">整体逻辑 <a class="header-anchor" href="#整体逻辑" aria-label="Permalink to &quot;整体逻辑&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302152051979.png" alt="image-20230215205106488"></p><h2 id="store" tabindex="-1">Store <a class="header-anchor" href="#store" aria-label="Permalink to &quot;Store&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Vuex</span><span style="color:#666666;">.</span><span style="color:#80A665;">Store</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">state</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">pageOptions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">layout</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">prev, pager, next, jumper, sizes, total</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">pageSizes</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Vuex</span><span style="color:#999999;">.</span><span style="color:#59873A;">Store</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">state</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">pageOptions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">layout</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">prev, pager, next, jumper, sizes, total</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">pageSizes</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="mixins" tabindex="-1">Mixins <a class="header-anchor" href="#mixins" aria-label="Permalink to &quot;Mixins&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mapState</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">vuex</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">data</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">wrapperLoading</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">gridLoading</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">isEchoCond</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//回显开关（某些页面特殊需要特殊处理）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">searchConds</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">paginationOptions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">currentPage</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">pageSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">total</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">computed</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">...</span><span style="color:#80A665;">mapState</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">pageOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">methods</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//搜索</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">search</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">searchConds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">conds</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$route</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newQuery</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">({},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">conds</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">stringify</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">page</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$router</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">query</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newQuery</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		 </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//每页数量改变</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">sizeChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queryFn</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$route</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$router</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">query</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">({},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">page</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//页码改变</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">currentChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">page</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$route</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$router</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">query</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">({},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">query</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">page</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">page</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//从query中获取分页信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">initPage</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">page</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$route</span><span style="color:#666666;">.</span><span style="color:#BD976A;">query</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">page</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">page</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">pageSize</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">conds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">conds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">conds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEchoCond</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				 </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">searchConds</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				 </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">initSearchFromCond</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">searchConds</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			 </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//回显搜索条件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">initSearchFromCond</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">relateOptions</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">options</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nameArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">options</span><span style="color:#666666;">.</span><span style="color:#BD976A;">list</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">options</span><span style="color:#666666;">.</span><span style="color:#BD976A;">model</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nameArr</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">conds</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cond</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">g</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">g</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">value</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">op</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">op</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">op</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">like</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#C4704F;">%</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">%</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cond</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">relateOptions</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">].</span><span style="color:#BD976A;">model</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mapState</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">vuex</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">data</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">wrapperLoading</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">gridLoading</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">isEchoCond</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//回显开关（某些页面特殊需要特殊处理）</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">searchConds</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">paginationOptions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">currentPage</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">pageSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">total</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">computed</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">...</span><span style="color:#59873A;">mapState</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">pageOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]),</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">methods</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//搜索</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">search</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">searchConds</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">conds</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$route</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newQuery</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">({},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">conds</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">stringify</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#998418;">page</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$router</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">query</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newQuery</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		 </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//每页数量改变</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">sizeChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queryFn</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$route</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$router</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">query</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">({},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">page</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//页码改变</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">currentChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">page</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$route</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$router</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">query</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">({},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">query</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">page</span><span style="color:#393A34;"> </span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">page</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//从query中获取分页信息</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">initPage</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">page</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$route</span><span style="color:#999999;">.</span><span style="color:#B07D48;">query</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">page</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;">  </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">page</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">pageSize</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;">  </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">conds</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">conds</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">conds</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEchoCond</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				 </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">searchConds</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">				 </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">initSearchFromCond</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">searchConds</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">			 </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//回显搜索条件</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">initSearchFromCond</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">relateOptions</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">options</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nameArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">options</span><span style="color:#999999;">.</span><span style="color:#B07D48;">list</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">options</span><span style="color:#999999;">.</span><span style="color:#B07D48;">model</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nameArr</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">conds</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cond</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">g</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">g</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">value</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">op</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">op</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">op</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">like</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#AB5E3F;">%</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">%</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cond</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">relateOptions</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">].</span><span style="color:#B07D48;">model</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="列表页-xxxlist-vue" tabindex="-1">列表页 xxxList.vue <a class="header-anchor" href="#列表页-xxxlist-vue" aria-label="Permalink to &quot;列表页 xxxList.vue&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">data</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">relateOptions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">inputWidth</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">200px</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">list</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">number</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">序号</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">placeholder</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">情输入序号</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">like</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">名称</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">placeholder</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">请输入名称</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">esn</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">like</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ESN</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">placeholder</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">请输入ESN</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">status.status</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">状态</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">valueList</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">全部</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Online</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">在线</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Offline</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">									</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">离线</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">								</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">model</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">number</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">op</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">like</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">value</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#80A665;">mixins</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">listPage</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#80A665;">watch</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">$route.query</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">immediate</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">deep</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">handler</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">initPage</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">queryXXX</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#80A665;">methods</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">queryXXX</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">gridLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">qobj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">qobj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">conditions</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">searchConds</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pageSize</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">qobj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">limit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pageSize</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#BD976A;">qobj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pageSize</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">queryXXX</span><span style="color:#666666;">(</span><span style="color:#BD976A;">qobj</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">success</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inventories</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">xxxList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">success</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inventories</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">total</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">success</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#BD976A;">total</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">gridLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">searchCondDone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">search</span><span style="color:#666666;">(</span><span style="color:#BD976A;">conds</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">handleSizeChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">sizeChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">handleCurrentChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">page</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">currentChange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">page</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">data</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">relateOptions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">inputWidth</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">200px</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">list</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">number</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">序号</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">placeholder</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">情输入序号</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">like</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">名称</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">placeholder</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">请输入名称</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">esn</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">like</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ESN</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">placeholder</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">请输入ESN</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">status.status</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">状态</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">valueList</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">全部</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Online</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">在线</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Offline</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">									</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">离线</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">								</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">model</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">number</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">op</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">like</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#998418;">value</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#59873A;">mixins</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">listPage</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#59873A;">watch</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">$route.query</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">:</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">immediate</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">deep</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">handler</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">initPage</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">queryXXX</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#59873A;">methods</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B07D48;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">queryXXX</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">gridLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">		  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">qobj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">qobj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">conditions</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">searchConds</span></span>
+<span class="line"><span style="color:#393A34;">      </span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pageSize</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">qobj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">limit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pageSize</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#B07D48;">qobj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">start</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pageSize</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">queryXXX</span><span style="color:#999999;">(</span><span style="color:#B07D48;">qobj</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">success</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inventories</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">xxxList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">success</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inventories</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">total</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">success</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#B07D48;">total</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">gridLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">searchCondDone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">search</span><span style="color:#999999;">(</span><span style="color:#B07D48;">conds</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">handleSizeChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">sizeChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">handleCurrentChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">page</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">currentChange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">page</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span></code></pre></div>`,9),t=[o];function e(c,r,y,A,D,B){return n(),a("div",null,t)}const C=s(l,[["render",e]]);export{i as __pageData,C as default};
diff --git "a/assets/Framework_Vue_\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md.8805bdc2.lean.js" "b/assets/Framework_Vue_\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md.8805bdc2.lean.js"
new file mode 100644
index 00000000..9108b41f
--- /dev/null
+++ "b/assets/Framework_Vue_\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.md.8805bdc2.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"分页与搜索条件记录并回显优化","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Vue/分页与搜索条件记录并回显优化.md","filePath":"Framework/Vue/分页与搜索条件记录并回显优化.md"}'),l={name:"Framework/Vue/分页与搜索条件记录并回显优化.md"},o=p("",9),t=[o];function e(c,r,y,A,D,B){return n(),a("div",null,t)}const C=s(l,[["render",e]]);export{i as __pageData,C as default};
diff --git "a/assets/Framework_Vue_\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md.9f59b85b.js" "b/assets/Framework_Vue_\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md.9f59b85b.js"
new file mode 100644
index 00000000..12ca9dfb
--- /dev/null
+++ "b/assets/Framework_Vue_\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md.9f59b85b.js"
@@ -0,0 +1,79 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"一、删除最后一条数据跳转到上一页","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Vue/列表最后一条数据删除处理.md","filePath":"Framework/Vue/列表最后一条数据删除处理.md"}'),l={name:"Framework/Vue/列表最后一条数据删除处理.md"},o=p(`<h1 id="一、删除最后一条数据跳转到上一页" tabindex="-1">一、删除最后一条数据跳转到上一页 <a class="header-anchor" href="#一、删除最后一条数据跳转到上一页" aria-label="Permalink to &quot;一、删除最后一条数据跳转到上一页&quot;">​</a></h1><blockquote><p>方案一</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/*</span></span>
+<span class="line"><span style="color:#758575DD;">paginationOptions: {</span></span>
+<span class="line"><span style="color:#758575DD;">    currentPage: 1,</span></span>
+<span class="line"><span style="color:#758575DD;">    pageSize: 10,</span></span>
+<span class="line"><span style="color:#758575DD;">    total: 0,</span></span>
+<span class="line"><span style="color:#758575DD;">},</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">removeDone</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">wrapperLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uuid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentRow</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">success</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">removeAccount</span><span style="color:#666666;">({</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uuid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">wrapperLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">success</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$notify</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">success</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">账号</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">删除成功</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//方案一: 判断是否为最后一条数据 并且总数据不能小于1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">total</span><span style="color:#666666;">,</span><span style="color:#BD976A;">currentPage</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        	</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">contactsData</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">total</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//方案二:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span><span style="color:#666666;">,</span><span style="color:#BD976A;">pageSize</span><span style="color:#666666;">,</span><span style="color:#BD976A;">total</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">//求删除后还有几页</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deleteAfterPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">ceil</span><span style="color:#666666;">((</span><span style="color:#BD976A;">total</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pageSize</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">//若删除后页数小于当前页, 取删除后的页数;否则不变</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">curPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deleteAfterPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deleteAfterPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentPage</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">//当前页只有一页则为1,否则取计算得到的页</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">paginationOptions</span><span style="color:#666666;">.</span><span style="color:#BD976A;">currentPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">curPage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">curPage</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">queryAccount</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$notify</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">error</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">message</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">账号</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">删除失败</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/*</span></span>
+<span class="line"><span style="color:#A0ADA0;">paginationOptions: {</span></span>
+<span class="line"><span style="color:#A0ADA0;">    currentPage: 1,</span></span>
+<span class="line"><span style="color:#A0ADA0;">    pageSize: 10,</span></span>
+<span class="line"><span style="color:#A0ADA0;">    total: 0,</span></span>
+<span class="line"><span style="color:#A0ADA0;">},</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">removeDone</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">wrapperLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uuid</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentRow</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">success</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">removeAccount</span><span style="color:#999999;">({</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uuid</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">wrapperLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">success</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$notify</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">success</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">账号</span><span style="color:#999999;">\${</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">删除成功</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//方案一: 判断是否为最后一条数据 并且总数据不能小于1</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">total</span><span style="color:#999999;">,</span><span style="color:#B07D48;">currentPage</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span></span>
+<span class="line"><span style="color:#393A34;">        	</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">contactsData</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">total</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//方案二:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span><span style="color:#999999;">,</span><span style="color:#B07D48;">pageSize</span><span style="color:#999999;">,</span><span style="color:#B07D48;">total</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">//求删除后还有几页</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deleteAfterPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">ceil</span><span style="color:#999999;">((</span><span style="color:#B07D48;">total</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pageSize</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">//若删除后页数小于当前页, 取删除后的页数;否则不变</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">curPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deleteAfterPage</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deleteAfterPage</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentPage</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">//当前页只有一页则为1,否则取计算得到的页</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">paginationOptions</span><span style="color:#999999;">.</span><span style="color:#B07D48;">currentPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">curPage</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">curPage</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">queryAccount</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$notify</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">error</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">message</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">账号</span><span style="color:#999999;">\${</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">删除失败</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},</span></span></code></pre></div>`,3),e=[o];function t(c,r,y,A,D,B){return n(),a("div",null,e)}const C=s(l,[["render",t]]);export{i as __pageData,C as default};
diff --git "a/assets/Framework_Vue_\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md.9f59b85b.lean.js" "b/assets/Framework_Vue_\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md.9f59b85b.lean.js"
new file mode 100644
index 00000000..f749dce9
--- /dev/null
+++ "b/assets/Framework_Vue_\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.md.9f59b85b.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"一、删除最后一条数据跳转到上一页","description":"","frontmatter":{},"headers":[],"relativePath":"Framework/Vue/列表最后一条数据删除处理.md","filePath":"Framework/Vue/列表最后一条数据删除处理.md"}'),l={name:"Framework/Vue/列表最后一条数据删除处理.md"},o=p("",3),e=[o];function t(c,r,y,A,D,B){return n(),a("div",null,e)}const C=s(l,[["render",t]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_CSS_Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md.6624dd93.js" "b/assets/FrontEnd_CSS_Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md.6624dd93.js"
new file mode 100644
index 00000000..6285e8d3
--- /dev/null
+++ "b/assets/FrontEnd_CSS_Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md.6624dd93.js"
@@ -0,0 +1,235 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"Grid布局学习笔记","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/CSS/Grid布局学习笔记.md","filePath":"FrontEnd/CSS/Grid布局学习笔记.md"}'),p={name:"FrontEnd/CSS/Grid布局学习笔记.md"},o=l(`<h1 id="grid布局学习笔记" tabindex="-1">Grid布局学习笔记 <a class="header-anchor" href="#grid布局学习笔记" aria-label="Permalink to &quot;Grid布局学习笔记&quot;">​</a></h1><h2 id="实用网站" tabindex="-1">实用网站 <a class="header-anchor" href="#实用网站" aria-label="Permalink to &quot;实用网站&quot;">​</a></h2><ul><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fcssgridgarden.com%2F%23zh-cn" target="_blank" rel="noreferrer">GRID GARDEN 小游戏</a></li><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fcssgrid-generator.netlify.app%2F" target="_blank" rel="noreferrer">CSS Grid Generator 在线生成器</a></li><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fcss-tricks.com%2Fsnippets%2Fcss%2Fcomplete-guide-grid%2F%23introduction" target="_blank" rel="noreferrer">A Complete Guide to Grid 学习导航</a></li></ul><h2 id="基本概念" tabindex="-1">基本概念 <a class="header-anchor" href="#基本概念" aria-label="Permalink to &quot;基本概念&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162029422.png" alt="image-20230216202917923"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162031156.png" alt="image-20230216203121127"></p><h2 id="容器属性" tabindex="-1">容器属性 <a class="header-anchor" href="#容器属性" aria-label="Permalink to &quot;容器属性&quot;">​</a></h2><h3 id="开启-grid布局" tabindex="-1">开启 Grid布局 <a class="header-anchor" href="#开启-grid布局" aria-label="Permalink to &quot;开启 Grid布局&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="容器划分行列" tabindex="-1">容器划分行列 <a class="header-anchor" href="#容器划分行列" aria-label="Permalink to &quot;容器划分行列&quot;">​</a></h3><ol><li>取值为数值 <code>grid-template-rows:100px 100px 100px</code></li><li>取值为百分比 <code>grid-template-rows:20% 30% 50%</code></li><li>重复函数 <code>grid-template-rows:repeat(3,20%)</code></li><li>自动填充 <code>grid-template-rows:repeat(auto-fill, 30%)</code></li><li>auto自动 <code>grid-template-rows:100px auto 100px</code></li><li>fr片段划分 <code>grid-template-rows:1fr 2fr 1fr</code></li><li>minmax() <code>grid-template-rows:200px 200px minmax(100px,200px)</code></li></ol><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162056312.png" alt="image-20230216205607291"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162056725.png" alt="image-20230216205635684"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162057751.png" alt="image-20230216205710712"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162050568.png" alt="image-20230216205031540"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162050881.png" alt="image-20230216205043840"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162052005.png" alt="image-20230216205247964"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162055862.png" alt=""></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162057797.png" alt="image-20230216205743766"></p><h3 id="调整间距属性" tabindex="-1">调整间距属性 <a class="header-anchor" href="#调整间距属性" aria-label="Permalink to &quot;调整间距属性&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法一：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row-gap</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column-gap</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">30</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">/* 写法二：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-gap</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">/* 写法三：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">gap</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法一：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row-gap</span><span style="color:#999999;">:</span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column-gap</span><span style="color:#999999;">:</span><span style="color:#2F798A;">30</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">/* 写法二：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-gap</span><span style="color:#999999;">:</span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">/* 写法三：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">gap</span><span style="color:#999999;">:</span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162102659.png" alt="image-20230216210259623"></p><h3 id="容器内网格对齐方式" tabindex="-1">容器内网格对齐方式 <a class="header-anchor" href="#容器内网格对齐方式" aria-label="Permalink to &quot;容器内网格对齐方式&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">解释</p><p>网格相对于容器的对齐方式</p></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/*justify-content:space-around;</span></span>
+<span class="line"><span style="color:#758575DD;">  align-content:space-evenly;*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">palce-content</span><span style="color:#666666;">:</span><span style="color:#C99076;">space-around</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">space-evenly</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/*justify-content:space-around;</span></span>
+<span class="line"><span style="color:#A0ADA0;">  align-content:space-evenly;*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">palce-content</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">space-around</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">space-evenly</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162127014.png" alt="image-20230216212726986"></p><p><strong>案例</strong></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">align-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">align-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162231062.png" alt="image-20230216223101040"></p><h3 id="网格内项目对其方式" tabindex="-1">网格内项目对其方式 <a class="header-anchor" href="#网格内项目对其方式" aria-label="Permalink to &quot;网格内项目对其方式&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">解释</p><p>项目相对于网格/区域的对齐方式</p></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">justify</span><span style="color:#CB7676;">-</span><span style="color:#80A665;">items</span><span style="color:#666666;">:</span><span style="color:#BD976A;">center</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">//start, end</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">align</span><span style="color:#CB7676;">-</span><span style="color:#80A665;">items</span><span style="color:#666666;">:</span><span style="color:#BD976A;">center</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">//start, end</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//place-items:center center //水平 垂直</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">justify</span><span style="color:#AB5959;">-</span><span style="color:#59873A;">items</span><span style="color:#999999;">:</span><span style="color:#B07D48;">center</span><span style="color:#999999;">;</span><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">//start, end</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">align</span><span style="color:#AB5959;">-</span><span style="color:#59873A;">items</span><span style="color:#999999;">:</span><span style="color:#B07D48;">center</span><span style="color:#999999;">;</span><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">//start, end</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//place-items:center center //水平 垂直</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162118033.png" alt="image-20230216211850992"></p><p><strong>案例：</strong></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">box</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item a</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item b</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">box</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item a</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item b</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-template-columns</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-template-rows</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">align-items</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">justify-items</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-gap</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-template-areas</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">a a a</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">. b b</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">c c c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">dashed</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">000</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#BD976A;">a</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#BD976A;">b</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> b</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#BD976A;">c</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-template-columns</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">repeat</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-template-rows</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">repeat</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">align-items</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">justify-items</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-gap</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-template-areas</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">a a a</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">. b b</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">c c c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">dashed</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">000</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#B07D48;">a</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#B07D48;">b</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> b</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#B07D48;">c</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162226287.png" alt="image-20230216222635254"></p><h3 id="项目排列顺序" tabindex="-1">项目排列顺序 <a class="header-anchor" href="#项目排列顺序" aria-label="Permalink to &quot;项目排列顺序&quot;">​</a></h3><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162106652.png" alt="image-20230216210624604"></p><h3 id="容器中区域定义" tabindex="-1">容器中区域定义 <a class="header-anchor" href="#容器中区域定义" aria-label="Permalink to &quot;容器中区域定义&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">box</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item a</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item b</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">box</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item a</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item b</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-template-columns</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-template-rows</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">align-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-gap</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-template-areas</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">a a a</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">. b b</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">c c c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">dashed</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">000</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">a</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">b</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> b</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">c</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-template-columns</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">repeat</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-template-rows</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">repeat</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">align-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-gap</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-template-areas</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">a a a</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">. b b</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">c c c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">dashed</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">000</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">a</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">b</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> b</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">c</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162206984.png" alt="image-20230216220606952"></p><h2 id="项目属性" tabindex="-1">项目属性 <a class="header-anchor" href="#项目属性" aria-label="Permalink to &quot;项目属性&quot;">​</a></h2><h3 id="合并单元格属性" tabindex="-1">合并单元格属性 <a class="header-anchor" href="#合并单元格属性" aria-label="Permalink to &quot;合并单元格属性&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">header</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法一：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column-start</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column-end</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row-start</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row-end</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法二：*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> / </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> / </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法三：使用 span 关键字，表示跨越。表示项目的左边框距离右边框跨越 2 个网格。*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-column-start</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> span </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 写法四：若跨度为 1，则可简写第二根网格线*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> / </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> ==&gt;  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#DBD7CAEE;"> / </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> ==&gt;  </span><span style="color:#B8A965;">grid-row</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">header</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法一：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column-start</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column-end</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row-start</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row-end</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法二：*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> / </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> / </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法三：使用 span 关键字，表示跨越。表示项目的左边框距离右边框跨越 2 个网格。*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-column-start</span><span style="color:#999999;">:</span><span style="color:#393A34;"> span </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 写法四：若跨度为 1，则可简写第二根网格线*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> / </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span><span style="color:#393A34;"> ==&gt;  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#393A34;"> / </span><span style="color:#2F798A;">4</span><span style="color:#999999;">;</span><span style="color:#393A34;"> ==&gt;  </span><span style="color:#998418;">grid-row</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302162136332.png" alt="image-20230216213656308"></p><h3 id="项目区域定义" tabindex="-1">项目区域定义 <a class="header-anchor" href="#项目区域定义" aria-label="Permalink to &quot;项目区域定义&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">a</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">b</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> b</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">c</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">a</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">b</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> b</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">c</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">grid-area</p><p><code>grid-area</code> 属性还可用作 <code>grid-row-start</code>、<code>grid-column-start</code>、<code>grid-row-end</code>、<code>grid-column-end</code> 的合并简写形式，直接指定项目的位置。</p></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">grid-area</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">grid-area</span><span style="color:#999999;">:</span><span style="color:#393A34;"> &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="单个项目位置" tabindex="-1">单个项目位置 <a class="header-anchor" href="#单个项目位置" aria-label="Permalink to &quot;单个项目位置&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">justify-self 和 align-self</p><p><code>justify-self</code> 属性设置单元格内容的水平位置（左中右），跟 <code>justify-items</code> 属性的用法完全一致，但只作用于单个项目。</p><p><code>align-self</code> 属性设置单元格内容的垂直位置（上中下），跟 <code>align-items</code> 属性的用法完全一致，也是只作用于单个项目。</p></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-self</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">start</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">end</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">center</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">stretch</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-self</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">start</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">end</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">center</span><span style="color:#DBD7CAEE;"> | </span><span style="color:#C99076;">stretch</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 简写 place-self: &lt;align-self&gt; &lt;justify-self&gt;; */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-self</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">start</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">end</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">center</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">stretch</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-self</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">start</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">end</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">center</span><span style="color:#393A34;"> | </span><span style="color:#A65E2B;">stretch</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 简写 place-self: &lt;align-self&gt; &lt;justify-self&gt;; */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,54),e=[o];function c(t,r,y,i,A,D){return a(),n("div",null,e)}const E=s(p,[["render",c]]);export{B as __pageData,E as default};
diff --git "a/assets/FrontEnd_CSS_Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md.6624dd93.lean.js" "b/assets/FrontEnd_CSS_Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md.6624dd93.lean.js"
new file mode 100644
index 00000000..362f0366
--- /dev/null
+++ "b/assets/FrontEnd_CSS_Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.md.6624dd93.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"Grid布局学习笔记","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/CSS/Grid布局学习笔记.md","filePath":"FrontEnd/CSS/Grid布局学习笔记.md"}'),p={name:"FrontEnd/CSS/Grid布局学习笔记.md"},o=l("",54),e=[o];function c(t,r,y,i,A,D){return a(),n("div",null,e)}const E=s(p,[["render",c]]);export{B as __pageData,E as default};
diff --git "a/assets/FrontEnd_CSS_\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md.083fb786.js" "b/assets/FrontEnd_CSS_\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md.083fb786.js"
new file mode 100644
index 00000000..4c6ce073
--- /dev/null
+++ "b/assets/FrontEnd_CSS_\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md.083fb786.js"
@@ -0,0 +1,175 @@
+import{D as A}from"./chunks/DemoWrap.1b6e7adf.js";import{d as i,h as D,C as B,o as p,c as o,k as l,H as e,N as E,F as C,p as d,m as h,_ as u,w as g,Q as t}from"./chunks/framework.c53372a0.js";const c=s=>(d("data-v-b64031fa"),s=s(),h(),s),v=c(()=>l("pattern",{id:"pattern-1",x:"0",y:"0",width:"24",height:"24",patternUnits:"userSpaceOnUse",patternTransform:"translate(-0.5,-0.5)"},[l("circle",{cx:"0.5",cy:"0.5",r:"0.5",fill:"#60606F"})],-1)),b=c(()=>l("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#pattern-1)"},null,-1)),f=[v,b],m=i({__name:"GridStar",setup(s){const n=D(!0);return(r,a)=>{const y=B("radio");return p(),o(C,null,[l("p",null,[e(y)]),(p(),o("svg",{onClick:a[0]||(a[0]=F=>n.value=!n.value),style:E({backgroundColor:n.value?"#13121a":"#fff"})},f,4))],64)}}});const q=u(m,[["__scopeId","data-v-b64031fa"]]),_=t(`<h1 id="css常用代码段" tabindex="-1">CSS常用代码段 <a class="header-anchor" href="#css常用代码段" aria-label="Permalink to &quot;CSS常用代码段&quot;">​</a></h1><h2 id="单行与多行溢出隐藏" tabindex="-1">单行与多行溢出隐藏 <a class="header-anchor" href="#单行与多行溢出隐藏" aria-label="Permalink to &quot;单行与多行溢出隐藏&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">white-space</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">nowrap</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text-overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">ellipsis</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">white-space</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">nowrap</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text-overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">ellipsis</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-webkit-box</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text-overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">ellipsis</span><span style="color:#666666;">;</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">-webkit-box-orient</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">vertical</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/* 布局方向 */</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">-webkit-line-clamp</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* 显示三行文本 */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-webkit-box</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text-overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">ellipsis</span><span style="color:#999999;">;</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#998418;">-webkit-box-orient</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">vertical</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/* 布局方向 */</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#998418;">-webkit-line-clamp</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* 显示三行文本 */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="自定义滚动条" tabindex="-1">自定义滚动条 <a class="header-anchor" href="#自定义滚动条" aria-label="Permalink to &quot;自定义滚动条&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">html</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#4D9375;">body</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 隐藏滚动条 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">scrollbar-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* firefox */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">-ms-overflow-style</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* IE 10+ */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  &amp;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">:</span><span style="color:#C99076;">-webkit-scrollbar</span><span style="color:#DBD7CAEE;"> {</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    display: </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* Chrome Safari */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* 自定义滚动条 */</span></span>
+<span class="line"><span style="color:#4D9375;">body</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">auto</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">scrollbar-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* Firefox */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  &amp;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">:</span><span style="color:#C99076;">-webkit-scrollbar</span><span style="color:#DBD7CAEE;"> {</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    width: </span><span style="color:#4C9A91;">5</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  &amp;</span><span style="color:#666666;">::</span><span style="color:#BD976A;">-webkit-scrollbar-track-piece</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">$</span><span style="color:#C99076;">color</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">#</span><span style="color:#C99076;">000000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> $</span><span style="color:#C99076;">alpha</span><span style="color:#DBD7CAEE;">: </span><span style="color:#4C9A91;">.3</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  &amp;</span><span style="color:#666666;">::</span><span style="color:#BD976A;">-webkit-scrollbar-thumb</span><span style="color:#DBD7CAEE;">:vertical </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">0085F9</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">html</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#1E754F;">body</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 隐藏滚动条 */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">scrollbar-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* firefox */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">-ms-overflow-style</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* IE 10+ */</span></span>
+<span class="line"><span style="color:#393A34;">  &amp;</span><span style="color:#999999;">:</span><span style="color:#393A34;">:</span><span style="color:#A65E2B;">-webkit-scrollbar</span><span style="color:#393A34;"> {</span></span>
+<span class="line"><span style="color:#393A34;">    display: </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* Chrome Safari */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* 自定义滚动条 */</span></span>
+<span class="line"><span style="color:#1E754F;">body</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">auto</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">scrollbar-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* Firefox */</span></span>
+<span class="line"><span style="color:#393A34;">  &amp;</span><span style="color:#999999;">:</span><span style="color:#393A34;">:</span><span style="color:#A65E2B;">-webkit-scrollbar</span><span style="color:#393A34;"> {</span></span>
+<span class="line"><span style="color:#393A34;">    width: </span><span style="color:#2F798A;">5</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  &amp;</span><span style="color:#999999;">::</span><span style="color:#B07D48;">-webkit-scrollbar-track-piece</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#393A34;">$</span><span style="color:#A65E2B;">color</span><span style="color:#393A34;">: </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">000000</span><span style="color:#999999;">,</span><span style="color:#393A34;"> $</span><span style="color:#A65E2B;">alpha</span><span style="color:#393A34;">: </span><span style="color:#2F798A;">.3</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  &amp;</span><span style="color:#999999;">::</span><span style="color:#B07D48;">-webkit-scrollbar-thumb</span><span style="color:#393A34;">:vertical </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">0085F9</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><h2 id="画布网状满天星背景" tabindex="-1">画布网状满天星背景 <a class="header-anchor" href="#画布网状满天星背景" aria-label="Permalink to &quot;画布网状满天星背景&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">svg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">pattern</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">id</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">pattern-1</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">x</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">y</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">width</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">24</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">height</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">24</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">patternUnits</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">userSpaceOnUse</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">patternTransform</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">translate(-0.5,-0.5)</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">circle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cx</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0.5</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cy</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0.5</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">r</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0.5</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fill</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#60606F</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">circle</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">pattern</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">rect</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fill</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">url(#pattern-1)</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">rect</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">svg</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">svg</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">pattern</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">id</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">pattern-1</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">x</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">y</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">width</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">24</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">height</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">24</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">patternUnits</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">userSpaceOnUse</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">patternTransform</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">translate(-0.5,-0.5)</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">circle</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cx</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0.5</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cy</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0.5</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">r</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0.5</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fill</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#60606F</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">circle</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">pattern</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">rect</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fill</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">url(#pattern-1)</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">rect</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">svg</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">svg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin-top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:#</span><span style="color:#C99076;">13121a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">svg</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin-top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:#</span><span style="color:#A65E2B;">13121a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,9),k=t(`<h2 id="轮播闪光" tabindex="-1">轮播闪光 <a class="header-anchor" href="#轮播闪光" aria-label="Permalink to &quot;轮播闪光&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202306052345184.gif" alt=""></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">shine</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#CB7676;">to</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">bottom</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">right</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.3</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.15</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rotate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-45</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">animation</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> shine </span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;">s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">ease-in-out</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">infinite</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">keyframes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shine</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-200</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">to</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">150</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">shine</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#AB5959;">to</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">bottom</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">right</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.3</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.15</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rotate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-45</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">animation</span><span style="color:#999999;">:</span><span style="color:#393A34;"> shine </span><span style="color:#2F798A;">2</span><span style="color:#AB5959;">s</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">ease-in-out</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">infinite</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">keyframes</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shine</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">from</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-200</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">to</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">150</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="flex布局子元素给了高度-实际渲染确有小数点问题" tabindex="-1">flex布局子元素给了高度，实际渲染确有小数点问题 <a class="header-anchor" href="#flex布局子元素给了高度-实际渲染确有小数点问题" aria-label="Permalink to &quot;flex布局子元素给了高度，实际渲染确有小数点问题&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">flex-direction</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">column</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">child</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">child1</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">flex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> //需要给相邻元素添加</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">flex-direction</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">column</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">child</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">child1</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">flex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> //需要给相邻元素添加</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#dbd7caee;"></span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393a34;"></span></span></code></pre></div>`,6),T=JSON.parse('{"title":"CSS常用代码段","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/CSS/常用代码段.md","filePath":"FrontEnd/CSS/常用代码段.md"}'),x={name:"FrontEnd/CSS/常用代码段.md"},P=Object.assign(x,{setup(s){return(n,r)=>{const a=A;return p(),o("div",null,[_,e(a,{pkg:"FrontEnd/CSS/demo",path:"GridStar.vue"},{default:g(()=>[e(q)]),_:1}),k])}}});export{T as __pageData,P as default};
diff --git "a/assets/FrontEnd_CSS_\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md.083fb786.lean.js" "b/assets/FrontEnd_CSS_\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md.083fb786.lean.js"
new file mode 100644
index 00000000..fc44f93c
--- /dev/null
+++ "b/assets/FrontEnd_CSS_\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.md.083fb786.lean.js"
@@ -0,0 +1 @@
+import{D as A}from"./chunks/DemoWrap.1b6e7adf.js";import{d as i,h as D,C as B,o as p,c as o,k as l,H as e,N as E,F as C,p as d,m as h,_ as u,w as g,Q as t}from"./chunks/framework.c53372a0.js";const c=s=>(d("data-v-b64031fa"),s=s(),h(),s),v=c(()=>l("pattern",{id:"pattern-1",x:"0",y:"0",width:"24",height:"24",patternUnits:"userSpaceOnUse",patternTransform:"translate(-0.5,-0.5)"},[l("circle",{cx:"0.5",cy:"0.5",r:"0.5",fill:"#60606F"})],-1)),b=c(()=>l("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#pattern-1)"},null,-1)),f=[v,b],m=i({__name:"GridStar",setup(s){const n=D(!0);return(r,a)=>{const y=B("radio");return p(),o(C,null,[l("p",null,[e(y)]),(p(),o("svg",{onClick:a[0]||(a[0]=F=>n.value=!n.value),style:E({backgroundColor:n.value?"#13121a":"#fff"})},f,4))],64)}}});const q=u(m,[["__scopeId","data-v-b64031fa"]]),_=t("",9),k=t("",6),T=JSON.parse('{"title":"CSS常用代码段","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/CSS/常用代码段.md","filePath":"FrontEnd/CSS/常用代码段.md"}'),x={name:"FrontEnd/CSS/常用代码段.md"},P=Object.assign(x,{setup(s){return(n,r)=>{const a=A;return p(),o("div",null,[_,e(a,{pkg:"FrontEnd/CSS/demo",path:"GridStar.vue"},{default:g(()=>[e(q)]),_:1}),k])}}});export{T as __pageData,P as default};
diff --git "a/assets/FrontEnd_CSS_\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md.3689a434.js" "b/assets/FrontEnd_CSS_\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md.3689a434.js"
new file mode 100644
index 00000000..f07edd5a
--- /dev/null
+++ "b/assets/FrontEnd_CSS_\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md.3689a434.js"
@@ -0,0 +1,341 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"妙妙怪的《CSS 揭秘》读书摘要","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/CSS/揭秘读书摘要.md","filePath":"FrontEnd/CSS/揭秘读书摘要.md"}'),p={name:"FrontEnd/CSS/揭秘读书摘要.md"},o=l(`<h1 id="妙妙怪的《css-揭秘》读书摘要" tabindex="-1">妙妙怪的《CSS 揭秘》读书摘要 <a class="header-anchor" href="#妙妙怪的《css-揭秘》读书摘要" aria-label="Permalink to &quot;妙妙怪的《CSS 揭秘》读书摘要&quot;">​</a></h1><blockquote><p>看这本书前：看书，现在短视频时代，正经人谁看书啊，要看也是看视频教程和大佬博客啊！</p><p>看完这本后：似乎有一点香！(轻松有趣)</p></blockquote><p>从这本书字里行间可以感受到作者也是个有趣的灵魂。</p><blockquote><p>看了这本书知识浅显易懂、挺有趣的，重新让我拾回看书的一些兴趣；</p><p>这本书让我感受到 CSS 一些巧妙的技巧，故摘抄以便往后快捷运用。</p></blockquote><h2 id="背景与边框" tabindex="-1">背景与边框 <a class="header-anchor" href="#背景与边框" aria-label="Permalink to &quot;背景与边框&quot;">​</a></h2><h3 id="多重边框" tabindex="-1">多重边框 <a class="header-anchor" href="#多重边框" aria-label="Permalink to &quot;多重边框&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">box-shadow</span><span style="color:#DBD7CAEE;">: 0 0 0 10px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">655</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> 0 0 0 15px deeppink</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> 0 2px 5px 15px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">ccc;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">box-shadow</span><span style="color:#393A34;">: 0 0 0 10px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">655</span><span style="color:#999999;">,</span><span style="color:#393A34;"> 0 0 0 15px deeppink</span><span style="color:#999999;">,</span><span style="color:#393A34;"> 0 2px 5px 15px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">ccc;</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041624153.png" alt="image-20230204162420066"></p><h3 id="灵活的背景定位" tabindex="-1">灵活的背景定位 <a class="header-anchor" href="#灵活的背景定位" aria-label="Permalink to &quot;灵活的背景定位&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">background-position</span><span style="color:#666666;">:</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> 20px bottom 10px;//离右侧20px、下边10px</span></span>
+<span class="line"><span style="color:#4D9375;">background-position</span><span style="color:#DBD7CAEE;">:calc(100%-20px) calc(100%-10px);</span></span>
+<span class="line"><span style="color:#4D9375;">background-origin</span><span style="color:#DBD7CAEE;">:</span><span style="color:#4D9375;">content-box</span><span style="color:#DBD7CAEE;">;//以内容盒为准</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">background-position</span><span style="color:#999999;">:</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> 20px bottom 10px;//离右侧20px、下边10px</span></span>
+<span class="line"><span style="color:#1E754F;">background-position</span><span style="color:#393A34;">:calc(100%-20px) calc(100%-10px);</span></span>
+<span class="line"><span style="color:#1E754F;">background-origin</span><span style="color:#393A34;">:</span><span style="color:#1E754F;">content-box</span><span style="color:#393A34;">;//以内容盒为准</span></span></code></pre></div><h3 id="边框内圆角" tabindex="-1">边框内圆角 <a class="header-anchor" href="#边框内圆角" aria-label="Permalink to &quot;边框内圆角&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">background: tan;</span></span>
+<span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;font-style:italic;">.</span><span style="color:#FDAEB7;font-style:italic;">8em</span><span style="color:#DBD7CAEE;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">padding: 1em;</span></span>
+<span class="line"><span style="color:#4D9375;">box-shadow</span><span style="color:#DBD7CAEE;">: 0 0 0 </span><span style="color:#666666;font-style:italic;">.</span><span style="color:#FDAEB7;font-style:italic;">4em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">655</span><span style="color:#DBD7CAEE;">;//扩张半径取圆角的一半</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">outline: </span><span style="color:#666666;font-style:italic;">.</span><span style="color:#FDAEB7;font-style:italic;">4em</span><span style="color:#DBD7CAEE;"> solid </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">655</span><span style="color:#DBD7CAEE;">;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">background: tan;</span></span>
+<span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: </span><span style="color:#999999;font-style:italic;">.</span><span style="color:#B31D28;font-style:italic;">8em</span><span style="color:#393A34;">;</span></span>
+<span class="line"><span style="color:#393A34;">padding: 1em;</span></span>
+<span class="line"><span style="color:#1E754F;">box-shadow</span><span style="color:#393A34;">: 0 0 0 </span><span style="color:#999999;font-style:italic;">.</span><span style="color:#B31D28;font-style:italic;">4em</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">655</span><span style="color:#393A34;">;//扩张半径取圆角的一半</span></span>
+<span class="line"><span style="color:#393A34;">outline: </span><span style="color:#999999;font-style:italic;">.</span><span style="color:#B31D28;font-style:italic;">4em</span><span style="color:#393A34;"> solid </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">655</span><span style="color:#393A34;">;</span></span></code></pre></div><h3 id="条纹背景" tabindex="-1">条纹背景 <a class="header-anchor" href="#条纹背景" aria-label="Permalink to &quot;条纹背景&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">//横向</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">background: linear-gradient(</span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#DBD7CAEE;"> 33.3%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 66.6%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">ccc</span><span style="color:#DBD7CAEE;"> 0);</span></span>
+<span class="line"><span style="color:#4D9375;">background-size</span><span style="color:#DBD7CAEE;">: 100% 20px;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">//垂直</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">background: linear-gradient(to right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#DBD7CAEE;"> 33.3%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 66.6%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">ccc</span><span style="color:#DBD7CAEE;"> 0);</span></span>
+<span class="line"><span style="color:#4D9375;">background-size</span><span style="color:#DBD7CAEE;">: 20px 100%;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">//斜向</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">background: linear-gradient(45deg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#DBD7CAEE;"> 25%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 50%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">ccc</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">ccc</span><span style="color:#DBD7CAEE;"> 75%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0);</span></span>
+<span class="line"><span style="color:#4D9375;">background-size</span><span style="color:#DBD7CAEE;">: 100%;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">//重复任意角度条纹</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> background: repeating-linear-gradient( 60deg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#BD976A;">fb3</span><span style="color:#DBD7CAEE;"> 15px</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">58a</span><span style="color:#DBD7CAEE;"> 30px);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">//横向</span></span>
+<span class="line"><span style="color:#393A34;">background: linear-gradient(</span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#393A34;"> 33.3%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 66.6%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">ccc</span><span style="color:#393A34;"> 0);</span></span>
+<span class="line"><span style="color:#1E754F;">background-size</span><span style="color:#393A34;">: 100% 20px;</span></span>
+<span class="line"><span style="color:#393A34;">//垂直</span></span>
+<span class="line"><span style="color:#393A34;">background: linear-gradient(to right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#393A34;"> 33.3%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 66.6%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">ccc</span><span style="color:#393A34;"> 0);</span></span>
+<span class="line"><span style="color:#1E754F;">background-size</span><span style="color:#393A34;">: 20px 100%;</span></span>
+<span class="line"><span style="color:#393A34;">//斜向</span></span>
+<span class="line"><span style="color:#393A34;">background: linear-gradient(45deg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#393A34;"> 25%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 50%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">ccc</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">ccc</span><span style="color:#393A34;"> 75%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0);</span></span>
+<span class="line"><span style="color:#1E754F;">background-size</span><span style="color:#393A34;">: 100%;</span></span>
+<span class="line"><span style="color:#393A34;">//重复任意角度条纹</span></span>
+<span class="line"><span style="color:#393A34;"> background: repeating-linear-gradient( 60deg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#B07D48;">fb3</span><span style="color:#393A34;"> 15px</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">58a</span><span style="color:#393A34;"> 30px);</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041626739.png" alt="image-20230204162605711"></p><h2 id="形状" tabindex="-1">形状 <a class="header-anchor" href="#形状" aria-label="Permalink to &quot;形状&quot;">​</a></h2><h3 id="圆角" tabindex="-1">圆角 <a class="header-anchor" href="#圆角" aria-label="Permalink to &quot;圆角&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">:水平半径/垂直半径 </span></span>
+<span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: 50% / 100% 0;//树叶形状   </span></span>
+<span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: 100% 0 0 100%/50%; //半椭圆</span></span>
+<span class="line"><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: 100% 0 0 0;//四分之一椭圆</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">:水平半径/垂直半径 </span></span>
+<span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: 50% / 100% 0;//树叶形状   </span></span>
+<span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: 100% 0 0 100%/50%; //半椭圆</span></span>
+<span class="line"><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: 100% 0 0 0;//四分之一椭圆</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041627705.png" alt="image-20230204162727674"></p><h3 id="平行四边形" tabindex="-1">平行四边形 <a class="header-anchor" href="#平行四边形" aria-label="Permalink to &quot;平行四边形&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/*按钮内容不行变解决方案*/</span></span>
+<span class="line"><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">outline</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">margin-left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">z-index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">button</span><span style="color:#666666;">::</span><span style="color:#BD976A;">after</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">bottom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">90</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">35</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">block</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">5C7AEA</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">skewX</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-30</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">z-index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/*按钮内容不行变解决方案*/</span></span>
+<span class="line"><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">outline</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">margin-left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">z-index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">button</span><span style="color:#999999;">::</span><span style="color:#B07D48;">after</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">bottom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">90</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">35</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">block</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">5C7AEA</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">skewX</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-30</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">z-index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041629321.png" alt="image-20230204162908289"></p><h3 id="梯形" tabindex="-1">梯形 <a class="header-anchor" href="#梯形" aria-label="Permalink to &quot;梯形&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgb</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">52</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">199</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">155</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">auto</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">font-size</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">40</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">fff</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">line-height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">block</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">z-index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-bottom-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgb</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">52</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">199</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">155</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">::</span><span style="color:#BD976A;">after</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">block</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">z-index</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-bottom-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgb</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">52</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">199</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">155</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgb</span><span style="color:#999999;">(</span><span style="color:#2F798A;">52</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">199</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">155</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">auto</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">font-size</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">40</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">fff</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">line-height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">block</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">z-index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-bottom-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgb</span><span style="color:#999999;">(</span><span style="color:#2F798A;">52</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">199</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">155</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">::</span><span style="color:#B07D48;">after</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">block</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">z-index</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-bottom-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgb</span><span style="color:#999999;">(</span><span style="color:#2F798A;">52</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">199</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">155</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041632982.png" alt="image-20230204163212947"></p><h2 id="视觉效果" tabindex="-1">视觉效果 <a class="header-anchor" href="#视觉效果" aria-label="Permalink to &quot;视觉效果&quot;">​</a></h2><blockquote><p>投影大致原理： <code>box-shadow: 2px 3px 4px rgba(0, 0, 0, .5);</code></p><ol><li>画该元素相同尺寸、位置、指定颜色的矩形</li><li>按指定的 x、y 进行水平垂直位移</li><li>按指定模糊半径，使用高斯模糊算法进行处理</li><li>切除与原始元素交集部分</li></ol></blockquote><h3 id="双侧投影" tabindex="-1">双侧投影 <a class="header-anchor" href="#双侧投影" aria-label="Permalink to &quot;双侧投影&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">box-shadow</span><span style="color:#DBD7CAEE;">: 5px 0 5px -5px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">-5px 0 5px -5px red</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">box-shadow</span><span style="color:#393A34;">: 5px 0 5px -5px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">000</span><span style="color:#999999;">,</span><span style="color:#393A34;">-5px 0 5px -5px red</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041633244.png" alt="image-20230204163300223"></p><h3 id="染色效果" tabindex="-1">染色效果 <a class="header-anchor" href="#染色效果" aria-label="Permalink to &quot;染色效果&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">filter</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">sepia</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">saturate</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">hue-rotate</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">295</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">filter</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">sepia</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#998418;">saturate</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#998418;">hue-rotate</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">295</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041636799.png" alt="image-20230204163621777"></p><h3 id="毛玻璃" tabindex="-1">毛玻璃 <a class="header-anchor" href="#毛玻璃" aria-label="Permalink to &quot;毛玻璃&quot;">​</a></h3><blockquote><p>IE 不支持 Chrome 大于等于 76 Edge 大于等于 17 Firefox 70 至 94</p></blockquote><h3 id="折角效果" tabindex="-1">折角效果 <a class="header-anchor" href="#折角效果" aria-label="Permalink to &quot;折角效果&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">box </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                 </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.5</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">210</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.5</span><span style="color:#CB7676;">em</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">edb21d</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.73</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">240</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">ccc</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">translateY</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-1.3</span><span style="color:#CB7676;">em</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rotate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-30</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">transform-origin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">bottom</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">right</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">border-bottom-left-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">inherit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">box-shadow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-0.3</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.2</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.3</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-0.1</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">bbb</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">box </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">                 </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.5</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#2F798A;">210</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.5</span><span style="color:#AB5959;">em</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">edb21d</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.73</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#2F798A;">240</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">ccc</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">translateY</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-1.3</span><span style="color:#AB5959;">em</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#998418;">rotate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-30</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">transform-origin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">bottom</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">right</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">border-bottom-left-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">inherit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">box-shadow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-0.3</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.2</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.3</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-0.1</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">bbb</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041641904.png" alt=""></p><p><strong>折角效果 mixin 预处理器</strong></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">mixin</span><span style="color:#DBD7CAEE;"> folded-corner($background,$size,$angle:30deg)</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    position:relative;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    background:$background;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    background:linear-gradient($angle - 180deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        transparent $size</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">$background 0);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">border-radius</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;font-style:italic;">.</span><span style="color:#FDAEB7;font-style:italic;">5em</span><span style="color:#DBD7CAEE;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    $x:$size / sin($angle);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    $y:$size / cos($angle);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">&amp;</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#CB7676;">to</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">bottom</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">transparent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">.2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">.4</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">no-repeat</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">$</span><span style="color:#C99076;">y</span><span style="color:#666666;">;</span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">$</span><span style="color:#C99076;">x</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#B8A965;">translateY</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">$y-$</span><span style="color:#C99076;">x</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rotate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;">*$angle - </span><span style="color:#4C9A91;">90</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">transform-origin</span><span style="color:#666666;">:</span><span style="color:#C99076;">bottom</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">right</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-bottom-left-radius</span><span style="color:#666666;">:</span><span style="color:#C99076;">inherit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">box-shadow</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">-.2</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.2</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.3</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-.1</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgba</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">.15</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">/*当调用时...*/</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">note</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    @</span><span style="color:#B8A965;">include</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">folded-corner</span><span style="color:#DBD7CAEE;">(#68</span><span style="color:#B8A965;">d</span><span style="color:#DBD7CAEE;">,1.3</span><span style="color:#B8A965;">em</span><span style="color:#DBD7CAEE;">,60</span><span style="color:#B8A965;">deg</span><span style="color:#DBD7CAEE;">)</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">mixin</span><span style="color:#393A34;"> folded-corner($background,$size,$angle:30deg)</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    position:relative;</span></span>
+<span class="line"><span style="color:#393A34;">    background:$background;</span></span>
+<span class="line"><span style="color:#393A34;">    background:linear-gradient($angle - 180deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        transparent $size</span><span style="color:#999999;">,</span><span style="color:#393A34;">$background 0);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">border-radius</span><span style="color:#393A34;">: </span><span style="color:#999999;font-style:italic;">.</span><span style="color:#B31D28;font-style:italic;">5em</span><span style="color:#393A34;">;</span></span>
+<span class="line"><span style="color:#393A34;">    $x:$size / sin($angle);</span></span>
+<span class="line"><span style="color:#393A34;">    $y:$size / cos($angle);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">&amp;</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#AB5959;">to</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">left</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">bottom</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">transparent</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">.2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">.4</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">no-repeat</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;">$</span><span style="color:#A65E2B;">y</span><span style="color:#999999;">;</span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;">$</span><span style="color:#A65E2B;">x</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#998418;">translateY</span><span style="color:#999999;">(</span><span style="color:#393A34;">$y-$</span><span style="color:#A65E2B;">x</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#998418;">rotate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#393A34;">*$angle - </span><span style="color:#2F798A;">90</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">transform-origin</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">bottom</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">right</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-bottom-left-radius</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">inherit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">box-shadow</span><span style="color:#999999;">:</span><span style="color:#2F798A;">-.2</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.2</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.3</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-.1</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgba</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">.15</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*当调用时...*/</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">note</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    @</span><span style="color:#998418;">include</span><span style="color:#393A34;"> </span><span style="color:#998418;">folded-corner</span><span style="color:#393A34;">(#68</span><span style="color:#998418;">d</span><span style="color:#393A34;">,1.3</span><span style="color:#998418;">em</span><span style="color:#393A34;">,60</span><span style="color:#998418;">deg</span><span style="color:#393A34;">)</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="字体排印" tabindex="-1">字体排印 <a class="header-anchor" href="#字体排印" aria-label="Permalink to &quot;字体排印&quot;">​</a></h2><h3 id="插入换行" tabindex="-1">插入换行 <a class="header-anchor" href="#插入换行" aria-label="Permalink to &quot;插入换行&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">hyphens：manual; / </span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;">手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 ­ </span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> /</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">hyphens：none; / </span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;">无。即使单词中有换行符，也不会换行，只会在空白处换行</span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> /</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">hyphens：auto; / </span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;">自动。浏览器在适当的位置自动插入连字符换行</span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> /</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">hyphens：manual; / </span><span style="color:#1E754F;">*</span><span style="color:#393A34;">手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 ­ </span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> /</span></span>
+<span class="line"><span style="color:#393A34;">hyphens：none; / </span><span style="color:#1E754F;">*</span><span style="color:#393A34;">无。即使单词中有换行符，也不会换行，只会在空白处换行</span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> /</span></span>
+<span class="line"><span style="color:#393A34;">hyphens：auto; / </span><span style="color:#1E754F;">*</span><span style="color:#393A34;">自动。浏览器在适当的位置自动插入连字符换行</span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> /</span></span></code></pre></div><blockquote><p>可以结合选择器 <code>+ / ~ / not(:first-child)</code> 实现在元素后面添加 <code>，/ 换行符</code></p></blockquote><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">dd</span><span style="color:#CB7676;">+</span><span style="color:#4D9375;">dt</span><span style="color:#666666;">::</span><span style="color:#BD976A;">before</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\A</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/*content:&#39;,&#39;;*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">white-space</span><span style="color:#666666;">:</span><span style="color:#C99076;">pre</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/*空白会被浏览器保留*/</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">dd</span><span style="color:#AB5959;">+</span><span style="color:#1E754F;">dt</span><span style="color:#999999;">::</span><span style="color:#B07D48;">before</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\A</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/*content:&#39;,&#39;;*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">white-space</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">pre</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/*空白会被浏览器保留*/</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="文本行斑马线" tabindex="-1">文本行斑马线 <a class="header-anchor" href="#文本行斑马线" aria-label="Permalink to &quot;文本行斑马线&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.5</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">line-height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">hsl</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">184</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">61</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">76</span><span style="color:#CB7676;">%</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-image</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">rgb</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">230</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">230</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">230</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-size</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">auto</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-origin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">content-box</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">font-family</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> Consolas</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> Monaco</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">monospace</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.5</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">line-height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">hsl</span><span style="color:#999999;">(</span><span style="color:#2F798A;">184</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">61</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">76</span><span style="color:#AB5959;">%</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-image</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#998418;">rgb</span><span style="color:#999999;">(</span><span style="color:#2F798A;">230</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">230</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">230</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-size</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">auto</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-origin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">content-box</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">font-family</span><span style="color:#999999;">:</span><span style="color:#393A34;"> Consolas</span><span style="color:#999999;">,</span><span style="color:#393A34;"> Monaco</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">monospace</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041645200.png" alt="image-20230204164506163"></p><h3 id="自定义下划线" tabindex="-1">自定义下划线 <a class="header-anchor" href="#自定义下划线" aria-label="Permalink to &quot;自定义下划线&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">linear-gradient</span><span style="color:#666666;">(</span><span style="color:#C99076;">gray</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">gray</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">no-repeat</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-size</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.15</span><span style="color:#CB7676;">em</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text-shadow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">.05</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">-.05</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">linear-gradient</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">gray</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">gray</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">no-repeat</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-size</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.15</span><span style="color:#AB5959;">em</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text-shadow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">.05</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">-.05</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041647704.png" alt="image-20230204164714672"></p><h3 id="凹凸印刷文字效果" tabindex="-1">凹凸印刷文字效果 <a class="header-anchor" href="#凹凸印刷文字效果" aria-label="Permalink to &quot;凹凸印刷文字效果&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">text-shadow</span><span style="color:#DBD7CAEE;">: 1px 1px 1px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> -1px -1px 1px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">fff;//凸</span></span>
+<span class="line"><span style="color:#4D9375;">text-shadow</span><span style="color:#DBD7CAEE;">: -1px -1px 1px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">000</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> 1px 1px 1px </span><span style="color:#666666;font-style:italic;">#</span><span style="color:#FDAEB7;font-style:italic;">fff;//凹</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">text-shadow</span><span style="color:#393A34;">: 1px 1px 1px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">000</span><span style="color:#999999;">,</span><span style="color:#393A34;"> -1px -1px 1px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">fff;//凸</span></span>
+<span class="line"><span style="color:#1E754F;">text-shadow</span><span style="color:#393A34;">: -1px -1px 1px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">000</span><span style="color:#999999;">,</span><span style="color:#393A34;"> 1px 1px 1px </span><span style="color:#999999;font-style:italic;">#</span><span style="color:#B31D28;font-style:italic;">fff;//凹</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041650836.png" alt="image-20230204165035803"></p><h3 id="满幅背景、定宽内容-页脚" tabindex="-1">满幅背景、定宽内容（页脚） <a class="header-anchor" href="#满幅背景、定宽内容-页脚" aria-label="Permalink to &quot;满幅背景、定宽内容（页脚）&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">footer</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">max-width</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1000</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">em</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">calc</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#4C9A91;">-500</span><span style="color:#CB7676;">px</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">footer</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">max-width</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1000</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">em</span><span style="color:#393A34;"> </span><span style="color:#998418;">calc</span><span style="color:#999999;">(</span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#2F798A;">-500</span><span style="color:#AB5959;">px</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="紧贴底部的页脚" tabindex="-1">紧贴底部的页脚 <a class="header-anchor" href="#紧贴底部的页脚" aria-label="Permalink to &quot;紧贴底部的页脚&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">body</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">flex-direction</span><span style="color:#666666;">:</span><span style="color:#C99076;">column</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">min-height</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">vh</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">main</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">flex</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">body</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">flex-direction</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">column</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">min-height</span><span style="color:#999999;">:</span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">vh</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">main</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">flex</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="闪烁效果" tabindex="-1">闪烁效果 <a class="header-anchor" href="#闪烁效果" aria-label="Permalink to &quot;闪烁效果&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">pink</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">animation</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> twinkle </span><span style="color:#4C9A91;">0.5</span><span style="color:#CB7676;">s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">infinite</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">steps</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">alternate</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/*普通闪烁*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">animation</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> twinkle </span><span style="color:#4C9A91;">0.5</span><span style="color:#CB7676;">s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">infinite</span><span style="color:#DBD7CAEE;">   </span><span style="color:#C99076;">alternate</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/*真实闪烁*/</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">keyframes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">twinkle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">0%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">100%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;">  </span><span style="color:#A65E2B;">pink</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">animation</span><span style="color:#999999;">:</span><span style="color:#393A34;"> twinkle </span><span style="color:#2F798A;">0.5</span><span style="color:#AB5959;">s</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">infinite</span><span style="color:#393A34;"> </span><span style="color:#998418;">steps</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">alternate</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/*普通闪烁*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">animation</span><span style="color:#999999;">:</span><span style="color:#393A34;"> twinkle </span><span style="color:#2F798A;">0.5</span><span style="color:#AB5959;">s</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">infinite</span><span style="color:#393A34;">   </span><span style="color:#A65E2B;">alternate</span><span style="color:#999999;">;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/*真实闪烁*/</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">keyframes</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">twinkle</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">0%</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">100%</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041657747.gif" alt="2023-02-04 16.57.27"></p>`,61),e=[o];function t(c,r,y,A,i,D){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{B as __pageData,C as default};
diff --git "a/assets/FrontEnd_CSS_\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md.3689a434.lean.js" "b/assets/FrontEnd_CSS_\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md.3689a434.lean.js"
new file mode 100644
index 00000000..ee760a3d
--- /dev/null
+++ "b/assets/FrontEnd_CSS_\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.md.3689a434.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"妙妙怪的《CSS 揭秘》读书摘要","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/CSS/揭秘读书摘要.md","filePath":"FrontEnd/CSS/揭秘读书摘要.md"}'),p={name:"FrontEnd/CSS/揭秘读书摘要.md"},o=l("",61),e=[o];function t(c,r,y,A,i,D){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{B as __pageData,C as default};
diff --git "a/assets/FrontEnd_Git_Git\345\270\270\347\224\250\346\223\215\344\275\234.md.a0e87468.js" "b/assets/FrontEnd_Git_Git\345\270\270\347\224\250\346\223\215\344\275\234.md.a0e87468.js"
new file mode 100644
index 00000000..65bd3146
--- /dev/null
+++ "b/assets/FrontEnd_Git_Git\345\270\270\347\224\250\346\223\215\344\275\234.md.a0e87468.js"
@@ -0,0 +1,115 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const g=JSON.parse('{"title":"Git常用操作","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/Git/Git常用操作.md","filePath":"FrontEnd/Git/Git常用操作.md"}'),o={name:"FrontEnd/Git/Git常用操作.md"},p=l(`<h1 id="git常用操作" tabindex="-1">Git常用操作 <a class="header-anchor" href="#git常用操作" aria-label="Permalink to &quot;Git常用操作&quot;">​</a></h1><h2 id="拉取最新提交" tabindex="-1">拉取最新提交 <a class="header-anchor" href="#拉取最新提交" aria-label="Permalink to &quot;拉取最新提交&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">fetch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-p</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#或 git fetch -p origin</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">fetch</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-p</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#或 git fetch -p origin</span></span></code></pre></div><p><code>git fetch -p</code> （或者 <code>--prune</code>）命令用于从远程仓库中拉取最新的提交记录，同时也会删除 <em>本地不存在的远程分支</em>；不会更新本地分支和远程分支之间的关联关系，需要手动执行 <code>git merge</code> 或 <code>git rebase</code> 命令，或者使用 <code>git pull</code> 命令。例：删除远程 <code>dev</code>分支后，使用此命令，本地的远程分支也会被清理。</p><p><code>git fetch</code> 命令用于将远程仓库中的最新提交记录拉取到本地仓库中，但是不会自动合并（merge）这些提交；不会删除本地不存在的远程分支，可能会导致本地分支列表过长，不便于管理。</p><h2 id="删除远程分支" tabindex="-1">删除远程分支 <a class="header-anchor" href="#删除远程分支" aria-label="Permalink to &quot;删除远程分支&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">branch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">branch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-r</span><span style="color:#DBD7CAEE;"> 	     </span><span style="color:#758575DD;">#列出所有本地/远程分支</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">branch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">分支名</span><span style="color:#DBD7CAEE;">              </span><span style="color:#758575DD;">#删除本地库分支</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">origin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--delete</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">分支名</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#删除远程库分支</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">branch</span><span style="color:#393A34;"> </span><span style="color:#B56959;">/</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">branch</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-r</span><span style="color:#393A34;"> 	     </span><span style="color:#A0ADA0;">#列出所有本地/远程分支</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">branch</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span><span style="color:#393A34;"> </span><span style="color:#B56959;">分支名</span><span style="color:#393A34;">              </span><span style="color:#A0ADA0;">#删除本地库分支</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span><span style="color:#393A34;"> </span><span style="color:#B56959;">origin</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--delete</span><span style="color:#393A34;"> </span><span style="color:#B56959;">分支名</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#删除远程库分支</span></span></code></pre></div><h2 id="删除tag" tabindex="-1">删除Tag <a class="header-anchor" href="#删除tag" aria-label="Permalink to &quot;删除Tag&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-l</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">#列出所有本地/远程tag</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag名</span><span style="color:#DBD7CAEE;">                 </span><span style="color:#758575DD;">#删除本地库tag</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">origin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--delete</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag名</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#删除远程库tag</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-l</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">xargs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">tag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-d</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#删除本地所有 tag</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-l</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">#列出所有本地/远程tag</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag名</span><span style="color:#393A34;">                 </span><span style="color:#A0ADA0;">#删除本地库tag</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span><span style="color:#393A34;"> </span><span style="color:#B56959;">origin</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--delete</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag名</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#删除远程库tag</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-l</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">xargs</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">tag</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-d</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#删除本地所有 tag</span></span></code></pre></div><h2 id="删除远程文件" tabindex="-1">删除远程文件 <a class="header-anchor" href="#删除远程文件" aria-label="Permalink to &quot;删除远程文件&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-r</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--cached</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">文件/文件夹名称</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#预览要删除的文件列表</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-r</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--cached</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">文件/文件夹名称</span><span style="color:#DBD7CAEE;">      </span><span style="color:#758575DD;">#确定无误后删除文件</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-r</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-n</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--cached</span><span style="color:#393A34;"> </span><span style="color:#B56959;">文件/文件夹名称</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#预览要删除的文件列表</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rm</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-r</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--cached</span><span style="color:#393A34;"> </span><span style="color:#B56959;">文件/文件夹名称</span><span style="color:#393A34;">      </span><span style="color:#A0ADA0;">#确定无误后删除文件</span></span></code></pre></div><h2 id="fork后的仓库-拉取合并原仓库的更新" tabindex="-1">fork后的仓库，拉取合并原仓库的更新 <a class="header-anchor" href="#fork后的仓库-拉取合并原仓库的更新" aria-label="Permalink to &quot;fork后的仓库，拉取合并原仓库的更新&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">remote</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">upstream</span><span style="color:#DBD7CAEE;"> [原仓库URL] </span><span style="color:#758575DD;">#添加上游分支路径</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">upstream</span><span style="color:#DBD7CAEE;"> [分支名]  				</span><span style="color:#758575DD;">#拉取上游分支更新并合并</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">remote</span><span style="color:#393A34;"> </span><span style="color:#B56959;">add</span><span style="color:#393A34;"> </span><span style="color:#B56959;">upstream</span><span style="color:#393A34;"> [原仓库URL] </span><span style="color:#A0ADA0;">#添加上游分支路径</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull</span><span style="color:#393A34;"> </span><span style="color:#B56959;">upstream</span><span style="color:#393A34;"> [分支名]  				</span><span style="color:#A0ADA0;">#拉取上游分支更新并合并</span></span></code></pre></div><h2 id="合并多次提交" tabindex="-1">合并多次提交 <a class="header-anchor" href="#合并多次提交" aria-label="Permalink to &quot;合并多次提交&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">HEAD~3</span><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">#合并最近的 3 次提交，并开启交互模式</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&lt;</span><span style="color:#C98A7D;">commit_sh</span><span style="color:#DBD7CAEE;">a</span><span style="color:#CB7676;">&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#开启交互模式</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-i</span><span style="color:#393A34;"> </span><span style="color:#B56959;">HEAD~3</span><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">#合并最近的 3 次提交，并开启交互模式</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&lt;</span><span style="color:#B56959;">commit_sh</span><span style="color:#393A34;">a</span><span style="color:#AB5959;">&gt;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#开启交互模式</span></span></code></pre></div><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8</span><span style="color:#C98A7D;">fc6389</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#填第2 次提交的 hash，则表示合并 2 之后（3和 4）的提交</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-i</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8</span><span style="color:#B56959;">fc6389</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#填第2 次提交的 hash，则表示合并 2 之后（3和 4）的提交</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302272058564.png" alt="image-20230227205854474"></p><p>把需要压缩的提交 <code>pick </code> 改为 <code>s</code>，必须保留一个 <code>pick</code>，下一步填写合并提交信息，保存退出(<code>:wq</code>)完成合并</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302271055952.png" alt="image-20230227105523929"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302272059457.png" alt="image-20230227205916425"></p><h2 id="关联多个代码托管平台" tabindex="-1">关联多个代码托管平台 <a class="header-anchor" href="#关联多个代码托管平台" aria-label="Permalink to &quot;关联多个代码托管平台&quot;">​</a></h2><blockquote><p>当本地仓库项同时关联 github 和 gitee，同步更新两边代码</p></blockquote><ol><li><strong>方法一</strong> <code> git remote add gitee [gitee_repo_url]</code>，需要多次推送</li></ol><p>效果：</p><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">branch </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">master</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">remote</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">origin</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">merge</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">refs/heads/master</span></span>
+<span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">remote </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">origin</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@github.com:fxzer/juejin-server-mysql.git</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">fetch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">+refs/heads/</span><span style="color:#C99076;">*</span><span style="color:#C98A7D;">:refs/remotes/origin/</span><span style="color:#C99076;">*</span></span>
+<span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">remote </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">gitee</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@gitee.com:fxzer/juejin-server-mysql.git</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">fetch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">+refs/heads/</span><span style="color:#C99076;">*</span><span style="color:#C98A7D;">:refs/remotes/gitee/</span><span style="color:#C99076;">*</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">branch </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">master</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">remote</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">origin</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">merge</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">refs/heads/master</span></span>
+<span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">remote </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">origin</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">url</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@github.com:fxzer/juejin-server-mysql.git</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">fetch</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">+refs/heads/</span><span style="color:#A65E2B;">*</span><span style="color:#B56959;">:refs/remotes/origin/</span><span style="color:#A65E2B;">*</span></span>
+<span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">remote </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">gitee</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">url</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@gitee.com:fxzer/juejin-server-mysql.git</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">fetch</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">+refs/heads/</span><span style="color:#A65E2B;">*</span><span style="color:#B56959;">:refs/remotes/gitee/</span><span style="color:#A65E2B;">*</span></span></code></pre></div><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#git remote -v                                                   </span></span>
+<span class="line"><span style="color:#80A665;">gitee</span><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D;">git@gitee.com:fxzer/juejin-server-mysql.git</span><span style="color:#DBD7CAEE;"> (fetch)</span></span>
+<span class="line"><span style="color:#80A665;">gitee</span><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D;">git@gitee.com:fxzer/juejin-server-mysql.git</span><span style="color:#DBD7CAEE;"> (push)</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@github.com:fxzer/juejin-server-mysql.git</span><span style="color:#DBD7CAEE;"> (fetch)</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@github.com:fxzer/juejin-server-mysql.git</span><span style="color:#DBD7CAEE;"> (push)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#git remote -v                                                   </span></span>
+<span class="line"><span style="color:#59873A;">gitee</span><span style="color:#393A34;">   </span><span style="color:#B56959;">git@gitee.com:fxzer/juejin-server-mysql.git</span><span style="color:#393A34;"> (fetch)</span></span>
+<span class="line"><span style="color:#59873A;">gitee</span><span style="color:#393A34;">   </span><span style="color:#B56959;">git@gitee.com:fxzer/juejin-server-mysql.git</span><span style="color:#393A34;"> (push)</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@github.com:fxzer/juejin-server-mysql.git</span><span style="color:#393A34;"> (fetch)</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@github.com:fxzer/juejin-server-mysql.git</span><span style="color:#393A34;"> (push)</span></span></code></pre></div><ol start="2"><li><strong>方法二</strong> <code>git remote set-url --add origin [gitee_repo_url]</code> , 只需一次推送</li></ol><p>效果：~</p><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">remote </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">origin</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@github.com:fxzer/json-viewer.git</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">fetch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">+refs/heads/</span><span style="color:#C99076;">*</span><span style="color:#C98A7D;">:refs/remotes/origin/</span><span style="color:#C99076;">*</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">url</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@gitee.com:fxzer/json-viewer.git</span></span>
+<span class="line"><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">branch </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">master</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">remote</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">origin</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">merge</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">refs/heads/master</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">remote </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">origin</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">url</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@github.com:fxzer/json-viewer.git</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">fetch</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">+refs/heads/</span><span style="color:#A65E2B;">*</span><span style="color:#B56959;">:refs/remotes/origin/</span><span style="color:#A65E2B;">*</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">url</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@gitee.com:fxzer/json-viewer.git</span></span>
+<span class="line"><span style="color:#999999;">[</span><span style="color:#393A34;">branch </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">master</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">remote</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">origin</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">merge</span><span style="color:#393A34;"> </span><span style="color:#B56959;">=</span><span style="color:#393A34;"> </span><span style="color:#B56959;">refs/heads/master</span></span></code></pre></div><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#git remote -v</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@github.com:fxzer/json-viewer.git</span><span style="color:#DBD7CAEE;"> (fetch)</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@github.com:fxzer/json-viewer.git</span><span style="color:#DBD7CAEE;"> (push)</span></span>
+<span class="line"><span style="color:#80A665;">origin</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">git@gitee.com:fxzer/json-viewer.git</span><span style="color:#DBD7CAEE;"> (push)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#git remote -v</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@github.com:fxzer/json-viewer.git</span><span style="color:#393A34;"> (fetch)</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@github.com:fxzer/json-viewer.git</span><span style="color:#393A34;"> (push)</span></span>
+<span class="line"><span style="color:#59873A;">origin</span><span style="color:#393A34;">  </span><span style="color:#B56959;">git@gitee.com:fxzer/json-viewer.git</span><span style="color:#393A34;"> (push)</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title"><code>git remote add</code> 和 <code>git remote set-url --add</code>区别</p><ul><li>git remote add 用于添加一个新的远程仓库。该本地仓库已关联远程库，希望添加新的远程库。**运用：**fork后的仓库，需要拉取合并原仓库的更新。</li><li>git remote set-url --add 用于向已经存在的远程仓库中添加一个新的 URL。**运用：**同一个仓库关联 github 和 gitee 方便同时更新。</li><li>git remote set-url 命令会替换掉原有的链接，git remote set-url --add 命令，则是添加一个标识对应的远程库链接。</li></ul></div><h2 id="改错分支但为未提交" tabindex="-1">改错分支但为未提交 <a class="header-anchor" href="#改错分支但为未提交" aria-label="Permalink to &quot;改错分支但为未提交&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">stash</span><span style="color:#DBD7CAEE;">            </span><span style="color:#758575DD;">#暂存更改到stash</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">checkout</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">分支名</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">#切换分支</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">stash</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pop</span><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">#从stash中取出暂存的代码修改</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">stash</span><span style="color:#393A34;">            </span><span style="color:#A0ADA0;">#暂存更改到stash</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">checkout</span><span style="color:#393A34;"> </span><span style="color:#B56959;">分支名</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">#切换分支</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">stash</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pop</span><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">#从stash中取出暂存的代码修改</span></span></code></pre></div><h2 id="提交完未推送前-需要再次提交" tabindex="-1">提交完未推送前，需要再次提交 <a class="header-anchor" href="#提交完未推送前-需要再次提交" aria-label="Permalink to &quot;提交完未推送前，需要再次提交&quot;">​</a></h2><ul><li>提交完未推送前，发现代码有的有点小问题，还需要修改再提交，但是不想新增垃圾提交信息，保持简洁。</li><li>只需要修改提交的内容而不需要改变提交信息， 可以使用 --no-edit 参数来跳过编辑提交信息的步骤。</li></ul><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">commit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--amend</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--no-edit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;"># 做的修改合并到最近的提交中，相当于是在原有的提交上进行修改，而不是创建一个新的提交。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;"># 使用后在拉取代码会出现：位于分支 master</span></span>
+<span class="line"><span style="color:#758575DD;"># 您的分支和 &#39;origin/master&#39; 出现了偏离，</span></span>
+<span class="line"><span style="color:#758575DD;"># 并且分别有 1 和 1 处不同的提交。</span></span>
+<span class="line"><span style="color:#758575DD;">#   （使用 &quot;git pull&quot; 来合并远程分支）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">config</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull.rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;"># git pull前，需要执行此命令进行变基</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">commit</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--amend</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--no-edit</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;"># 做的修改合并到最近的提交中，相当于是在原有的提交上进行修改，而不是创建一个新的提交。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;"># 使用后在拉取代码会出现：位于分支 master</span></span>
+<span class="line"><span style="color:#A0ADA0;"># 您的分支和 &#39;origin/master&#39; 出现了偏离，</span></span>
+<span class="line"><span style="color:#A0ADA0;"># 并且分别有 1 和 1 处不同的提交。</span></span>
+<span class="line"><span style="color:#A0ADA0;">#   （使用 &quot;git pull&quot; 来合并远程分支）</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">config</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull.rebase</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;"># git pull前，需要执行此命令进行变基</span></span></code></pre></div><h2 id="修改第一次提交信息" tabindex="-1">修改第一次提交信息 <a class="header-anchor" href="#修改第一次提交信息" aria-label="Permalink to &quot;修改第一次提交信息&quot;">​</a></h2><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--root</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#把第一次提交的 pick 改为 edit 后 e</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--continue</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull.rebase</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pull</span></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-i</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--root</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#把第一次提交的 pick 改为 edit 后 e</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--continue</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rebase</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull.rebase</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pull</span></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span></span></code></pre></div><h2 id="代码提交到了错误的分支" tabindex="-1">代码提交到了错误的分支 <a class="header-anchor" href="#代码提交到了错误的分支" aria-label="Permalink to &quot;代码提交到了错误的分支&quot;">​</a></h2><h3 id="方法一" tabindex="-1">方法一 <a class="header-anchor" href="#方法一" aria-label="Permalink to &quot;方法一&quot;">​</a></h3><p>切换到正确的分支并使用， 将指定的提交复制到当前分支，并将其添加到暂存区</p><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">cherry-pick</span><span style="color:#DBD7CAEE;"> [commit]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">cherry-pick</span><span style="color:#393A34;"> [commit]</span></span></code></pre></div><h3 id="方法二" tabindex="-1">方法二 <a class="header-anchor" href="#方法二" aria-label="Permalink to &quot;方法二&quot;">​</a></h3><p>使用 <code>git rebase</code> 命令将提交移动到正确的分支上：</p><ol><li>切换到错误分支上：<code>git checkout [error-branch]</code></li><li>将错误分支上的提交移动到正确分支上：<code>git rebase [correct-branch]</code></li><li>解决冲突（如果有）</li><li>将更改提交到正确的分支上：<code>git checkout [correct-branch]</code>，然后 <code>git merge [error-branch]</code></li><li>在错误分支<code>git push -f</code>更新远程代码</li></ol><h2 id="git-提交规范化" tabindex="-1">Git 提交规范化 <a class="header-anchor" href="#git-提交规范化" aria-label="Permalink to &quot;Git 提交规范化&quot;">​</a></h2><ul><li><strong>husky</strong>: Git 钩子工具,在 Git 提交过程的不同阶段自动运行脚本，以此来实现对代码的验证、格式化、测试等操作</li><li><strong>@commitlint/cli</strong>: 提交信息校验脚手架</li><li><strong>@commitlint/config-conventional</strong>: 定义了 commitlint 默认使用的规范。</li><li><strong>commitizen</strong>: 交互式提交工具</li><li><strong>conventional-changelog</strong>: 规范提交信息、并自动生成变更日志</li><li><strong>cz-conventional-changelog</strong>: git cz 提交规范和 changelog 生成工具</li></ul><h3 id="husky-文档" tabindex="-1"><a href="https://typicode.github.io/husky" target="_blank" rel="noreferrer">husky</a> <a href="https://typicode.github.io/husky/getting-started.html" target="_blank" rel="noreferrer">文档</a> <a class="header-anchor" href="#husky-文档" aria-label="Permalink to &quot;[husky](https://typicode.github.io/husky) [文档](https://typicode.github.io/husky/getting-started.html)&quot;">​</a></h3><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;"># 安装</span></span>
+<span class="line"><span style="color:#80A665;">pnpm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">dlx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">husky-init</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">pnpm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span></span>
+<span class="line"><span style="color:#758575DD;"># 初始化husky配置，在根目录新增.husky配置文件。初始化配置pre-commit</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;"># 新增一个提交git commit 执行前的钩子（commit-msg）</span></span>
+<span class="line"><span style="color:#80A665;">npx</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">husky</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">.husky/commit-msg</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;"># 安装</span></span>
+<span class="line"><span style="color:#59873A;">pnpm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">dlx</span><span style="color:#393A34;"> </span><span style="color:#B56959;">husky-init</span><span style="color:#393A34;"> </span><span style="color:#999999;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">pnpm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span></span>
+<span class="line"><span style="color:#A0ADA0;"># 初始化husky配置，在根目录新增.husky配置文件。初始化配置pre-commit</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;"># 新增一个提交git commit 执行前的钩子（commit-msg）</span></span>
+<span class="line"><span style="color:#59873A;">npx</span><span style="color:#393A34;"> </span><span style="color:#B56959;">husky</span><span style="color:#393A34;"> </span><span style="color:#B56959;">add</span><span style="color:#393A34;"> </span><span style="color:#B56959;">.husky/commit-msg</span></span></code></pre></div><h4 id="注意-需要-git-init后才能初始化-否则报错如下" tabindex="-1">注意：需要 <code>git init</code>后才能初始化，否则报错如下 <a class="header-anchor" href="#注意-需要-git-init后才能初始化-否则报错如下" aria-label="Permalink to &quot;注意：需要 \`git init\`后才能初始化，否则报错如下&quot;">​</a></h4><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-06-27-20-25-35.png" alt="2023-06-27-20-25-35"></p><h3 id="commitlint-cli与-commitlint-config-conventional" tabindex="-1">@commitlint/cli与@commitlint/config-conventional <a class="header-anchor" href="#commitlint-cli与-commitlint-config-conventional" aria-label="Permalink to &quot;@commitlint/cli与@commitlint/config-conventional&quot;">​</a></h3><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#安装校验脚手架、校验规范</span></span>
+<span class="line"><span style="color:#80A665;">pnpm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">@commitlint/cli</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">@commitlint/config-conventional</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">#添加安装脚本呢</span></span>
+<span class="line"><span style="color:#80A665;">pnpm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">set-script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">&quot;prepare&quot;: &quot;husky install&quot;</span><span style="color:#C98A7D99;">&#39;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#安装校验脚手架、校验规范</span></span>
+<span class="line"><span style="color:#59873A;">pnpm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">i</span><span style="color:#393A34;"> </span><span style="color:#B56959;">@commitlint/cli</span><span style="color:#393A34;"> </span><span style="color:#B56959;">@commitlint/config-conventional</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">#添加安装脚本呢</span></span>
+<span class="line"><span style="color:#59873A;">pnpm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">set-script</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">&quot;prepare&quot;: &quot;husky install&quot;</span><span style="color:#B5695999;">&#39;</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//commitlint.config.js （若报错 type:&#39;module&#39;）可改：commitlint.config.js ==&gt; commitlint.config.cjs</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">extends</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@commitlint/config-conventional</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//commitlint.config.js （若报错 type:&#39;module&#39;）可改：commitlint.config.js ==&gt; commitlint.config.cjs</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">extends</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@commitlint/config-conventional</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div><h3 id="commitizen" tabindex="-1"><a href="http://commitizen.github.io/cz-cli/" target="_blank" rel="noreferrer">commitizen</a> <a class="header-anchor" href="#commitizen" aria-label="Permalink to &quot;[commitizen](http://commitizen.github.io/cz-cli/)&quot;">​</a></h3><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#全局安装</span></span>
+<span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">commitizen</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#全局安装</span></span>
+<span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-g</span><span style="color:#393A34;"> </span><span style="color:#B56959;">commitizen</span></span></code></pre></div><h3 id="cz-conventional-changelog" tabindex="-1">cz-conventional-changelog <a class="header-anchor" href="#cz-conventional-changelog" aria-label="Permalink to &quot;cz-conventional-changelog&quot;">​</a></h3><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#全局安装</span></span>
+<span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">cz-conventional-changelog</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#全局安装</span></span>
+<span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-g</span><span style="color:#393A34;"> </span><span style="color:#B56959;">cz-conventional-changelog</span></span></code></pre></div><p>配置 <code>~/.czrc</code>， 将其设置为 <code>commitizen</code> 的插件。</p><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">&quot;path&quot;</span><span style="color:#B8A965;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cz-conventional-changelog</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">&quot;path&quot;</span><span style="color:#998418;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cz-conventional-changelog</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">作用：提交代码并生成变更日志</p><p>使用 <code>commitizen</code> 提交代码时，会自动启动 <code>cz-conventional-changelog</code> 插件，</p><p>并根据 <code>conventional-commit</code> 规范提示用户输入提交信息。</p><p>输入完毕后，会自动将提交信息转换成符合规范的格式，并将其写入到 <code>CHANGELOG.md</code> 文件中。</p></div>`,61),e=[p];function t(c,r,i,y,A,D){return a(),n("div",null,e)}const h=s(o,[["render",t]]);export{g as __pageData,h as default};
diff --git "a/assets/FrontEnd_Git_Git\345\270\270\347\224\250\346\223\215\344\275\234.md.a0e87468.lean.js" "b/assets/FrontEnd_Git_Git\345\270\270\347\224\250\346\223\215\344\275\234.md.a0e87468.lean.js"
new file mode 100644
index 00000000..337c2011
--- /dev/null
+++ "b/assets/FrontEnd_Git_Git\345\270\270\347\224\250\346\223\215\344\275\234.md.a0e87468.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const g=JSON.parse('{"title":"Git常用操作","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/Git/Git常用操作.md","filePath":"FrontEnd/Git/Git常用操作.md"}'),o={name:"FrontEnd/Git/Git常用操作.md"},p=l("",61),e=[p];function t(c,r,i,y,A,D){return a(),n("div",null,e)}const h=s(o,[["render",t]]);export{g as __pageData,h as default};
diff --git "a/assets/FrontEnd_Git_Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md.6674896b.js" "b/assets/FrontEnd_Git_Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md.6674896b.js"
new file mode 100644
index 00000000..0989d963
--- /dev/null
+++ "b/assets/FrontEnd_Git_Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md.6674896b.js"
@@ -0,0 +1,29 @@
+import{_ as s,o as a,c as o,Q as n}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/Git/Terminal终端美化.md","filePath":"FrontEnd/Git/Terminal终端美化.md"}'),l={name:"FrontEnd/Git/Terminal终端美化.md"},p=n(`<h2 id="安装oh-my-posh" tabindex="-1">安装<a href="https://ohmyposh.dev/docs/installation/windows" target="_blank" rel="noreferrer">Oh My Posh</a> <a class="header-anchor" href="#安装oh-my-posh" aria-label="Permalink to &quot;安装[Oh My Posh](https://ohmyposh.dev/docs/installation/windows)&quot;">​</a></h2><blockquote><p>可以先去Microsofe Store 安装winget，会比较方便</p></blockquote><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">winget</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">install</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">JanDeDobbeleer.OhMyPosh</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">winget</span><span style="color:#393A34;"> </span><span style="color:#B56959;">install</span><span style="color:#393A34;"> </span><span style="color:#B56959;">JanDeDobbeleer.OhMyPosh</span></span></code></pre></div><p>安装完:</p><p>会在<code>C:\\Users\\自己用户名\\AppData\\Local\\Programs\\oh-my-posh\\themes&gt;</code>有很多主题</p><h2 id="预览所有主题命令" tabindex="-1">预览所有主题命令 <a class="header-anchor" href="#预览所有主题命令" aria-label="Permalink to &quot;预览所有主题命令&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">Get-PoshThemes</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">Get-PoshThemes</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426123111651.png" alt="image-20220426123111651"></p><h2 id="初始化并应用主题" tabindex="-1">初始化并应用主题 <a class="header-anchor" href="#初始化并应用主题" aria-label="Permalink to &quot;初始化并应用主题&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">oh-my-posh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--init</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--shell</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pwsh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--config</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">自己的安装目录\\oh-my-posh\\themes\\schema.json</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Invoke-Expression</span></span>
+<span class="line"><span style="color:#758575DD;">#schema.json ---- 选择themes目录下的一款主题文件</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">oh-my-posh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--init</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--shell</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pwsh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--config</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">自己的安装目录\\oh-my-posh\\themes\\schema.json</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Invoke-Expression</span></span>
+<span class="line"><span style="color:#A0ADA0;">#schema.json ---- 选择themes目录下的一款主题文件</span></span></code></pre></div><h2 id="分隔符乱码问题" tabindex="-1">分隔符乱码问题 <a class="header-anchor" href="#分隔符乱码问题" aria-label="Permalink to &quot;分隔符乱码问题&quot;">​</a></h2><blockquote><p>但会发现分隔符会有乱码的问题</p></blockquote><p><strong><a href="https://ohmyposh.dev/docs/configuration/fonts" target="_blank" rel="noreferrer">乱码问题解决方式</a></strong>:</p><p>安装<a href="https://www.nerdfonts.com/font-downloads" target="_blank" rel="noreferrer"><strong>Nerd Fonts</strong></a>字体，在<code>Terminal&gt;Power Shell</code>选择自己安装的字体，保存重启就生效啦。</p><p>PS：刚开始以为没有我常用的<code>JetBrain Mono</code>字体,就没在意这种解决方案,没想到里面字体挺丰富.</p><h2 id="配置powershell" tabindex="-1">配置PowerShell <a class="header-anchor" href="#配置powershell" aria-label="Permalink to &quot;配置PowerShell&quot;">​</a></h2><p>因为应用的主题只在当前窗口有效果，所以需要配置每次PowerShell启动时都会执行应用主题的脚本</p><h3 id="_1-打开配置文件方式一" tabindex="-1">1.打开配置文件方式一 <a class="header-anchor" href="#_1-打开配置文件方式一" aria-label="Permalink to &quot;1.打开配置文件方式一&quot;">​</a></h3><ul><li>获取到PowerShell配置文件绝对路径</li></ul><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">$PROFILE</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">$PROFILE</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426124525580.png" alt="image-20220426124525580"></p><ul><li>找到这个文件位置，打开并添加需要Power Shell启动时执行的脚本，保存文件重新打开Terminal看效果</li></ul><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">oh-my-posh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--init</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--shell</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">pwsh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">--config</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">自己的安装目录\\oh-my-posh\\themes\\schema.json</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Invoke-Expression</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">oh-my-posh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--init</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--shell</span><span style="color:#393A34;"> </span><span style="color:#B56959;">pwsh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">--config</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">自己的安装目录\\oh-my-posh\\themes\\schema.json</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Invoke-Expression</span></span></code></pre></div><h3 id="_2-打开配置文件方式二" tabindex="-1">2.打开配置文件方式二 <a class="header-anchor" href="#_2-打开配置文件方式二" aria-label="Permalink to &quot;2.打开配置文件方式二&quot;">​</a></h3><blockquote><p>如果安装了VS Code，如下命令可以直接打开Power Shell配置文件</p></blockquote><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">code</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$PROFILE</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">code</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$PROFILE</span></span></code></pre></div><h2 id="自定义主题" tabindex="-1">自定义主题 <a class="header-anchor" href="#自定义主题" aria-label="Permalink to &quot;自定义主题&quot;">​</a></h2><p>可借鉴的up主题文件：<a href="https://gitee.com/NilTor/public/blob/master/oh-my-posh-config.json" target="_blank" rel="noreferrer">https://gitee.com/NilTor/public/blob/master/oh-my-posh-config.json</a></p><p>更多配置可查看<a href="https://ohmyposh.dev/docs/configuration/overview" target="_blank" rel="noreferrer">官网配置文档</a></p><h2 id="vs-code终端配置" tabindex="-1">VS Code终端配置 <a class="header-anchor" href="#vs-code终端配置" aria-label="Permalink to &quot;VS Code终端配置&quot;">​</a></h2><p>没有配置打开VS Code终端报错:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">The</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">term</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">oh-my-posh</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">is</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">not</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">recognized</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">cmdlet,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">function,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">file,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">or</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">executable</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">program.</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Check</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">spelling</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">name,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">or</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">was</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">included,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">verify</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">that</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">is</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">correct</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">and</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">again.</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">The</span><span style="color:#393A34;"> </span><span style="color:#B56959;">term</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">oh-my-posh</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#B56959;">is</span><span style="color:#393A34;"> </span><span style="color:#B56959;">not</span><span style="color:#393A34;"> </span><span style="color:#B56959;">recognized</span><span style="color:#393A34;"> </span><span style="color:#B56959;">as</span><span style="color:#393A34;"> </span><span style="color:#B56959;">a</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name</span><span style="color:#393A34;"> </span><span style="color:#B56959;">of</span><span style="color:#393A34;"> </span><span style="color:#B56959;">a</span><span style="color:#393A34;"> </span><span style="color:#B56959;">cmdlet,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">function,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">script</span><span style="color:#393A34;"> </span><span style="color:#B56959;">file,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">or</span><span style="color:#393A34;"> </span><span style="color:#B56959;">executable</span><span style="color:#393A34;"> </span><span style="color:#B56959;">program.</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Check</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">spelling</span><span style="color:#393A34;"> </span><span style="color:#B56959;">of</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">name,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">or</span><span style="color:#393A34;"> </span><span style="color:#B56959;">if</span><span style="color:#393A34;"> </span><span style="color:#B56959;">a</span><span style="color:#393A34;"> </span><span style="color:#B56959;">path</span><span style="color:#393A34;"> </span><span style="color:#B56959;">was</span><span style="color:#393A34;"> </span><span style="color:#B56959;">included,</span><span style="color:#393A34;"> </span><span style="color:#B56959;">verify</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">|</span><span style="color:#393A34;"> </span><span style="color:#59873A;">that</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">path</span><span style="color:#393A34;"> </span><span style="color:#B56959;">is</span><span style="color:#393A34;"> </span><span style="color:#B56959;">correct</span><span style="color:#393A34;"> </span><span style="color:#B56959;">and</span><span style="color:#393A34;"> </span><span style="color:#B56959;">try</span><span style="color:#393A34;"> </span><span style="color:#B56959;">again.</span></span></code></pre></div><ul><li>在环境变量新增Oh My Posh路径下bin目录</li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426141214178.png" alt="image-20220426141214178"></p><ul><li>在设置中配置配置自己安装的<strong>Nerd Font</strong>终端字体，（这里我填上我安装的是<code>JetBrainsMono Nerd Font Mono</code>)</li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426141358102.png" alt="image-20220426141358102"></p><h2 id="隐藏提示语" tabindex="-1">隐藏提示语 <a class="header-anchor" href="#隐藏提示语" aria-label="Permalink to &quot;隐藏提示语&quot;">​</a></h2><p>每次打开都会有这四句提示语，想要打开是干干净净的界面。</p><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426233405476.png" alt="image-20220426233405476"></p><p>在PowerShell配置项中添加一个配置 ，配置参数<code> -NoLogo</code>为隐藏提示语</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">commandline</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">自己的pwsh.exe的路径 -NoLogo</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">,</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">commandline</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">自己的pwsh.exe的路径 -NoLogo</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">,</span></span></code></pre></div><p><strong>完整配置参考</strong></p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">colorScheme</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Campbell</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">font</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">face</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">JetBrainsMono Nerd Font Mono</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">guid</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{574e775e-4f2a-5b96-ac1e-a2962a402336}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">hidden</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">PowerShell</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">source</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Windows.Terminal.PowershellCore</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">commandline</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">C:</span><span style="color:#C99076;">\\\\</span><span style="color:#C98A7D;">Program Files</span><span style="color:#C99076;">\\\\</span><span style="color:#C98A7D;">WindowsApps</span><span style="color:#C99076;">\\\\</span><span style="color:#C98A7D;">Microsoft.PowerShell_7.2.2.0_x64__8wekyb3d8bbwe</span><span style="color:#C99076;">\\\\</span><span style="color:#C98A7D;">pwsh.exe -NoLogo</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">startingDirectory</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">null</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">colorScheme</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Campbell</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">font</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">face</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">JetBrainsMono Nerd Font Mono</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">guid</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{574e775e-4f2a-5b96-ac1e-a2962a402336}</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">hidden</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">PowerShell</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">source</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Windows.Terminal.PowershellCore</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">commandline</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">C:</span><span style="color:#A65E2B;">\\\\</span><span style="color:#B56959;">Program Files</span><span style="color:#A65E2B;">\\\\</span><span style="color:#B56959;">WindowsApps</span><span style="color:#A65E2B;">\\\\</span><span style="color:#B56959;">Microsoft.PowerShell_7.2.2.0_x64__8wekyb3d8bbwe</span><span style="color:#A65E2B;">\\\\</span><span style="color:#B56959;">pwsh.exe -NoLogo</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">startingDirectory</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">null</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220426233614912.png" alt="image-20220426233614912"></p>`,44),e=[p];function t(c,r,y,i,A,D){return a(),o("div",null,e)}const d=s(l,[["render",t]]);export{C as __pageData,d as default};
diff --git "a/assets/FrontEnd_Git_Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md.6674896b.lean.js" "b/assets/FrontEnd_Git_Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md.6674896b.lean.js"
new file mode 100644
index 00000000..d530224d
--- /dev/null
+++ "b/assets/FrontEnd_Git_Terminal\347\273\210\347\253\257\347\276\216\345\214\226.md.6674896b.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as o,Q as n}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/Git/Terminal终端美化.md","filePath":"FrontEnd/Git/Terminal终端美化.md"}'),l={name:"FrontEnd/Git/Terminal终端美化.md"},p=n("",44),e=[p];function t(c,r,y,i,A,D){return a(),o("div",null,e)}const d=s(l,[["render",t]]);export{C as __pageData,d as default};
diff --git "a/assets/FrontEnd_Git_\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md.49289c60.js" "b/assets/FrontEnd_Git_\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md.49289c60.js"
new file mode 100644
index 00000000..6a416839
--- /dev/null
+++ "b/assets/FrontEnd_Git_\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md.49289c60.js"
@@ -0,0 +1,37 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const h=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/Git/配置多个平台SSH.md","filePath":"FrontEnd/Git/配置多个平台SSH.md"}'),o={name:"FrontEnd/Git/配置多个平台SSH.md"},p=l(`<h2 id="_1-生成公钥和私钥" tabindex="-1">1.生成公钥和私钥 <a class="header-anchor" href="#_1-生成公钥和私钥" aria-label="Permalink to &quot;1.生成公钥和私钥&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ssh-keygen</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-t</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rsa</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-C</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">8888888@qq.com</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#换成自己邮箱,可以随便填,相当于一个标识</span></span>
+<span class="line"><span style="color:#758575DD;">#密码不用填 直接回车</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ssh-keygen</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-t</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rsa</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-C</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">8888888@qq.com</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#换成自己邮箱,可以随便填,相当于一个标识</span></span>
+<span class="line"><span style="color:#A0ADA0;">#密码不用填 直接回车</span></span></code></pre></div><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220416211353115.png" alt="image-20220416211353115"></p><blockquote><p><code>ls</code> 查看生成的文件</p></blockquote><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220416211808297.png" alt="image-20220416211808297"></p><h2 id="_2-在代码托管平台设置添加公钥" tabindex="-1">2.在代码托管平台设置添加公钥 <a class="header-anchor" href="#_2-在代码托管平台设置添加公钥" aria-label="Permalink to &quot;2.在代码托管平台设置添加公钥&quot;">​</a></h2><ul><li><strong>查看生成的公钥<code>.pub</code>文件 例如: <code>cat id_rsa_github_gmail.pub</code></strong></li><li><strong>复制公钥所有内容 ，在github/gitee/gitlab添加</strong></li></ul><p><img src="https://vnote-bucket.oss-cn-shanghai.aliyuncs.com/image-20220416212417100.png" alt="image-20220416212417100"></p><h2 id="_3-添加私钥到ssh-agent中" tabindex="-1">3.添加私钥到ssh-agent中 <a class="header-anchor" href="#_3-添加私钥到ssh-agent中" aria-label="Permalink to &quot;3.添加私钥到ssh-agent中&quot;">​</a></h2><p><strong>添加私钥到ssh-agent中 ，出现<code>Identity added</code>表示成功</strong></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ssh-add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">~/.ssh/id_rsa_github_qq</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ssh-add</span><span style="color:#393A34;"> </span><span style="color:#B56959;">~/.ssh/id_rsa_github_qq</span></span></code></pre></div><ol><li>若提示 <code>Could not open a connection to your authentication agent</code></li></ol><p>​ 先执行<code>ssh-agent bash</code> 再执行上面代码</p><ol start="2"><li>报错: <code>Error connecting to agent: No such file or directory</code></li></ol><p>​ 解决方法：检查文件是否存在，并【<strong>以管理员身份运行</strong>】在 <code>PowerShell</code> 执行</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">Set-Service</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ssh-agent</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-StartupType</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Manual</span></span>
+<span class="line"><span style="color:#80A665;">Start-Service</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ssh-agent</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">Set-Service</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ssh-agent</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-StartupType</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Manual</span></span>
+<span class="line"><span style="color:#59873A;">Start-Service</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ssh-agent</span></span></code></pre></div><ol start="3"><li>报错 <code>unable to start ssh-agent service, error :1058</code></li></ol><p>​ 以【<strong>管理员身份</strong>】打开终端，执行<code>Set-Service -Name ssh-agent -StartupType automatic</code></p><ul><li><strong>查看私钥列表</strong></li></ul><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ssh-add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-l</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ssh-add</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-l</span></span></code></pre></div><p><strong>出现此提示表示未配置成功，重新检查步骤配置</strong></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">git@github.com:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Permission</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">denied</span><span style="color:#DBD7CAEE;"> (publickey).</span></span>
+<span class="line"><span style="color:#80A665;">fatal:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Could</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">not</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">read</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">remote</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">repository.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">Please</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">make</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">sure</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">you</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">have</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">correct</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">access</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">rights</span></span>
+<span class="line"><span style="color:#80A665;">and</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">the</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">repository</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">exists.</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">git@github.com:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Permission</span><span style="color:#393A34;"> </span><span style="color:#B56959;">denied</span><span style="color:#393A34;"> (publickey).</span></span>
+<span class="line"><span style="color:#59873A;">fatal:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Could</span><span style="color:#393A34;"> </span><span style="color:#B56959;">not</span><span style="color:#393A34;"> </span><span style="color:#B56959;">read</span><span style="color:#393A34;"> </span><span style="color:#B56959;">from</span><span style="color:#393A34;"> </span><span style="color:#B56959;">remote</span><span style="color:#393A34;"> </span><span style="color:#B56959;">repository.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">Please</span><span style="color:#393A34;"> </span><span style="color:#B56959;">make</span><span style="color:#393A34;"> </span><span style="color:#B56959;">sure</span><span style="color:#393A34;"> </span><span style="color:#B56959;">you</span><span style="color:#393A34;"> </span><span style="color:#B56959;">have</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">correct</span><span style="color:#393A34;"> </span><span style="color:#B56959;">access</span><span style="color:#393A34;"> </span><span style="color:#B56959;">rights</span></span>
+<span class="line"><span style="color:#59873A;">and</span><span style="color:#393A34;"> </span><span style="color:#B56959;">the</span><span style="color:#393A34;"> </span><span style="color:#B56959;">repository</span><span style="color:#393A34;"> </span><span style="color:#B56959;">exists.</span></span></code></pre></div><h2 id="_4-创建config件-打开编辑" tabindex="-1">4.创建<code>config</code>件，打开编辑 <a class="header-anchor" href="#_4-创建config件-打开编辑" aria-label="Permalink to &quot;4.创建\`config\`件，打开编辑&quot;">​</a></h2><blockquote><p>注意：文件名就是<code>config</code>，没有文件后缀，编辑完保存前记得去掉注释</p></blockquote><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">Host</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">github.com</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#github主机地址</span></span>
+<span class="line"><span style="color:#80A665;">HostName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">github.com</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#github主机名</span></span>
+<span class="line"><span style="color:#80A665;">PreferredAuthentications</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">publickey</span></span>
+<span class="line"><span style="color:#80A665;">IdentityFile</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">~/.ssh/id_rsa_github</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#私钥地址</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">Host</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">gitlab.xxx.cn</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">#公司gitlab主机地址</span></span>
+<span class="line"><span style="color:#80A665;">HostName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">gitlab.xxx.cn</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">#gitlab主机名</span></span>
+<span class="line"><span style="color:#80A665;">PreferredAuthentications</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">publickey</span></span>
+<span class="line"><span style="color:#80A665;">IdentityFile</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">~/.ssh/id_rsa_gitlab</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">#私钥地址</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">Host</span><span style="color:#393A34;"> </span><span style="color:#B56959;">github.com</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#github主机地址</span></span>
+<span class="line"><span style="color:#59873A;">HostName</span><span style="color:#393A34;"> </span><span style="color:#B56959;">github.com</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#github主机名</span></span>
+<span class="line"><span style="color:#59873A;">PreferredAuthentications</span><span style="color:#393A34;"> </span><span style="color:#B56959;">publickey</span></span>
+<span class="line"><span style="color:#59873A;">IdentityFile</span><span style="color:#393A34;"> </span><span style="color:#B56959;">~/.ssh/id_rsa_github</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#私钥地址</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">Host</span><span style="color:#393A34;"> </span><span style="color:#B56959;">gitlab.xxx.cn</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">#公司gitlab主机地址</span></span>
+<span class="line"><span style="color:#59873A;">HostName</span><span style="color:#393A34;"> </span><span style="color:#B56959;">gitlab.xxx.cn</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">#gitlab主机名</span></span>
+<span class="line"><span style="color:#59873A;">PreferredAuthentications</span><span style="color:#393A34;"> </span><span style="color:#B56959;">publickey</span></span>
+<span class="line"><span style="color:#59873A;">IdentityFile</span><span style="color:#393A34;"> </span><span style="color:#B56959;">~/.ssh/id_rsa_gitlab</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">#私钥地址</span></span></code></pre></div><ul><li><p>测试连接是否成功，显示出这句话表示成功啦，可以看到自己账户名</p><p><code>Hi CoderFXJ! You&#39;ve successfully authenticated, but GitHub does not provide shell access.</code></p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">ssh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@gitee.com</span></span>
+<span class="line"><span style="color:#758575DD;">#或</span></span>
+<span class="line"><span style="color:#80A665;">ssh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@github.com</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">ssh</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@gitlab.xxx.cn</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">ssh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-T</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@gitee.com</span></span>
+<span class="line"><span style="color:#A0ADA0;">#或</span></span>
+<span class="line"><span style="color:#59873A;">ssh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-T</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@github.com</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">ssh</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-T</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@gitlab.xxx.cn</span></span></code></pre></div></li></ul><h2 id="ssh公钥私钥加密解密原理" tabindex="-1">SSH公钥私钥加密解密原理 <a class="header-anchor" href="#ssh公钥私钥加密解密原理" aria-label="Permalink to &quot;SSH公钥私钥加密解密原理&quot;">​</a></h2>`,27),e=[p];function t(c,r,i,y,A,d){return a(),n("div",null,e)}const g=s(o,[["render",t]]);export{h as __pageData,g as default};
diff --git "a/assets/FrontEnd_Git_\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md.49289c60.lean.js" "b/assets/FrontEnd_Git_\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md.49289c60.lean.js"
new file mode 100644
index 00000000..e7647d80
--- /dev/null
+++ "b/assets/FrontEnd_Git_\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.md.49289c60.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const h=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/Git/配置多个平台SSH.md","filePath":"FrontEnd/Git/配置多个平台SSH.md"}'),o={name:"FrontEnd/Git/配置多个平台SSH.md"},p=l("",27),e=[p];function t(c,r,i,y,A,d){return a(),n("div",null,e)}const g=s(o,[["render",t]]);export{h as __pageData,g as default};
diff --git "a/assets/FrontEnd_JavaScript_async\344\270\216await.md.d21c9cb0.js" "b/assets/FrontEnd_JavaScript_async\344\270\216await.md.d21c9cb0.js"
new file mode 100644
index 00000000..687154e0
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_async\344\270\216await.md.d21c9cb0.js"
@@ -0,0 +1,197 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"Javascript实现异步","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/async与await.md","filePath":"FrontEnd/JavaScript/async与await.md"}'),p={name:"FrontEnd/JavaScript/async与await.md"},o=l(`<h1 id="javascript实现异步" tabindex="-1">Javascript实现异步 <a class="header-anchor" href="#javascript实现异步" aria-label="Permalink to &quot;Javascript实现异步&quot;">​</a></h1><div class="info custom-block"><p class="custom-block-title">INFO</p><p>Javascript是单线程执行语言</p></div><h3 id="方式一-回调函数" tabindex="-1">方式一：回调函数 <a class="header-anchor" href="#方式一-回调函数" aria-label="Permalink to &quot;方式一：回调函数&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">3秒后打印的</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">},</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">比setTimeout回调函数先执行</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//本身会立刻返回，然后执行后面同步代码，回调函数则等预定时间才执行</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">3秒后打印的</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">},</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">比setTimeout回调函数先执行</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//本身会立刻返回，然后执行后面同步代码，回调函数则等预定时间才执行</span></span></code></pre></div><p>缺点：容易形成回调地狱</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">3秒后打印的</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()=&gt;{</span><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">6秒后打印的</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">()=&gt;{</span><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">               </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">9秒后打印的</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">},</span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">3秒后打印的</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()=&gt;{</span><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">6秒后打印的</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">       </span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">()=&gt;{</span><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">               </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">9秒后打印的</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#999999;">},</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">},</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">},</span><span style="color:#2F798A;">3000</span><span style="color:#999999;">)</span></span></code></pre></div><h3 id="方式二-promise" tabindex="-1">方式二：Promise <a class="header-anchor" href="#方式二-promise" aria-label="Permalink to &quot;方式二：Promise&quot;">​</a></h3><p>声名Promise</p><blockquote><p>new Promise(function(resolve, reject){ })</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">success</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 成功执行</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//走then</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">finally</span><span style="color:#666666;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//无论成功失败，都会执行的回调</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//做一些清理工作，如关闭加载动画</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fail</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 失败执行</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//走catch</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">success</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 成功执行</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//走then</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">finally</span><span style="color:#999999;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//无论成功失败，都会执行的回调</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//做一些清理工作，如关闭加载动画</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fail</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 失败执行</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//走catch</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p>如果想终止在某个执行链的位置，可以用<strong>Promise.reject(new Error())</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">   </span><span style="color:#758575DD;">// return result + 1</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#666666;">}).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;">  </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">   </span><span style="color:#A0ADA0;">// return result + 1</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#999999;">}).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="语法糖-async-await" tabindex="-1">语法糖：async /await <a class="header-anchor" href="#语法糖-async-await" aria-label="Permalink to &quot;语法糖：async /await&quot;">​</a></h3><blockquote><p><strong>await</strong> 表示强制等待的意思，<strong>await</strong>关键字的后面要跟一个promise对象，它总是等到该promise对象resolve成功之后执行，并且会返回resolve的结果</p></blockquote><blockquote><p>async标记该函数就是一个异步函数，不会阻塞其他执行逻辑的执行，被async标记的函数返回也是promise对象</p></blockquote><blockquote><p>（<strong>async 和 await必须成对出现，不能用在普通函数上</strong>）</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn1</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fn1执行结果</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">5000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#80A665;">fn2</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">fn1</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//async的函数并不会阻塞后续同步代码执行</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fn2执行</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//先执行</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn1</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">){</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fn1执行结果</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#2F798A;">5000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#59873A;">fn2</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">fn1</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//async的函数并不会阻塞后续同步代码执行</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fn2执行</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//先执行</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="实现fn1先执行" tabindex="-1">实现fn1先执行 <a class="header-anchor" href="#实现fn1先执行" aria-label="Permalink to &quot;实现fn1先执行&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn2</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">fn1</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fn2执行</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn2</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">fn1</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fn2执行</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span></code></pre></div><h4 id="捕获异常" tabindex="-1">捕获异常 <a class="header-anchor" href="#捕获异常" aria-label="Permalink to &quot;捕获异常&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">getCatch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 通过 try/catch捕获异常</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">失败</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">log1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">log2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">getCatch</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 通过 try/catch捕获异常</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">失败</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">log1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">log2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span></code></pre></div><h4 id="使用陷阱" tabindex="-1">使用陷阱 <a class="header-anchor" href="#使用陷阱" aria-label="Permalink to &quot;使用陷阱&quot;">​</a></h4><blockquote><p>1.会打破异步操作并行</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn1</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://.../post/1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://.../post/2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//a任务需要等到b任务执行完后才执行</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn1</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://.../post/1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://.../post/2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//a任务需要等到b任务执行完后才执行</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>高效做法</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn1</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promistA</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://.../post/1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promistB</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">http://.../post/2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//利用 Promise.all组合</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#BD976A;">b</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">all</span><span style="color:#666666;">([</span><span style="color:#BD976A;">promiseA</span><span style="color:#666666;">,</span><span style="color:#BD976A;">pormiseB</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn1</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promistA</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://.../post/1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promistB</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">http://.../post/2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//利用 Promise.all组合</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#B07D48;">b</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">all</span><span style="color:#999999;">([</span><span style="color:#B07D48;">promiseA</span><span style="color:#999999;">,</span><span style="color:#B07D48;">pormiseB</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>2.循环中执行异步操作，不能直接使用forEach,map等方法</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">].</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span><span style="color:#758575DD;">//会立刻返回，并不会等待所有异步操作执行完</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">done</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">].</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span><span style="color:#A0ADA0;">//会立刻返回，并不会等待所有异步操作执行完</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">done</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>解决方法</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//等待所有异步操作执行完毕在执行后面代码</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">done</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//等待所有异步操作执行完毕在执行后面代码</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">done</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>高效做法</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">async</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">someAsyncOpt</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//...</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//等待所有异步操作执行完毕在执行后面代码</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">done</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">async</span><span style="color:#393A34;">  </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">someAsyncOpt</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//...</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//等待所有异步操作执行完毕在执行后面代码</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">done</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,32),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_async\344\270\216await.md.d21c9cb0.lean.js" "b/assets/FrontEnd_JavaScript_async\344\270\216await.md.d21c9cb0.lean.js"
new file mode 100644
index 00000000..2ad33c42
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_async\344\270\216await.md.d21c9cb0.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"Javascript实现异步","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/async与await.md","filePath":"FrontEnd/JavaScript/async与await.md"}'),p={name:"FrontEnd/JavaScript/async与await.md"},o=l("",32),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md.e8fda00c.js" "b/assets/FrontEnd_JavaScript_\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md.e8fda00c.js"
new file mode 100644
index 00000000..9b6f663a
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md.e8fda00c.js"
@@ -0,0 +1,117 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"if else 多分支优化","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/代码分支优化.md","filePath":"FrontEnd/JavaScript/代码分支优化.md"}'),p={name:"FrontEnd/JavaScript/代码分支优化.md"},o=l(`<h1 id="if-else-多分支优化" tabindex="-1">if else 多分支优化 <a class="header-anchor" href="#if-else-多分支优化" aria-label="Permalink to &quot;if else 多分支优化&quot;">​</a></h1><h2 id="简单分支" tabindex="-1">简单分支 <a class="header-anchor" href="#简单分支" aria-label="Permalink to &quot;简单分支&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//优化前</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#CB7676;">===</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛哞哞叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#CB7676;">===</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老虎</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛嗷嗷叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#CB7676;">===</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老鸡</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛咯咯叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//优化后</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">老牛</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛哞哞叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">老虎</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老虎嗷嗷叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">老鸡</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老鸡咯咯叫</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">name</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">name</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">不知道怎么叫</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">老牛</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//优化前</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#AB5959;">===</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛哞哞叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#AB5959;">===</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老虎</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛嗷嗷叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#AB5959;">===</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老鸡</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛咯咯叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//优化后</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">老牛</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛哞哞叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">老虎</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老虎嗷嗷叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">老鸡</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老鸡咯咯叫</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">name</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">name</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">不知道怎么叫</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">老牛</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><h2 id="条件单一-处理不同" tabindex="-1">条件单一,处理不同 <a class="header-anchor" href="#条件单一-处理不同" aria-label="Permalink to &quot;条件单一,处理不同&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">老牛</span><span style="color:#666666;">:()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">老虎</span><span style="color:#666666;">:()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">老鸡</span><span style="color:#666666;">:()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">name</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">name</span><span style="color:#666666;">]()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">xxx</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">老牛</span><span style="color:#999999;">:()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">老虎</span><span style="color:#999999;">:()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">老鸡</span><span style="color:#999999;">:()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">name</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">name</span><span style="color:#999999;">]()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">xxx</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="条件复杂-处理也复杂" tabindex="-1">条件复杂,处理也复杂 <a class="header-anchor" href="#条件复杂-处理也复杂" aria-label="Permalink to &quot;条件复杂,处理也复杂&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">speak</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//条件,处理映射</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#758575DD;">//条件1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//处理函数1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#758575DD;">//条件2</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//处理函数2</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#758575DD;">//条件3</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//处理函数4</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">target</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]())</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">target</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">target</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">xxx</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">speak</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//条件,处理映射</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#A0ADA0;">//条件1</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//处理函数1</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#A0ADA0;">//条件2</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//处理函数2</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#A0ADA0;">//条件3</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//处理函数4</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">target</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]())</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">target</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">target</span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">xxx</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,7),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md.e8fda00c.lean.js" "b/assets/FrontEnd_JavaScript_\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md.e8fda00c.lean.js"
new file mode 100644
index 00000000..764ccca5
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.md.e8fda00c.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"if else 多分支优化","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/代码分支优化.md","filePath":"FrontEnd/JavaScript/代码分支优化.md"}'),p={name:"FrontEnd/JavaScript/代码分支优化.md"},o=l("",7),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md.3d5465d0.js" "b/assets/FrontEnd_JavaScript_\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md.3d5465d0.js"
new file mode 100644
index 00000000..03216a57
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md.3d5465d0.js"
@@ -0,0 +1,51 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"JS 图片懒加载","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/图片懒加载.md","filePath":"FrontEnd/JavaScript/图片懒加载.md"}'),p={name:"FrontEnd/JavaScript/图片懒加载.md"},o=l(`<h1 id="js-图片懒加载" tabindex="-1">JS 图片懒加载 <a class="header-anchor" href="#js-图片懒加载" aria-label="Permalink to &quot;JS 图片懒加载&quot;">​</a></h1><h2 id="方案一-监听滚动" tabindex="-1">方案一：监听滚动 <a class="header-anchor" href="#方案一-监听滚动" aria-label="Permalink to &quot;方案一：监听滚动&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>监听图片顶部到达视口底部，把自定义属性 data-src赋值给src</p></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">images</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">querySelectorAll</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">img</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">scroll</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">images</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">image</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">imageTop</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">image</span><span style="color:#666666;">.</span><span style="color:#80A665;">getBoundingClientRect</span><span style="color:#666666;">().</span><span style="color:#BD976A;">top</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">imageTop</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#BD976A;">innerHeight</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data_src</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">image</span><span style="color:#666666;">.</span><span style="color:#80A665;">getAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">data-src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">image</span><span style="color:#666666;">.</span><span style="color:#80A665;">setAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data_src</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">images</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">querySelectorAll</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">img</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">scroll</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">images</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">image</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">imageTop</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">image</span><span style="color:#999999;">.</span><span style="color:#59873A;">getBoundingClientRect</span><span style="color:#999999;">().</span><span style="color:#B07D48;">top</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">imageTop</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#B07D48;">innerHeight</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data_src</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">image</span><span style="color:#999999;">.</span><span style="color:#59873A;">getAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">data-src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">image</span><span style="color:#999999;">.</span><span style="color:#59873A;">setAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data_src</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h2 id="方案二-观察者" tabindex="-1">方案二：观察者 <a class="header-anchor" href="#方案二-观察者" aria-label="Permalink to &quot;方案二：观察者&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">images</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">querySelectorAll</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">img</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">enteries</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">enteries</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">entry</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">entry</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isIntersecting</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data_src</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">getAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">data-src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">setAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data_src</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">observer</span><span style="color:#666666;">.</span><span style="color:#80A665;">unobserve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">img</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">observer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">IntersectionObserver</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">images</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">image</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">observer</span><span style="color:#666666;">.</span><span style="color:#80A665;">observe</span><span style="color:#666666;">(</span><span style="color:#BD976A;">image</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">images</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">querySelectorAll</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">img</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">enteries</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">enteries</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">entry</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">entry</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isIntersecting</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data_src</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">getAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">data-src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">setAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data_src</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">observer</span><span style="color:#999999;">.</span><span style="color:#59873A;">unobserve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">img</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">observer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">IntersectionObserver</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">images</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">image</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">observer</span><span style="color:#999999;">.</span><span style="color:#59873A;">observe</span><span style="color:#999999;">(</span><span style="color:#B07D48;">image</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div>`,6),e=[o];function t(c,r,y,A,D,i){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md.3d5465d0.lean.js" "b/assets/FrontEnd_JavaScript_\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md.3d5465d0.lean.js"
new file mode 100644
index 00000000..911d6052
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md.3d5465d0.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"JS 图片懒加载","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/图片懒加载.md","filePath":"FrontEnd/JavaScript/图片懒加载.md"}'),p={name:"FrontEnd/JavaScript/图片懒加载.md"},o=l("",6),e=[o];function t(c,r,y,A,D,i){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md.a8906ce7.js" "b/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md.a8906ce7.js"
new file mode 100644
index 00000000..f5605b0b
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md.a8906ce7.js"
@@ -0,0 +1,113 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/基础复习一.md","filePath":"FrontEnd/JavaScript/基础复习一.md"}'),p={name:"FrontEnd/JavaScript/基础复习一.md"},o=l(`<h3 id="_1-算术运算符" tabindex="-1">1.算术运算符 <a class="header-anchor" href="#_1-算术运算符" aria-label="Permalink to &quot;1.算术运算符&quot;">​</a></h3><p><strong>隐式类型转换</strong></p><blockquote><p>除了<strong>加法</strong>和其他<em>字符串</em>运算时，它先将其他值转为字符串，在进行拼接；其他运算它先将其他值转为<em>数字</em>，在进行运算</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">5</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//5</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 9</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//10</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// NaN</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 10</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">5</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//5</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 9</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//10</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// NaN</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 10</span></span></code></pre></div><h3 id="_2-赋值运算符" tabindex="-1">2.赋值运算符 <a class="header-anchor" href="#_2-赋值运算符" aria-label="Permalink to &quot;2.赋值运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// a += 10  (*= 	/=   %=		**=)</span></span>
+<span class="line"><span style="color:#758575DD;">//	??= 只有当a为undefined或null才会进行赋值</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// a += 10  (*= 	/=   %=		**=)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//	??= 只有当a为undefined或null才会进行赋值</span></span></code></pre></div><h3 id="_3-运算符" tabindex="-1">3..运算符 <a class="header-anchor" href="#_3-运算符" aria-label="Permalink to &quot;3..运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">123</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 123</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">123</span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//-123</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">123</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 123</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">123</span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//-123</span></span></code></pre></div><h3 id="_4-自增和自减" tabindex="-1">4.自增和自减 <a class="header-anchor" href="#_4-自增和自减" aria-label="Permalink to &quot;4.自增和自减&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//	++ 使用后回事原来的变量立刻增加1</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#CB7676;">++</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#CB7676;">--</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//前自增:返回自增前的值</span></span>
+<span class="line"><span style="color:#758575DD;">//后自增:返回自增后的值</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//	++ 使用后回事原来的变量立刻增加1</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#AB5959;">++</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#AB5959;">--</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//前自增:返回自增前的值</span></span>
+<span class="line"><span style="color:#A0ADA0;">//后自增:返回自增后的值</span></span></code></pre></div><h3 id="_5-逻辑运算符" tabindex="-1">5.逻辑运算符 <a class="header-anchor" href="#_5-逻辑运算符" aria-label="Permalink to &quot;5.逻辑运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">!</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">//逻辑非:对布尔值值取反,对非布尔值值取反,会先将其转为布尔值值再取反,可运用于隐式转布尔值   !!123 -&gt; true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//逻辑与:左右都为true返回true,否则返回false;非布尔值运算,会先转为布尔值后运算,但是最终返回原值</span></span>
+<span class="line"><span style="color:#666666;">    	</span><span style="color:#758575DD;">//-	第一个值为(falsy),则直接返回第一个值的原值1,如果第一个值为ture,则直接返回第二个值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    	</span><span style="color:#4D9375;">NaN</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">NaN</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> 		</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">undefined</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> 		</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//逻辑或:左右有true,则不看第二个值,则返回true的原值,否则返回false 	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      	</span><span style="color:#4C9A91;">12</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	 </span><span style="color:#4C9A91;">12</span><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a </span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	 </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a </span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">!</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">//逻辑非:对布尔值值取反,对非布尔值值取反,会先将其转为布尔值值再取反,可运用于隐式转布尔值   !!123 -&gt; true</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//逻辑与:左右都为true返回true,否则返回false;非布尔值运算,会先转为布尔值后运算,但是最终返回原值</span></span>
+<span class="line"><span style="color:#999999;">    	</span><span style="color:#A0ADA0;">//-	第一个值为(falsy),则直接返回第一个值的原值1,如果第一个值为ture,则直接返回第二个值</span></span>
+<span class="line"><span style="color:#393A34;">    	</span><span style="color:#1E754F;">NaN</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">NaN</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> 		</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">undefined</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> 		</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	</span><span style="color:#1E754F;">false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">||</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//逻辑或:左右有true,则不看第二个值,则返回true的原值,否则返回false 	</span></span>
+<span class="line"><span style="color:#393A34;">      	</span><span style="color:#2F798A;">12</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">		</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	 </span><span style="color:#2F798A;">12</span><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">a </span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">}</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	 </span><span style="color:#999999;">{</span><span style="color:#998418;">a </span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_6-关系运算符" tabindex="-1">6.关系运算符 <a class="header-anchor" href="#_6-关系运算符" aria-label="Permalink to &quot;6.关系运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//用来检查两个值的关系是否成立,成立返回true,否则返回false (多个比较用&amp;&amp;)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;=</span></span>
+<span class="line"><span style="color:#758575DD;">// 非数值与数值比较会先非数值转为数值再比较  7 &lt; &#39;10&#39; -&gt;  true</span></span>
+<span class="line"><span style="color:#758575DD;">//	两端为字符串则逐个比较字符的Unicode编码	 </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">a</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">b</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">		</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">abc</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">b</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">(</span><span style="color:#BD976A;">比完第一位则结束</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">12</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//用来检查两个值的关系是否成立,成立返回true,否则返回false (多个比较用&amp;&amp;)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">	</span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;=</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 非数值与数值比较会先非数值转为数值再比较  7 &lt; &#39;10&#39; -&gt;  true</span></span>
+<span class="line"><span style="color:#A0ADA0;">//	两端为字符串则逐个比较字符的Unicode编码	 </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">a</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">b</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">		</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">abc</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">b</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">(</span><span style="color:#B07D48;">比完第一位则结束</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">12</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span></code></pre></div><h3 id="_7-相等运算符" tabindex="-1">7.相等运算符 <a class="header-anchor" href="#_7-相等运算符" aria-label="Permalink to &quot;7.相等运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">==/!=</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//用来比较两个值是否相等/不相等,不同类型会转为相同类型再比较	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//null和undefined进行相等比较会返回true(null == undefined -&gt; true)</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//NaN不和任何值相等,包括它自身</span></span>
+<span class="line"><span style="color:#CB7676;">===/!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//检查两个值是否全等/不全等,不会自动类型转换</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//null === undefined -&gt; false</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">==/!=</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//用来比较两个值是否相等/不相等,不同类型会转为相同类型再比较	</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//null和undefined进行相等比较会返回true(null == undefined -&gt; true)</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//NaN不和任何值相等,包括它自身</span></span>
+<span class="line"><span style="color:#AB5959;">===/!==</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//检查两个值是否全等/不全等,不会自动类型转换</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;">	</span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//null === undefined -&gt; false</span></span></code></pre></div><h3 id="_8-条件运算符" tabindex="-1">8.条件运算符 <a class="header-anchor" href="#_8-条件运算符" aria-label="Permalink to &quot;8.条件运算符&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">表达式</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">表达式1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">表达式2</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//let max = a &gt; b ? a : b</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">表达式</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">表达式1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">表达式2</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//let max = a &gt; b ? a : b</span></span></code></pre></div><h3 id="_9-控制语句" tabindex="-1">9.控制语句 <a class="header-anchor" href="#_9-控制语句" aria-label="Permalink to &quot;9.控制语句&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">if</span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(){</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//不加{}if只会控制紧随其后的一条语句</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#4D9375;">switch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">表达式</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">case</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">表达式</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">break</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">default</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//表达式进行全等比较,满足则执行代码,否则比较其他case后的表达式</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">if</span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(){</span><span style="color:#393A34;">	</span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//不加{}if只会控制紧随其后的一条语句</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#1E754F;">switch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">表达式</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">case</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">表达式</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">break</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">default</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//表达式进行全等比较,满足则执行代码,否则比较其他case后的表达式</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="_10-循环语句" tabindex="-1">10.循环语句 <a class="header-anchor" href="#_10-循环语句" aria-label="Permalink to &quot;10.循环语句&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//循环三要素 1.初始化变量	2.条件表达式	3.更新表达式</span></span>
+<span class="line"><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">条件表达式</span><span style="color:#666666;">){...}</span></span>
+<span class="line"><span style="color:#4D9375;">do</span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">表达式</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//先执行一次循环体,再判断条件是否执行循环体</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//for(;;)死循环</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//循环三要素 1.初始化变量	2.条件表达式	3.更新表达式</span></span>
+<span class="line"><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">条件表达式</span><span style="color:#999999;">){...}</span></span>
+<span class="line"><span style="color:#1E754F;">do</span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#999999;">...</span><span style="color:#393A34;">	</span><span style="color:#999999;">}</span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">表达式</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//先执行一次循环体,再判断条件是否执行循环体</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//for(;;)死循环</span></span></code></pre></div><blockquote><p><strong>break与continue</strong>💔终止离它最近的循环, break立即循环停止; continue跳过当前循环,继续下一次循环</p></blockquote><h3 id="_11-数据类型" tabindex="-1">11.数据类型 <a class="header-anchor" href="#_11-数据类型" aria-label="Permalink to &quot;11.数据类型&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//原始值(7种):</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">Number</span><span style="color:#666666;">,</span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span><span style="color:#BD976A;">Boolean</span><span style="color:#666666;">,</span><span style="color:#BD976A;">Null</span><span style="color:#666666;">,</span><span style="color:#BD976A;">Undefined</span><span style="color:#666666;">,</span><span style="color:#BD976A;">BigInt</span><span style="color:#666666;">,</span><span style="color:#BD976A;">Symbol</span></span>
+<span class="line"><span style="color:#758575DD;">//引用值(对象)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">Object</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">[</span><span style="color:#80A665;">Symbol</span><span style="color:#666666;">()]</span><span style="color:#DBD7CAEE;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">此值不可枚举</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//原始值(7种):</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">Number</span><span style="color:#999999;">,</span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span><span style="color:#B07D48;">Boolean</span><span style="color:#999999;">,</span><span style="color:#B07D48;">Null</span><span style="color:#999999;">,</span><span style="color:#B07D48;">Undefined</span><span style="color:#999999;">,</span><span style="color:#B07D48;">BigInt</span><span style="color:#999999;">,</span><span style="color:#B07D48;">Symbol</span></span>
+<span class="line"><span style="color:#A0ADA0;">//引用值(对象)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">Object</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">[</span><span style="color:#59873A;">Symbol</span><span style="color:#999999;">()]</span><span style="color:#393A34;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">此值不可枚举</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div>`,25),e=[o];function t(c,r,y,A,D,i){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md.a8906ce7.lean.js" "b/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md.a8906ce7.lean.js"
new file mode 100644
index 00000000..f1a19dc7
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.md.a8906ce7.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/基础复习一.md","filePath":"FrontEnd/JavaScript/基础复习一.md"}'),p={name:"FrontEnd/JavaScript/基础复习一.md"},o=l("",25),e=[o];function t(c,r,y,A,D,i){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md.8f89af07.js" "b/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md.8f89af07.js"
new file mode 100644
index 00000000..f9392f77
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md.8f89af07.js"
@@ -0,0 +1,415 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/基础复习二.md","filePath":"FrontEnd/JavaScript/基础复习二.md"}'),p={name:"FrontEnd/JavaScript/基础复习二.md"},o=l(`<h3 id="this指向" tabindex="-1">this指向 <a class="header-anchor" href="#this指向" aria-label="Permalink to &quot;this指向&quot;">​</a></h3><p>根据函数调用方式的不同，this的值也不同：</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li>以函数形式调用，this是window</li><li>以方法形式调用, this是调用方法的对象</li><li>构造函数中，this是新建的对象</li><li>箭头函数没有自己的this, 由外层作用域决定</li><li>通过call和apply调用的函数，它们的第一个参数就是函数的this</li><li>通过bind返回的函数，this由bind第一个参数决定（无法修改）</li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//window</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhansan</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//obj</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn2</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//window     </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">fn3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//obj,与调用方式无关,指向声明时外层作用域的this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">fn2</span><span style="color:#666666;">()</span><span style="color:#758575DD;">//以函数形式调用指向window</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span><span style="color:#758575DD;">//以方法形式调用,指向obj</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//window</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhansan</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//obj</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn2</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//window     </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">fn3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//obj,与调用方式无关,指向声明时外层作用域的this</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">fn2</span><span style="color:#999999;">()</span><span style="color:#A0ADA0;">//以函数形式调用指向window</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span><span style="color:#A0ADA0;">//以方法形式调用,指向obj</span></span></code></pre></div><p>函数三种调用方式</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">fn</span><span style="color:#666666;">.</span><span style="color:#80A665;">call</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">fn</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">fn</span><span style="color:#999999;">.</span><span style="color:#59873A;">call</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">fn</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">()</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">call和bind与apply</p><ol><li><p>call 和 apply除了可以调用函数，还可以用来指定函数中的this</p><ul><li>通过call方法调用函数，函数的实参直接在第一个参数后一个一个的列出来</li><li>apply 实参需要通过一个数组传递</li></ul></li><li><p>bind() 是函数的方法，可以用来创建一个新的函数</p><ul><li>bind可以为新函数绑定this</li><li>bind可以为新函数绑定参数</li></ul></li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">fn2</span><span style="color:#666666;">.</span><span style="color:#80A665;">call</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hello</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//会立即执行</span></span>
+<span class="line"><span style="color:#BD976A;">fn2</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hello</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">]</span><span style="color:#758575DD;">//会立即执行</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newfn</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fn</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//不会立即执行, 返回一个新函数 	newfn()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">fn2</span><span style="color:#999999;">.</span><span style="color:#59873A;">call</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hello</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//会立即执行</span></span>
+<span class="line"><span style="color:#B07D48;">fn2</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hello</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">]</span><span style="color:#A0ADA0;">//会立即执行</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newfn</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fn</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//不会立即执行, 返回一个新函数 	newfn()</span></span></code></pre></div><p>箭头函数没有自身的this，它的this由定义时外层作用域决定，</p><ul><li><p>也无法通过call apply 和 bind修改它的this</p></li><li><p>箭头函数中没有arguments</p></li></ul><h3 id="可变参数-arguments" tabindex="-1">可变参数 <code>arguments</code> <a class="header-anchor" href="#可变参数-arguments" aria-label="Permalink to &quot;可变参数 \`arguments\`&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">// 定义一个函数，可以求任意个数值的和</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#758575DD;">// 通过arguments，可以不受参数数量的限制更加灵活的创建函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* arguments</span></span>
+<span class="line"><span style="color:#758575DD;">    - arguments是函数中又一个隐含参数</span></span>
+<span class="line"><span style="color:#758575DD;">    - arguments是一个类数组对象（伪数组）</span></span>
+<span class="line"><span style="color:#758575DD;">        和数组相似，可以通过索引来读取元素，也可以通过for循环变量，							</span></span>
+<span class="line"><span style="color:#758575DD;">        但是它不是一个数组对象，不能调用数组的方法</span></span>
+<span class="line"><span style="color:#758575DD;">    - arguments用来存储函数的实参，</span></span>
+<span class="line"><span style="color:#758575DD;">        无论用户是否定义形参，实参都会存储到arguments对象中</span></span>
+<span class="line"><span style="color:#758575DD;">        可以通过该对象直接访问实参*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">arguments</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// 定义一个函数，可以求任意个数值的和</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 通过arguments，可以不受参数数量的限制更加灵活的创建函数</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* arguments</span></span>
+<span class="line"><span style="color:#A0ADA0;">    - arguments是函数中又一个隐含参数</span></span>
+<span class="line"><span style="color:#A0ADA0;">    - arguments是一个类数组对象（伪数组）</span></span>
+<span class="line"><span style="color:#A0ADA0;">        和数组相似，可以通过索引来读取元素，也可以通过for循环变量，							</span></span>
+<span class="line"><span style="color:#A0ADA0;">        但是它不是一个数组对象，不能调用数组的方法</span></span>
+<span class="line"><span style="color:#A0ADA0;">    - arguments用来存储函数的实参，</span></span>
+<span class="line"><span style="color:#A0ADA0;">        无论用户是否定义形参，实参都会存储到arguments对象中</span></span>
+<span class="line"><span style="color:#A0ADA0;">        可以通过该对象直接访问实参*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">arguments</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="剩余参数-args" tabindex="-1">剩余参数 <code>...args</code> <a class="header-anchor" href="#剩余参数-args" aria-label="Permalink to &quot;剩余参数 \`...args\`&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum2</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">num</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* </span></span>
+<span class="line"><span style="color:#758575DD;">剩余参数，在定义函数时可以将参数指定为剩余参数</span></span>
+<span class="line"><span style="color:#758575DD;">- 剩余参数可以接收任意数量实参，并将他们统一存储到一个数组中返回</span></span>
+<span class="line"><span style="color:#758575DD;">- 作用和arguments基本是一致，但是也具有一些不同点：</span></span>
+<span class="line"><span style="color:#758575DD;">    是一个数组，名字可以自己指定，配合其他参数一起使用，剩余参数写到最后。</span></span>
+<span class="line"><span style="color:#758575DD;"> */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn3</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum2</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">num</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* </span></span>
+<span class="line"><span style="color:#A0ADA0;">剩余参数，在定义函数时可以将参数指定为剩余参数</span></span>
+<span class="line"><span style="color:#A0ADA0;">- 剩余参数可以接收任意数量实参，并将他们统一存储到一个数组中返回</span></span>
+<span class="line"><span style="color:#A0ADA0;">- 作用和arguments基本是一致，但是也具有一些不同点：</span></span>
+<span class="line"><span style="color:#A0ADA0;">    是一个数组，名字可以自己指定，配合其他参数一起使用，剩余参数写到最后。</span></span>
+<span class="line"><span style="color:#A0ADA0;"> */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn3</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">}</span></span></code></pre></div><h3 id="map" tabindex="-1">Map <a class="header-anchor" href="#map" aria-label="Permalink to &quot;Map&quot;">​</a></h3><ul><li><strong>Map用来存储键值对结构的数据（key-value）</strong></li><li>Object中存储的数据就可以认为是一种键值对结构</li><li>Map和Object的主要区别： <ul><li>Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名， JS解释器会自动将其转换为字符串</li><li>Map中任何类型的值都可以称为数据的key</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/*属性和方法：</span></span>
+<span class="line"><span style="color:#758575DD;">  map.size() 获取map中键值对的数量</span></span>
+<span class="line"><span style="color:#758575DD;">  map.set(key, value) 向map中添加键值对</span></span>
+<span class="line"><span style="color:#758575DD;">  map.get(key) 根据key获取值   </span></span>
+<span class="line"><span style="color:#758575DD;">  map.delete(key) 删除指定数据</span></span>
+<span class="line"><span style="color:#758575DD;">  map.has(key) 检查map中是否包含指定键</span></span>
+<span class="line"><span style="color:#758575DD;">  map.clear() 删除全部的键值对*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">age</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">[</span><span style="color:#80A665;">Symbol</span><span style="color:#666666;">()]:</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">哈哈</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">[</span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">]:</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">嘻嘻</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/*属性和方法：</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.size() 获取map中键值对的数量</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.set(key, value) 向map中添加键值对</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.get(key) 根据key获取值   </span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.delete(key) 删除指定数据</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.has(key) 检查map中是否包含指定键</span></span>
+<span class="line"><span style="color:#A0ADA0;">  map.clear() 删除全部的键值对*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">age</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">[</span><span style="color:#59873A;">Symbol</span><span style="color:#999999;">()]:</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">哈哈</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">[</span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">]:</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">嘻嘻</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><p><strong>将map转换为数组</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">from</span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//const arr = [...map]</span></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">// 遍历map</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">map</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#666666;">.</span><span style="color:#80A665;">keys</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">获取map的所有的key</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#666666;">.</span><span style="color:#80A665;">values</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">获取map的所有的value</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">from</span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//const arr = [...map]</span></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// 遍历map</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">map</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#999999;">.</span><span style="color:#59873A;">keys</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">获取map的所有的key</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#999999;">.</span><span style="color:#59873A;">values</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">获取map的所有的value</span></span></code></pre></div><p><strong>数组转map</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Map</span><span style="color:#666666;">([</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">age</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">[{},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}],</span></span>
+<span class="line"><span style="color:#666666;">])</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Map</span><span style="color:#999999;">([</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">age</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">[{},</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}],</span></span>
+<span class="line"><span style="color:#999999;">])</span></span></code></pre></div><h3 id="set" tabindex="-1">Set <a class="header-anchor" href="#set" aria-label="Permalink to &quot;Set&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/* - 使用方式：</span></span>
+<span class="line"><span style="color:#758575DD;">    创建</span></span>
+<span class="line"><span style="color:#758575DD;">        - new Set()</span></span>
+<span class="line"><span style="color:#758575DD;">        - new Set([...])</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">    方法</span></span>
+<span class="line"><span style="color:#758575DD;">        size 获取数量</span></span>
+<span class="line"><span style="color:#758575DD;">        add() 添加元素</span></span>
+<span class="line"><span style="color:#758575DD;">        has() 检查元素</span></span>
+<span class="line"><span style="color:#758575DD;">        delete() 删除元素</span></span>
+<span class="line"><span style="color:#758575DD;">        [...set]转为数组获取元素 </span></span>
+<span class="line"><span style="color:#758575DD;">        set.entries() 得到键值对(键值对一样)</span></span>
+<span class="line"><span style="color:#758575DD;">        */</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/* - 使用方式：</span></span>
+<span class="line"><span style="color:#A0ADA0;">    创建</span></span>
+<span class="line"><span style="color:#A0ADA0;">        - new Set()</span></span>
+<span class="line"><span style="color:#A0ADA0;">        - new Set([...])</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">    方法</span></span>
+<span class="line"><span style="color:#A0ADA0;">        size 获取数量</span></span>
+<span class="line"><span style="color:#A0ADA0;">        add() 添加元素</span></span>
+<span class="line"><span style="color:#A0ADA0;">        has() 检查元素</span></span>
+<span class="line"><span style="color:#A0ADA0;">        delete() 删除元素</span></span>
+<span class="line"><span style="color:#A0ADA0;">        [...set]转为数组获取元素 </span></span>
+<span class="line"><span style="color:#A0ADA0;">        set.entries() 得到键值对(键值对一样)</span></span>
+<span class="line"><span style="color:#A0ADA0;">        */</span></span></code></pre></div><h3 id="随机数生成" tabindex="-1">随机数生成 <a class="header-anchor" href="#随机数生成" aria-label="Permalink to &quot;随机数生成&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">--</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#758575DD;">//生成 0-x之间的随机数：</span></span>
+<span class="line"><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">round</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//生成 x-y 之间的随机数</span></span>
+<span class="line"><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">round</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">x</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">--</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#A0ADA0;">//生成 0-x之间的随机数：</span></span>
+<span class="line"><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">round</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//生成 x-y 之间的随机数</span></span>
+<span class="line"><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">round</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">x</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">)</span></span></code></pre></div><h3 id="时间格式化" tabindex="-1">时间格式化 <a class="header-anchor" href="#时间格式化" aria-label="Permalink to &quot;时间格式化&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#666666;">.</span><span style="color:#80A665;">toLocaleDateString</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 将日期转换为本地的字符串		&#39;2021/10/1</span></span>
+<span class="line"><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#666666;">.</span><span style="color:#80A665;">toLocaleTimeString</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 将时间转换为本地的字符串 	&#39;21:32:35&#39;</span></span>
+<span class="line"><span style="color:#758575DD;">/*   - 参数：</span></span>
+<span class="line"><span style="color:#758575DD;">1. locales: 描述语言和国家信息的字符串</span></span>
+<span class="line"><span style="color:#758575DD;">    zh-CN 中文中国</span></span>
+<span class="line"><span style="color:#758575DD;">    zh-HK 中文香港</span></span>
+<span class="line"><span style="color:#758575DD;">    en-US 英文美国</span></span>
+<span class="line"><span style="color:#758575DD;">2. options: 需要一个对象作为参数，在对象中可以通过对象的属性来对日期的格式进行配置</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#666666;">.</span><span style="color:#80A665;">toLocaleString</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">zh-CN</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">year</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">numeric</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">month</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">long</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">day</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2-digit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">weekday</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">short</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">hour</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2-digit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">minute</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2-digit</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#999999;">.</span><span style="color:#59873A;">toLocaleDateString</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 将日期转换为本地的字符串		&#39;2021/10/1</span></span>
+<span class="line"><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#999999;">.</span><span style="color:#59873A;">toLocaleTimeString</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 将时间转换为本地的字符串 	&#39;21:32:35&#39;</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*   - 参数：</span></span>
+<span class="line"><span style="color:#A0ADA0;">1. locales: 描述语言和国家信息的字符串</span></span>
+<span class="line"><span style="color:#A0ADA0;">    zh-CN 中文中国</span></span>
+<span class="line"><span style="color:#A0ADA0;">    zh-HK 中文香港</span></span>
+<span class="line"><span style="color:#A0ADA0;">    en-US 英文美国</span></span>
+<span class="line"><span style="color:#A0ADA0;">2. options: 需要一个对象作为参数，在对象中可以通过对象的属性来对日期的格式进行配置</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#999999;">.</span><span style="color:#59873A;">toLocaleString</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">zh-CN</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">year</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">numeric</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">month</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">long</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">day</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2-digit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">weekday</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">short</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">hour</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2-digit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">minute</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2-digit</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><h3 id="面向对象之类" tabindex="-1">面向对象之类 <a class="header-anchor" href="#面向对象之类" aria-label="Permalink to &quot;面向对象之类&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	 </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gender</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// console.log(&quot;构造函数执行了~&quot;, name, age, gender)</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 可以在构造函数中，为实例属性进行赋值</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 在构造函数中，this表示当前所创建的对象</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">gender</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gender</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// sayHello = function(){} // 添加方法的一种方式</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 添加方法（实例方法） 实例方法中this就是当前实例</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">test</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">我是静态方法</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 静态方法（类方法） 通过类来调用 静态方法中this指向的是当前类</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	 </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gender</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// console.log(&quot;构造函数执行了~&quot;, name, age, gender)</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 可以在构造函数中，为实例属性进行赋值</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 在构造函数中，this表示当前所创建的对象</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">gender</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gender</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// sayHello = function(){} // 添加方法的一种方式</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">大家好，我是</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 添加方法（实例方法） 实例方法中this就是当前实例</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">test</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">我是静态方法</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 静态方法（类方法） 通过类来调用 静态方法中this指向的是当前类</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>面向对象的特点：封装、继承和多态</strong></p><blockquote><p>封装 —— 安全性 继承 —— 扩展性 多态 —— 灵活性</p></blockquote><h4 id="封装" tabindex="-1">封装 <a class="header-anchor" href="#封装" aria-label="Permalink to &quot;封装&quot;">​</a></h4><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li>对象就是一个用来存储不同属性的容器</li><li>对象不仅存储属性，还要负责数据的安全, 直接添加到对象中的属性，并不安全，因为它们可以被任意的修改</li><li>如何确保数据的安全： <ul><li>私有化数据: 将需要保护的数据设置为私有，只能在类内部使用</li><li>提供setter和getter方法来开放对数据的操作</li><li>属性设置私有，通过getter setter方法操作属性带来的好处 <ol><li>可以控制属性的读写权限</li><li>可以在方法中对属性的值进行验证</li></ol></li></ul></li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">实现封装的方式</span><span style="color:#DBD7CAEE;">：</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">属性私有化</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">加</span><span style="color:#DBD7CAEE;">#</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">通过getter和setter方法来操作属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">属性名</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">set</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">属性名</span><span style="color:#666666;">(</span><span style="color:#BD976A;">参数</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#属性</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">参数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">实现封装的方式</span><span style="color:#393A34;">：</span></span>
+<span class="line"><span style="color:#393A34;">    1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">属性私有化</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">加</span><span style="color:#393A34;">#</span></span>
+<span class="line"><span style="color:#393A34;">    2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">通过getter和setter方法来操作属性</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">get</span><span style="color:#393A34;"> </span><span style="color:#59873A;">属性名</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#属性</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">set</span><span style="color:#393A34;"> </span><span style="color:#59873A;">属性名</span><span style="color:#999999;">(</span><span style="color:#B07D48;">参数</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#属性</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">参数</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	 #</span><span style="color:#BD976A;">name</span><span style="color:#758575DD;">//实例使用#开头就变成了私有属性，私有属性只能在类内部访问</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gender</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">getName</span><span style="color:#666666;">(){</span><span style="color:#758575DD;">// getter方法，用p.getName()来读取属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// setter方法，用来设置属性,p.setName(&#39;zhangsan&#39;)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setName</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">name</span><span style="color:#666666;">(){</span><span style="color:#758575DD;">//简化读取方式:p.name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">set</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">name</span><span style="color:#666666;">(</span><span style="color:#BD976A;">gender</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">#name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	 #</span><span style="color:#B07D48;">name</span><span style="color:#A0ADA0;">//实例使用#开头就变成了私有属性，私有属性只能在类内部访问</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gender</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">getName</span><span style="color:#999999;">(){</span><span style="color:#A0ADA0;">// getter方法，用p.getName()来读取属性</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// setter方法，用来设置属性,p.setName(&#39;zhangsan&#39;)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setName</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">get</span><span style="color:#393A34;"> </span><span style="color:#59873A;">name</span><span style="color:#999999;">(){</span><span style="color:#A0ADA0;">//简化读取方式:p.name</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">set</span><span style="color:#393A34;"> </span><span style="color:#59873A;">name</span><span style="color:#999999;">(</span><span style="color:#B07D48;">gender</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">#name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><h4 id="继承" tabindex="-1">继承 <a class="header-anchor" href="#继承" aria-label="Permalink to &quot;继承&quot;">​</a></h4><div class="tip custom-block"><p class="custom-block-title">继承</p><ul><li>可以通过extends关键来完成继承 时，就相当于将另一个类中的代码复制到了当前类中（简单理解）</li><li>继承发生时，被继承的类称为 父类（超类），继承的类称为 子类 的代码，并且可以在不修改一个类的前提对其进行扩展</li></ul></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">动物在叫~</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 重写构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 重写构造函数时，构造函数的第一行代码必须为super()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 调用父类的构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">// 在子类中，可以通过创建同名方法来重写父类的方法</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">汪汪汪</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Dog</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">旺财</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">dog</span><span style="color:#666666;">.</span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">动物在叫~</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Dog</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 重写构造函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 重写构造函数时，构造函数的第一行代码必须为super()</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 调用父类的构造函数</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">// 在子类中，可以通过创建同名方法来重写父类的方法</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">汪汪汪</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dog</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Dog</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">旺财</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">dog</span><span style="color:#999999;">.</span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">()</span></span></code></pre></div><h4 id="多态" tabindex="-1">多态 <a class="header-anchor" href="#多态" aria-label="Permalink to &quot;多态&quot;">​</a></h4><p>在JS中不会检查参数的类型，所以这就意味着任何数据都可以作为参数传递 指定的类型，只要对象满足某些条件即可</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Hello,</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//只要参数有obj.name就可以调用</span></span>
+<span class="line"><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dog</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(</span><span style="color:#BD976A;">person</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Hello,</span><span style="color:#B5695999;">&quot;</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//只要参数有obj.name就可以调用</span></span>
+<span class="line"><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dog</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(</span><span style="color:#B07D48;">person</span><span style="color:#999999;">)</span></span></code></pre></div><h3 id="对象的结构" tabindex="-1">对象的结构 <a class="header-anchor" href="#对象的结构" aria-label="Permalink to &quot;对象的结构&quot;">​</a></h3><h4 id="原型" tabindex="-1">原型 <a class="header-anchor" href="#原型" aria-label="Permalink to &quot;原型&quot;">​</a></h4><p>对象中存储属性的区域实际有两个：</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li><p>对象自身</p><ul><li>直接通过对象所添加的属性，位于对象自身中</li><li>在<strong>类</strong>中通过 x = y 的形式添加的属性，位于对象自身中</li></ul></li><li><p>原型对象（prototype）</p><ul><li>对象中还有一些内容，会存储到其他的对象里（原型对象）</li><li>在对象中会有一个属性用来存储原型对象，这个属性叫做<code>__proto__</code></li><li>原型对象也负责为对象存储属性，<br> 当我们访问对象中的属性时，会优先访问对象自身的属性，<br> 对象自身不包含该属性时，才会去原型对象中寻找</li><li>会添加到原型对象中的情况： <ol><li>在类中通过xxx(){}方式添加的方法，位于原型中</li><li>主动向原型中添加的属性或方法</li></ol></li></ul></li><li><p>访问一个对象的原型对象</p><ul><li><code>obj.__proto__</code></li><li><code>Object.getPrototypeOf(对象)</code></li></ul></li><li><p>原型对象中的数据：</p><ul><li>对象中的数据（属性、方法等）</li><li>constructor （对象的构造函数）</li></ul></li></ol><p><strong>原型链:</strong> 原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同 obj对象的原型链：obj对象 --&gt; 原型 --&gt; null</p></div><h4 id="原型链" tabindex="-1">原型链 <a class="header-anchor" href="#原型链" aria-label="Permalink to &quot;原型链&quot;">​</a></h4><div class="info custom-block"><p class="custom-block-title">原型链属性查找规则</p><ol><li>读取对象属性时，会优先对象自身属性，</li><li>如果对象中有，则使用，没有则去对象的原型中寻找</li><li>如果原型中有，则使用，没有则去原型的原型中寻找</li><li>直到找到<code>Object</code>对象的原型（Object的原型没有原型（为<code>null</code>））</li><li>如果依然没有找到，则返回<code>undefined</code></li></ol></div><div class="tip custom-block"><p class="custom-block-title">原型的作用：</p><ol><li>原型就相当于是一个公共的区域，可以被所有该类实例访问，</li><li>可以将该类实例中，所有的公共属性（方法）统一存储到原型中</li><li>这样我们只需要创建一个属性，即可被所有实例访问</li><li>一修改就是修改所有实例的原型</li><li>无需创建实例即可完成对类的修改</li></ol></div><h4 id="修改原型" tabindex="-1">修改原型 <a class="header-anchor" href="#修改原型" aria-label="Permalink to &quot;修改原型&quot;">​</a></h4><div class="warning custom-block"><p class="custom-block-title">原则</p><ol><li>原型尽量不要手动改</li><li>要改也不要通过实例对象去改</li><li>通过 类.prototype 属性去修改</li><li>最好不要直接给prototype去赋值</li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Person</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">fly</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//在原型添加方法</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">我在飞！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#998418;">Person</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">fly</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//在原型添加方法</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">我在飞！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="instanceof-in-hasown" tabindex="-1">instanceof/in/hasOwn <a class="header-anchor" href="#instanceof-in-hasown" aria-label="Permalink to &quot;instanceof/in/hasOwn&quot;">​</a></h4><blockquote><p>用于检查的是对象的原型链上是否有该类 <code>dog instanceof Animal</code></p></blockquote><div class="info custom-block"><p class="custom-block-title">检查对象属性</p><ul><li>in:使用in运算符检查属性时，无论属性在对象自身还是在原型中，都会返回true</li><li>对象.hasOwnProperty(属性名):用来检查一个对象的 自身 是否含有某个属性</li><li>Object.hasOwn(对象, 属性名):用来检查一个对象的 自身 是否含有某个属性</li></ul></div><h3 id="_10-new运算符" tabindex="-1">10.new运算符 <a class="header-anchor" href="#_10-new运算符" aria-label="Permalink to &quot;10.new运算符&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">new运算符是创建对象时，将会发生这4件事：</p><ol><li><p>创建一个普通的JS对象（<code>Object</code>对象 {}）, 称其为新对象</p></li><li><p>将构造函数的<code>prototype</code>属性设置为新对象的原型</p></li><li><p>使用实参来执行构造函数，并且将新对象设置为函数中的<code>this</code></p></li><li><p>如果构造函数返回的是一个<strong>非原始值</strong>，则该值会作为new运算的返回值返回</p><p>如果构造函数的返回值是一个<strong>原始值</strong>或者<strong>没有指定返回值</strong>(<code>undefined</code>)</p><p>则<em>新的对象</em>将会作为返回值返回（通常不会为构造函数指定返回值）</p></li></ol></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">MyClass</span><span style="color:#666666;">(){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">// let newInstance = {}</span></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">// newInstance.__proto__ = MyClass.prototype</span></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">// this = newInstance</span></span>
+<span class="line"><span style="color:#666666;">     </span><span style="color:#758575DD;">// return newInstance</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">MyClass</span><span style="color:#999999;">(){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">// let newInstance = {}</span></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">// newInstance.__proto__ = MyClass.prototype</span></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">// this = newInstance</span></span>
+<span class="line"><span style="color:#999999;">     </span><span style="color:#A0ADA0;">// return newInstance</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">}</span></span></code></pre></div><p><strong>对象的分类</strong>：</p><ol><li><strong>内建对象</strong>: 由ES标准所定义的对象</li><li><strong>宿主对象</strong>: 由浏览器提供的对象</li><li><strong>自定义对象</strong>: 由开发人员自己创建的对象(Vue, React)</li></ol>`,59),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md.8f89af07.lean.js" "b/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md.8f89af07.lean.js"
new file mode 100644
index 00000000..a3ce837b
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.md.8f89af07.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/基础复习二.md","filePath":"FrontEnd/JavaScript/基础复习二.md"}'),p={name:"FrontEnd/JavaScript/基础复习二.md"},o=l("",59),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\345\270\270\350\247\201\347\256\227\346\263\225.md.0cd56de3.js" "b/assets/FrontEnd_JavaScript_\345\270\270\350\247\201\347\256\227\346\263\225.md.0cd56de3.js"
new file mode 100644
index 00000000..3c20cea6
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\345\270\270\350\247\201\347\256\227\346\263\225.md.0cd56de3.js"
@@ -0,0 +1,1683 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/常见算法.md","filePath":"FrontEnd/JavaScript/常见算法.md"}'),p={name:"FrontEnd/JavaScript/常见算法.md"},o=l(`<h2 id="括号匹配" tabindex="-1">括号匹配 <a class="header-anchor" href="#括号匹配" aria-label="Permalink to &quot;括号匹配&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{[]}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//true</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{[[]}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//false</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{[]}[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//false</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str4</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{[()]}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//true</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{[]}</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//true</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{[[]}</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{[]}[</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str4</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{[()]}</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//true</span></span></code></pre></div><p><strong>解决方案：</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方案一：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isValid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  	</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  	</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">)</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#666666;">            </span><span style="color:#758575DD;">//栈顶出栈的左括号 !== map取出右括号匹配的括号类型</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">pop</span><span style="color:#666666;">())</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// arr数组已全部匹配，出完栈</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方案二：</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isMatched</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">top</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">charAt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">top</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">}</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">[</span><span style="color:#BD976A;">top</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">{</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">pop</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">top</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">]</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">[</span><span style="color:#BD976A;">top</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">pop</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">top</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">)</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">[</span><span style="color:#BD976A;">top</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">pop</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">top</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方案一：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isValid</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  	</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">  	</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">)</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">}</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">]</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//栈顶出栈的左括号 !== map取出右括号匹配的括号类型</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">pop</span><span style="color:#999999;">())</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">                </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// arr数组已全部匹配，出完栈</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方案二：</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isMatched</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">top</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">charAt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">top</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">}</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">[</span><span style="color:#B07D48;">top</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">{</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">pop</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">top</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">]</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">[</span><span style="color:#B07D48;">top</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">pop</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">top</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ch</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">)</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">[</span><span style="color:#B07D48;">top</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">pop</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">top</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>解析：</p><ul><li>利用栈来实现括号匹配，用 <code>top</code> 标识栈顶元素的下标，初始值为 <code>-1</code>。</li><li>遍历字符串中的每个字符 <code>ch</code>。</li><li>如果是左括号 <code>{</code>、<code>[</code> 或 <code>(</code>，则入栈。</li><li>如果是右括号 <code>}</code>、<code>]</code> 或 <code>)</code>，则判断栈顶元素是否匹配，如果匹配则出栈，否则不匹配。</li><li>如果字符不是括号，则返回 <code>false</code>。</li><li>最后，如果栈为空说明所有括号都匹配，返回 <code>true</code>，否则不匹配返回 <code>false</code>。</li></ul><h2 id="简单递归" tabindex="-1">简单递归 <a class="header-anchor" href="#简单递归" aria-label="Permalink to &quot;简单递归&quot;">​</a></h2><h3 id="计算阶乘" tabindex="-1">计算阶乘 <a class="header-anchor" href="#计算阶乘" aria-label="Permalink to &quot;计算阶乘&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">factorial</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">factorial</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">factorial</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#59873A;">factorial</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="2"><li>计算斐波那契数列（Fibonacci）</li></ol><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="扁平化数组" tabindex="-1">扁平化数组 <a class="header-anchor" href="#扁平化数组" aria-label="Permalink to &quot;扁平化数组&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//ES6的flat方法实现：</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flatten</span><span style="color:#666666;">(</span><span style="color:#BD976A;">array</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#80A665;">flat</span><span style="color:#666666;">(</span><span style="color:#4D9375;">Infinity</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//仅限二维数组</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">concat</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">([],</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">8</span><span style="color:#666666;">]]</span></span>
+<span class="line"><span style="color:#80A665;">flat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">array1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">//多维数组</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flatplus</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">some</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Array</span><span style="color:#666666;">)){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">concat</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">([],</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">]]]]</span></span>
+<span class="line"><span style="color:#80A665;">flatplus</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//[2, 3, 4, 5, 6, 7]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//可控制扁平化深度：Array.prototype.concat.apply</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flatplus</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">depth</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">flag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">some</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Array</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">deep</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">depth</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">flag</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">concat</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">([],</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">++</span><span style="color:#BD976A;">deep</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//递归+concat</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">flatten</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#80A665;">flatten</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//ES6的flat方法实现：</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flatten</span><span style="color:#999999;">(</span><span style="color:#B07D48;">array</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#59873A;">flat</span><span style="color:#999999;">(</span><span style="color:#1E754F;">Infinity</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//仅限二维数组</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">concat</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">([],</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">8</span><span style="color:#999999;">]]</span></span>
+<span class="line"><span style="color:#59873A;">flat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">array1</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">//多维数组</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flatplus</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">some</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">)){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">concat</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">([],</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">7</span><span style="color:#999999;">]]]]</span></span>
+<span class="line"><span style="color:#59873A;">flatplus</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//[2, 3, 4, 5, 6, 7]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//可控制扁平化深度：Array.prototype.concat.apply</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flatplus</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">depth</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deep</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">flag</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">some</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">deep</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">depth</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">flag</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">concat</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">([],</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">++</span><span style="color:#B07D48;">deep</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//递归+concat</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">flatten</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#59873A;">flatten</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]));</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="反转字符串" tabindex="-1">反转字符串 <a class="header-anchor" href="#反转字符串" aria-label="Permalink to &quot;反转字符串&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//解法一：使用数组的reverse()方法</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">reverse</span><span style="color:#666666;">().</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//解法二：使用for循环遍历字符串</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">--</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//解法三：使用递归函数</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//解法一：使用数组的reverse()方法</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">reverse</span><span style="color:#999999;">().</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//解法二：使用for循环遍历字符串</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">--</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//解法三：使用递归函数</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="求最大公约数" tabindex="-1">求最大公约数 <a class="header-anchor" href="#求最大公约数" aria-label="Permalink to &quot;求最大公约数&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">gcd</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">gcd</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">gcd</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">gcd</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="斐波那契数列" tabindex="-1">斐波那契数列 <a class="header-anchor" href="#斐波那契数列" aria-label="Permalink to &quot;斐波那契数列&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//递归实现</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">&lt;=</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//动态规划实现</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#666666;">&lt;=</span><span style="color:#BD976A;">n</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">f</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">f</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">f</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">f</span><span style="color:#666666;">[</span><span style="color:#BD976A;">n</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//测试</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">=</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#666666;">&lt;=</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">fibonacci(</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">i</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">): </span><span style="color:#666666;">\${</span><span style="color:#80A665;">fibonacci</span><span style="color:#666666;">(</span><span style="color:#C98A7D;">i</span><span style="color:#666666;">)</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//输出：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//递归实现</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">&lt;=</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//动态规划实现</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">=</span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#999999;">&lt;=</span><span style="color:#B07D48;">n</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">f</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">f</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">f</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">2</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">f</span><span style="color:#999999;">[</span><span style="color:#B07D48;">n</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//测试</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">=</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#999999;">&lt;=</span><span style="color:#2F798A;">10</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">fibonacci(</span><span style="color:#999999;">\${</span><span style="color:#B56959;">i</span><span style="color:#999999;">}</span><span style="color:#B56959;">): </span><span style="color:#999999;">\${</span><span style="color:#59873A;">fibonacci</span><span style="color:#999999;">(</span><span style="color:#B56959;">i</span><span style="color:#999999;">)</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//输出：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="排序算法" tabindex="-1">排序算法 <a class="header-anchor" href="#排序算法" aria-label="Permalink to &quot;排序算法&quot;">​</a></h2><h3 id="冒泡排序" tabindex="-1">冒泡排序 <a class="header-anchor" href="#冒泡排序" aria-label="Permalink to &quot;冒泡排序&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bubbleSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#758575DD;">/*</span></span>
+<span class="line"><span style="color:#758575DD;">            不使用额外变量交换</span></span>
+<span class="line"><span style="color:#758575DD;">            方法一：</span></span>
+<span class="line"><span style="color:#758575DD;">            [arr[j+1],arr[j]] = [arr[j],arr[j+1]]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">            方法二：</span></span>
+<span class="line"><span style="color:#758575DD;">            a = a + b;</span></span>
+<span class="line"><span style="color:#758575DD;">            b = a - b;</span></span>
+<span class="line"><span style="color:#758575DD;">            a = a - b;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">            方法三：</span></span>
+<span class="line"><span style="color:#758575DD;">            a = a ^ b;</span></span>
+<span class="line"><span style="color:#758575DD;">            b = a ^ b;</span></span>
+<span class="line"><span style="color:#758575DD;">            a = a ^ b;</span></span>
+<span class="line"><span style="color:#758575DD;">            */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bubbleSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A0ADA0;">/*</span></span>
+<span class="line"><span style="color:#A0ADA0;">            不使用额外变量交换</span></span>
+<span class="line"><span style="color:#A0ADA0;">            方法一：</span></span>
+<span class="line"><span style="color:#A0ADA0;">            [arr[j+1],arr[j]] = [arr[j],arr[j+1]]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">            方法二：</span></span>
+<span class="line"><span style="color:#A0ADA0;">            a = a + b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            b = a - b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            a = a - b;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">            方法三：</span></span>
+<span class="line"><span style="color:#A0ADA0;">            a = a ^ b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            b = a ^ b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            a = a ^ b;</span></span>
+<span class="line"><span style="color:#A0ADA0;">            */</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="选择排序" tabindex="-1">选择排序 <a class="header-anchor" href="#选择排序" aria-label="Permalink to &quot;选择排序&quot;">​</a></h3><p><a href="https://visualgo.net/en" target="_blank" rel="noreferrer"><strong>排序动画图解</strong></a></p><p><strong>随机生成测试数组</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">testArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10000</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">testArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100000</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">testArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10000</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">     </span><span style="color:#B07D48;">testArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100000</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">9</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">8</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">selectSort</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">is not Array</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">minIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//找到arr[i]后的最小值得索引</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">minIndex</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">minIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//交换</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tem</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">minIndex</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">minIndex</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tem</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">7</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">9</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">8</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">selectSort</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">is not Array</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">minIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//找到arr[i]后的最小值得索引</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">minIndex</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">minIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//交换</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tem</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">minIndex</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">minIndex</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tem</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="快速排序" tabindex="-1">快速排序 <a class="header-anchor" href="#快速排序" aria-label="Permalink to &quot;快速排序&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">quickSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pivotIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">	</span><span style="color:#758575DD;">//选中心轴索引，并选取中心轴的值</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pivot</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">splice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pivotIndex</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span><span style="color:#DBD7CAEE;">　　</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span><span style="color:#DBD7CAEE;">　　</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span><span style="color:#DBD7CAEE;">　</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">　　　　</span></span>
+<span class="line highlighted"><span style="color:#666666;">        </span><span style="color:#758575DD;">//与中心轴比较，小的放在左数组，大的放在右数组　</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">     	</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pivot</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">left</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">right</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">　　</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">quickSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">left</span><span style="color:#666666;">).</span><span style="color:#80A665;">concat</span><span style="color:#666666;">([</span><span style="color:#BD976A;">pivot</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">quickSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">right</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">quickSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pivotIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">	</span><span style="color:#A0ADA0;">//选中心轴索引，并选取中心轴的值</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pivot</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">splice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pivotIndex</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span><span style="color:#393A34;">　　</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span><span style="color:#393A34;">　　</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span><span style="color:#393A34;">　</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;">　　　　</span></span>
+<span class="line highlighted"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//与中心轴比较，小的放在左数组，大的放在右数组　</span></span>
+<span class="line highlighted"><span style="color:#393A34;">     	</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pivot</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">left</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">right</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;">　　</span></span>
+<span class="line highlighted"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">quickSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">left</span><span style="color:#999999;">).</span><span style="color:#59873A;">concat</span><span style="color:#999999;">([</span><span style="color:#B07D48;">pivot</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#59873A;">quickSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">right</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div><h3 id="插入排序" tabindex="-1">插入排序 <a class="header-anchor" href="#插入排序" aria-label="Permalink to &quot;插入排序&quot;">​</a></h3><p>以第一个数为有序数组，让后面每一个数比较找位置并插入有序数组里。</p><p>若后面待插入的数大于有序数组的最后一个数，就放在原位；</p><p>若第小于有序数组的最后一个数，则进入while循环，在有序数组中找位置：</p><p><code>arr[preIndex]</code>后移索引变为<code>preIndex+1</code>，<code>current</code>插入到<code>arr[preIndex]</code>前一位，也就是<code>arr[preindex-1+1]</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">insertSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">preIndex</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">preIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//  while (preIndex &gt;= 0 &amp;&amp; current &lt; arr[preIndex]) {//从大到小</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">preIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">preIndex</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//从小到大</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">preIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">preIndex</span><span style="color:#666666;">];</span><span style="color:#758575DD;">//后移</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">preIndex</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#758575DD;">//退出while循环时，说明插入位置找到</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">preIndex</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">insertSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">preIndex</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">preIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//  while (preIndex &gt;= 0 &amp;&amp; current &lt; arr[preIndex]) {//从大到小</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">preIndex</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">preIndex</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//从小到大</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">preIndex</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">preIndex</span><span style="color:#999999;">];</span><span style="color:#A0ADA0;">//后移</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">preIndex</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#A0ADA0;">//退出while循环时，说明插入位置找到</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">preIndex</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="希尔排序" tabindex="-1">希尔排序 <a class="header-anchor" href="#希尔排序" aria-label="Permalink to &quot;希尔排序&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">shellSort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">array</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 把距离为 gap 的元素编为一个组，扫描所有组</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#666666;">            </span><span style="color:#758575DD;">// 对距离为 gap 的元素组进行排序</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">];</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">];</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">array</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">gap</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">temp</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">gap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">gap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 减小增量</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">shellSort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">array</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 把距离为 gap 的元素编为一个组，扫描所有组</span></span>
+<span class="line highlighted"><span style="color:#393A34;">        </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"></span>
+<span class="line highlighted"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">// 对距离为 gap 的元素组进行排序</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">];</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line highlighted"><span style="color:#393A34;">                </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">];</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line highlighted"><span style="color:#393A34;">            </span><span style="color:#B07D48;">array</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">gap</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">temp</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">gap</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">gap</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 减小增量</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="求两个有序数组的中位数" tabindex="-1">求两个有序数组的中位数 <a class="header-anchor" href="#求两个有序数组的中位数" aria-label="Permalink to &quot;求两个有序数组的中位数&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//出这两个有序数组的中位数,时间复杂度为 O(m+n)</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">findMedianSortedArrays</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mergeArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">merge</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 合并两个有序数组</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mergeArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 判断合并后的数组长度，分奇偶情况求中位数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">mergeArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">len</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mergeArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">len</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">])</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mergeArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">len</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 归并排序合并两个有序数组</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">merge</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//出这两个有序数组的中位数,时间复杂度为 O(m+n)</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">findMedianSortedArrays</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mergeArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">merge</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 合并两个有序数组</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mergeArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 判断合并后的数组长度，分奇偶情况求中位数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">mergeArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">len</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">2</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mergeArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">len</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">2</span><span style="color:#999999;">])</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mergeArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">len</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 归并排序合并两个有序数组</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">merge</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">findMedianSortedArrays</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">merge</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">merged</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#666666;">)];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">merge</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nums1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">mid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">merged</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">merged</span><span style="color:#666666;">[</span><span style="color:#BD976A;">mid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">[</span><span style="color:#BD976A;">mid</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">merged</span><span style="color:#666666;">[</span><span style="color:#BD976A;">mid</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">findMedianSortedArrays</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">merge</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">merged</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#999999;">)];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">merge</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nums1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">mid</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">merged</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">merged</span><span style="color:#999999;">[</span><span style="color:#B07D48;">mid</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">[</span><span style="color:#B07D48;">mid</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">merged</span><span style="color:#999999;">[</span><span style="color:#B07D48;">mid</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="实现eventemitter" tabindex="-1">实现EventEmitter <a class="header-anchor" href="#实现eventemitter" aria-label="Permalink to &quot;实现EventEmitter&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//可以添加事件侦听器，触发事件，并处理异步事件</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">EventEmitter</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">listener</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">].</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">listener</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">registry</span><span style="color:#666666;">[</span><span style="color:#BD976A;">eventName</span><span style="color:#666666;">].</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">listener</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">listener</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//可以添加事件侦听器，触发事件，并处理异步事件</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">EventEmitter</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">listener</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">].</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">listener</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">registry</span><span style="color:#999999;">[</span><span style="color:#B07D48;">eventName</span><span style="color:#999999;">].</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">listener</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">listener</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>测试</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">eventEmitter</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">EventEmitter</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">eventEmitter</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventA</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventA triggered</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#BD976A;">eventEmitter</span><span style="color:#666666;">.</span><span style="color:#80A665;">on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventB</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventB triggered</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">eventEmitter</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventA</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">eventEmitter</span><span style="color:#666666;">.</span><span style="color:#80A665;">emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">eventB</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">eventEmitter</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">EventEmitter</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">eventEmitter</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventA</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventA triggered</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#B07D48;">eventEmitter</span><span style="color:#999999;">.</span><span style="color:#59873A;">on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventB</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventB triggered</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">eventEmitter</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventA</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">eventEmitter</span><span style="color:#999999;">.</span><span style="color:#59873A;">emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">eventB</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span></code></pre></div></details><h2 id="生成随机十六进制颜色" tabindex="-1"><a href="https://css-tricks.com/snippets/javascript/random-hex-color/" target="_blank" rel="noreferrer">生成随机十六进制颜色</a> <a class="header-anchor" href="#生成随机十六进制颜色" aria-label="Permalink to &quot;[生成随机十六进制颜色](https://css-tricks.com/snippets/javascript/random-hex-color/)&quot;">​</a></h2><p>方案一：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">red</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">256</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">green</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">256</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">256</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">red</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">green</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">red</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">256</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">green</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">256</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">256</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">red</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">green</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案二：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16777215</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">#</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">color</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16777215</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">#</span><span style="color:#999999;">\${</span><span style="color:#B56959;">color</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案三：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hexColor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">from</span><span style="color:#666666;">({</span><span style="color:#B8A965;">length</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">256</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hexColor</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hexColor</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">from</span><span style="color:#999999;">({</span><span style="color:#998418;">length</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">256</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hexColor</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案四：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">letters</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0123456789ABCDEF</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">letters</span><span style="color:#666666;">[</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">16</span><span style="color:#666666;">)];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">letters</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0123456789ABCDEF</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">letters</span><span style="color:#999999;">[</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">16</span><span style="color:#999999;">)];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案五：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomHexColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0xFFFFFF</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">000000</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#666666;">).</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomHexColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0xFFFFFF</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">000000</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#999999;">).</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">6</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>方案六：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0x1000000</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">).</span><span style="color:#80A665;">padStart</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">color</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0x1000000</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">).</span><span style="color:#59873A;">padStart</span><span style="color:#999999;">(</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><p>方案七：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomColor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">r</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">)).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">)).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">255</span><span style="color:#666666;">)).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">random</span><span style="color:#666666;">()).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">16</span><span style="color:#666666;">).</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">#</span><span style="color:#C98A7D99;">\`</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">r</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomColor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">r</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">)).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">g</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">)).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">255</span><span style="color:#999999;">)).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">random</span><span style="color:#999999;">()).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">16</span><span style="color:#999999;">).</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">#</span><span style="color:#B5695999;">\`</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">r</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">g</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="返回给定起止字符串月份中间所有月份" tabindex="-1">返回给定起止字符串月份中间所有月份 <a class="header-anchor" href="#返回给定起止字符串月份中间所有月份" aria-label="Permalink to &quot;返回给定起止字符串月份中间所有月份&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getMonths</span><span style="color:#666666;">(</span><span style="color:#BD976A;">start</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">end</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startDate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#BD976A;">start</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">endDate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#BD976A;">end</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">months</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">startDate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">endDate</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">year</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startDate</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFullYear</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">month</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startDate</span><span style="color:#666666;">.</span><span style="color:#80A665;">getMonth</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">monthStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">year</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">-</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">month</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">().</span><span style="color:#80A665;">padStart</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  	</span><span style="color:#BD976A;">months</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">monthStr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">startDate</span><span style="color:#666666;">.</span><span style="color:#80A665;">setMonth</span><span style="color:#666666;">(</span><span style="color:#BD976A;">month</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">months</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getMonths</span><span style="color:#999999;">(</span><span style="color:#B07D48;">start</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">end</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startDate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B07D48;">start</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">endDate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B07D48;">end</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">months</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">startDate</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">endDate</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">year</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startDate</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFullYear</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">month</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startDate</span><span style="color:#999999;">.</span><span style="color:#59873A;">getMonth</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">monthStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">\${</span><span style="color:#B56959;">year</span><span style="color:#999999;">}</span><span style="color:#B56959;">-</span><span style="color:#999999;">\${</span><span style="color:#B56959;">month</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">().</span><span style="color:#59873A;">padStart</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  	</span><span style="color:#B07D48;">months</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">monthStr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">startDate</span><span style="color:#999999;">.</span><span style="color:#59873A;">setMonth</span><span style="color:#999999;">(</span><span style="color:#B07D48;">month</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">months</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="实现promise的all方法" tabindex="-1">实现Promise的all方法 <a class="header-anchor" href="#实现promise的all方法" aria-label="Permalink to &quot;实现Promise的all方法&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">promiseAll</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promiseArr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promiseArr</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TypeError</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">arguments should be an array</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// let count = 0;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// for (let i = 0; i &lt; promiseArr.length; i++) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   promiseArr[i]</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     .then((res) =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       count++;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       resArr[i] = res;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       if (count === promiseArr.length) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         resolve(resArr);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       }</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     })</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     .catch((err) =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       reject(err);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     });</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">promiseArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">p</span><span style="color:#666666;">,</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">resArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 使用示例</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2000</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">error</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">promiseAll</span><span style="color:#666666;">([</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p3</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">((</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, &quot;error&quot;]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#80A665;">catch</span><span style="color:#666666;">((</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// error</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)).</span><span style="color:#80A665;">catch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">promiseAll</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promiseArr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promiseArr</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TypeError</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">arguments should be an array</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// let count = 0;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// for (let i = 0; i &lt; promiseArr.length; i++) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   promiseArr[i]</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     .then((res) =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       count++;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       resArr[i] = res;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       if (count === promiseArr.length) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         resolve(resArr);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       }</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     })</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     .catch((err) =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       reject(err);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     });</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">promiseArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">p</span><span style="color:#999999;">,</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">resArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">     </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 使用示例</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2000</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">error</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">promiseAll</span><span style="color:#999999;">([</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p3</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">((</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, &quot;error&quot;]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#59873A;">catch</span><span style="color:#999999;">((</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// error</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)).</span><span style="color:#59873A;">catch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">))</span></span></code></pre></div><h2 id="lru缓存算法" tabindex="-1">LRU缓存算法 <a class="header-anchor" href="#lru缓存算法" aria-label="Permalink to &quot;LRU缓存算法&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//LRU缓存算法: 缓存固定大小，当缓存超出容量时，删除最久未被使用的元素</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">LRUCache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">capacity</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">capacity</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">capacity</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 缓存最大容量</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Map</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 使用Map来存储key-value</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//获取缓存中对应key的值，如果不存在则返回-1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">has</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 将访问的元素删除并重新添加到最前面</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">delete</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//添加一个元素到缓存中，并在超出容量时删除最久未被使用的元素</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 如果key已经存在，则先删除这个节点</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">has</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">delete</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">capacity</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">// 如果缓存超出容量，则删除最久未被使用的元素，即链表尾部元素</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">keys</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oldestKey</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">().</span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 链表头部是最久未使用的元素</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">delete</span><span style="color:#666666;">(</span><span style="color:#BD976A;">oldestKey</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 将新节点添加到链表头部</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//LRU缓存算法: 缓存固定大小，当缓存超出容量时，删除最久未被使用的元素</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">LRUCache</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">capacity</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">capacity</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">capacity</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 缓存最大容量</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cache</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Map</span><span style="color:#999999;">();</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 使用Map来存储key-value</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//获取缓存中对应key的值，如果不存在则返回-1</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">has</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 将访问的元素删除并重新添加到最前面</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">delete</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//添加一个元素到缓存中，并在超出容量时删除最久未被使用的元素</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 如果key已经存在，则先删除这个节点</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">has</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">delete</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">capacity</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">// 如果缓存超出容量，则删除最久未被使用的元素，即链表尾部元素</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">keys</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oldestKey</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">().</span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 链表头部是最久未使用的元素</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">delete</span><span style="color:#999999;">(</span><span style="color:#B07D48;">oldestKey</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 将新节点添加到链表头部</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>使用示例：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cache</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">LRUCache</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 缓存是 {1=1}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 缓存是 {1=1, 2=2}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 1</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 删除 key 2，缓存是 {1=1, 3=3}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 -1</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">put</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 删除 key 1，缓存是 {3=3, 4=4}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 -1</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 3</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cache</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 返回 4</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cache</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">LRUCache</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 缓存是 {1=1}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 缓存是 {1=1, 2=2}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 1</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 删除 key 2，缓存是 {1=1, 3=3}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 -1</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">put</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 删除 key 1，缓存是 {3=3, 4=4}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 -1</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 3</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cache</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 返回 4</span></span></code></pre></div><h2 id="不使用乘法符号乘法函数" tabindex="-1">不使用乘法符号乘法函数 <a class="header-anchor" href="#不使用乘法符号乘法函数" aria-label="Permalink to &quot;不使用乘法符号乘法函数&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//递归</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">y</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//for循环</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">abs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">abs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 15</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// -15</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// -15</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">multiply</span><span style="color:#666666;">(</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 15</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//递归</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">y</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//for循环</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">abs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">abs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 15</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// -15</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// -15</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">multiply</span><span style="color:#999999;">(</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">3</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 15</span></span></code></pre></div><h2 id="链表反转" tabindex="-1">链表反转 <a class="header-anchor" href="#链表反转" aria-label="Permalink to &quot;链表反转&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prev</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prev</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">prev</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prev</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//测试</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">next</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n4</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">n1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">n2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">n3</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n4</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">n4</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n5</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Original LinkedList: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#80A665;">printLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">head</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reverseLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C99076;">\\n</span><span style="color:#C98A7D;">Reversed LinkedList: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#80A665;">printLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">printLinkedList</span><span style="color:#666666;">(</span><span style="color:#BD976A;">head</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">process</span><span style="color:#666666;">.</span><span style="color:#BD976A;">stdout</span><span style="color:#666666;">.</span><span style="color:#80A665;">write</span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">next</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prev</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prev</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">prev</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prev</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//测试</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Node</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">next</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n4</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n5</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">n1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">n2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">n3</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n4</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">n4</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n5</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Original LinkedList: </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#59873A;">printLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">head</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reverseLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#A65E2B;">\\n</span><span style="color:#B56959;">Reversed LinkedList: </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#59873A;">printLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">printLinkedList</span><span style="color:#999999;">(</span><span style="color:#B07D48;">head</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">process</span><span style="color:#999999;">.</span><span style="color:#B07D48;">stdout</span><span style="color:#999999;">.</span><span style="color:#59873A;">write</span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">next</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="二叉树的遍历" tabindex="-1">二叉树的遍历 <a class="header-anchor" href="#二叉树的遍历" aria-label="Permalink to &quot;二叉树的遍历&quot;">​</a></h2><p><strong>二叉树三种遍历方式</strong>：</p><ul><li>前序遍历：先访问节点，然后再访问左子树和右子树。</li><li>中序遍历：先访问左子树，然后访问节点，最后访问右子树。</li><li>后序遍历：先访问左子树，然后访问右子树，最后访问节点。</li></ul><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 定义二叉树节点类</span></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">TreeNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 前序遍历</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">preOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">root</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">val</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">preOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">preOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 中序遍历</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">inOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">root</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">inOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">val</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">inOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 后序遍历</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">postOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">root</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">postOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">postOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">val</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 定义二叉树节点类</span></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">TreeNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 前序遍历</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">preOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">root</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">val</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">preOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">preOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 中序遍历</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">inOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">root</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">inOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">val</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">inOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 后序遍历</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">postOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">root</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">postOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">postOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">val</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>测试</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/* ------------- 测试 -------------- */</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//     1</span></span>
+<span class="line"><span style="color:#758575DD;">//   /   \\</span></span>
+<span class="line"><span style="color:#758575DD;">//  2     3</span></span>
+<span class="line"><span style="color:#758575DD;">// / \\   / \\</span></span>
+<span class="line"><span style="color:#758575DD;">//4   5 6   7</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">root</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TreeNode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">preOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">// [1, 2, 4, 5, 3, 6, 7]</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">inOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">// [4, 2, 5, 1, 6, 3, 7]</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">postOrderTraversal</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// [4, 5, 2, 6, 7, 3, 1]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/* ------------- 测试 -------------- */</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//     1</span></span>
+<span class="line"><span style="color:#A0ADA0;">//   /   \\</span></span>
+<span class="line"><span style="color:#A0ADA0;">//  2     3</span></span>
+<span class="line"><span style="color:#A0ADA0;">// / \\   / \\</span></span>
+<span class="line"><span style="color:#A0ADA0;">//4   5 6   7</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">6</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">root</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TreeNode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">7</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">preOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">));</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">// [1, 2, 4, 5, 3, 6, 7]</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">inOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">));</span><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">// [4, 2, 5, 1, 6, 3, 7]</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">postOrderTraversal</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">));</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// [4, 5, 2, 6, 7, 3, 1]</span></span></code></pre></div></details><h2 id="二叉搜索树的插入和查找" tabindex="-1">二叉搜索树的插入和查找 <a class="header-anchor" href="#二叉搜索树的插入和查找" aria-label="Permalink to &quot;二叉搜索树的插入和查找&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">递归实现</span><span style="color:#DBD7CAEE;">：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">BST</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">insert</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">insertNode</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">insertNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">insertNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">insertNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">searchNode</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">searchNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">searchNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">searchNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">循环实现</span><span style="color:#DBD7CAEE;">：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">BST</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">insert</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Node</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNode</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">BST</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">root</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">current</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">current</span><span style="color:#666666;">.</span><span style="color:#BD976A;">right</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">递归实现</span><span style="color:#393A34;">：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">BST</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">insert</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">insertNode</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">insertNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">insertNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">insertNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">search</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">searchNode</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">searchNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">searchNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">searchNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">循环实现</span><span style="color:#393A34;">：</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">BST</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">insert</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Node</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNode</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">BST</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">search</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">root</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">current</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">current</span><span style="color:#999999;">.</span><span style="color:#B07D48;">right</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div><h2 id="字符串搜索算法" tabindex="-1">字符串搜索算法 <a class="header-anchor" href="#字符串搜索算法" aria-label="Permalink to &quot;字符串搜索算法&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//KMP算法是一种高效的字符串搜索算法，在对文本串和模式串进行匹配时，通过利用前缀表来避免不必要的比较，从而实现快速匹配。</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">kmp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 构建前缀表</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prefix</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Array</span><span style="color:#666666;">(</span><span style="color:#BD976A;">m</span><span style="color:#666666;">).</span><span style="color:#80A665;">fill</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prefix</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">prefix</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 匹配文本串和模式串</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prefix</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">m</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//KMP算法是一种高效的字符串搜索算法，在对文本串和模式串进行匹配时，通过利用前缀表来避免不必要的比较，从而实现快速匹配。</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">kmp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 构建前缀表</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prefix</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Array</span><span style="color:#999999;">(</span><span style="color:#B07D48;">m</span><span style="color:#999999;">).</span><span style="color:#59873A;">fill</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prefix</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">prefix</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 匹配文本串和模式串</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prefix</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">m</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>在这个函数中，我们首先计算出模式串的前缀表，然后逐个字符地扫描文本串和模式串，利用前缀表来确定匹配的位置。</p><p>接下来，我们可以使用这个函数来测试一下：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hello world</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">world</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">kmp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 输出5</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hello world</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">world</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">kmp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 输出5</span></span></code></pre></div><p>在这个例子中，我们将文本串设置为“hello world”，将模式串设置为“world”，然后调用kmp函数来查找匹配位置。由于模式串出现在文本串的位置是5，所以kmp函数返回的结果也是5。</p><p>这里还可以尝试一些其他的测试用例，例如：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">abababaababacb</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ababacb</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">kmp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 输出7</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">abababaababacb</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ababacb</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">kmp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 输出7</span></span></code></pre></div><p>这个例子中，我们将文本串设置为“abababaababacb”，将模式串设置为“ababacb”，然后调用kmp函数来查找匹配位置。由于模式串出现在文本串的位置是7，所以kmp函数返回的结果也是7。</p><p>总之，KMP算法是一种高效的字符串搜索算法，通过利用前缀表来避免不必要的比较，能够快速地查找匹配位置。</p><h2 id="数字转中文" tabindex="-1">数字转中文 <a class="header-anchor" href="#数字转中文" aria-label="Permalink to &quot;数字转中文&quot;">​</a></h2><p><strong>方法一：</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">numberToChinese</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">(</span><span style="color:#E6CC77;">\\-</span><span style="color:#CB7676;">|</span><span style="color:#E6CC77;">\\+</span><span style="color:#666666;">)</span><span style="color:#CB7676;">?</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">*</span><span style="color:#666666;">(</span><span style="color:#E6CC77;">\\.</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">*</span><span style="color:#666666;">)</span><span style="color:#CB7676;">?</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">不是一个合法的数字！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">digitMap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">plain</span><span style="color:#666666;">:[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">一</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">二</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">三</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">四</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">五</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">六</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">七</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">八</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">九</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">upper</span><span style="color:#666666;">:[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">壹</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">贰</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">叁</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">肆</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">伍</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">陆</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">柒</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">捌</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">玖</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unitMap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">plain</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">元</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">万</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">亿</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">十</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">百</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">千</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">upper</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">元</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">萬</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">億</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">拾</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">佰</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">仟</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ustr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">upper</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">plain</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">head</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">负</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unitMap</span><span style="color:#666666;">[</span><span style="color:#BD976A;">ustr</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">abs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">].</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currUnit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">].</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#BD976A;">digitMap</span><span style="color:#666666;">[</span><span style="color:#BD976A;">ustr</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">currUnit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">][</span><span style="color:#BD976A;">j</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currUnit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">floor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">currUnit</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">零</span><span style="color:#C99076;">.</span><span style="color:#666666;">)</span><span style="color:#CB7676;">*</span><span style="color:#C4704F;">零</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">).</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">][</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">result</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">億零</span><span style="color:#CB7676;">{0,3}</span><span style="color:#C4704F;">萬</span><span style="color:#C98A7D99;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">亿零</span><span style="color:#CB7676;">{0,3}</span><span style="color:#C4704F;">万</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lastres</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">head</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">result</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">零</span><span style="color:#C99076;">.</span><span style="color:#666666;">)</span><span style="color:#CB7676;">*</span><span style="color:#C4704F;">零元</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">元</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">零</span><span style="color:#C99076;">.</span><span style="color:#666666;">)</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">upper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">億</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">亿</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#C4704F;">零</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lastres</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">numberToChinese</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upper</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">(</span><span style="color:#BDA437;">\\-</span><span style="color:#AB5959;">|</span><span style="color:#BDA437;">\\+</span><span style="color:#999999;">)</span><span style="color:#AB5959;">?</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">*</span><span style="color:#999999;">(</span><span style="color:#BDA437;">\\.</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">*</span><span style="color:#999999;">)</span><span style="color:#AB5959;">?</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">不是一个合法的数字！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">digitMap</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">plain</span><span style="color:#999999;">:[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">一</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">二</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">三</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">四</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">五</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">六</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">七</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">八</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">九</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">upper</span><span style="color:#999999;">:[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">壹</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">贰</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">叁</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">肆</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">伍</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">陆</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">柒</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">捌</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">玖</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unitMap</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">plain</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">元</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">万</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">亿</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">十</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">百</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">千</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">upper</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">元</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">萬</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">億</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">拾</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">佰</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">仟</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ustr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upper</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">upper</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">plain</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">head</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">负</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unitMap</span><span style="color:#999999;">[</span><span style="color:#B07D48;">ustr</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">abs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">].</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currUnit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">].</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B07D48;">digitMap</span><span style="color:#999999;">[</span><span style="color:#B07D48;">ustr</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">currUnit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">d</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">][</span><span style="color:#B07D48;">j</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currUnit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">floor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">currUnit</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">零</span><span style="color:#A65E2B;">.</span><span style="color:#999999;">)</span><span style="color:#AB5959;">*</span><span style="color:#AB5E3F;">零</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">).</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">][</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">result</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upper</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">億零</span><span style="color:#AB5959;">{0,3}</span><span style="color:#AB5E3F;">萬</span><span style="color:#B5695999;">/</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">亿零</span><span style="color:#AB5959;">{0,3}</span><span style="color:#AB5E3F;">万</span><span style="color:#B5695999;">/</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lastres</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">head</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">result</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">零</span><span style="color:#A65E2B;">.</span><span style="color:#999999;">)</span><span style="color:#AB5959;">*</span><span style="color:#AB5E3F;">零元</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">元</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">零</span><span style="color:#A65E2B;">.</span><span style="color:#999999;">)</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">upper</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">億</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">亿</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#AB5E3F;">零</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lastres</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>方法二：</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">numberToChinese</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//数字超过999999999999则报错</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">().</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">12</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">数字过大，无法转换</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bunits</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">万</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">亿</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//把数字转换成字符串，四位一组，从后往前分割</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">numStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">reverse</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">{1,4}</span><span style="color:#666666;">)</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">,</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">reverse</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">,</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">numStr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">transform</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">carr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">一</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">二</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">三</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">四</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">五</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">六</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">七</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">八</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">九</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">units</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">十</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">百</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">千</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">digit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">str</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">char</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">carr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">digit</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">units</span><span style="color:#666666;">[</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">digit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//如果是0，且不是最后一位不是零，则加零，并且不加单位</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">[</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">char</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">char</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">[</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">part</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">numStr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">transform</span><span style="color:#666666;">(</span><span style="color:#BD976A;">part</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bunits</span><span style="color:#666666;">[</span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">cstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">unit</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">cstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">startsWith</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">一十</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">cstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cstr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//大写中文</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bigChinese</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">map</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">={</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">零</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">一</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">壹</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">二</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">贰</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">三</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">叁</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">四</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">肆</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">五</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">伍</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">六</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">陆</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">七</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">柒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">八</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">捌</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">九</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">玖</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">十</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">拾</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">百</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">佰</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">千</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">仟</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">万</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">萬</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">亿</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">億</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">s</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">numberToChinese</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">s</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">map</span><span style="color:#666666;">[</span><span style="color:#BD976A;">item</span><span style="color:#666666;">]).</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bigChinese</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1000100001</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//拾億零壹拾萬零壹</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ n ]-66</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">numberToChinese</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//数字超过999999999999则报错</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">().</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">12</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">数字过大，无法转换</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bunits</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">万</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">亿</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//把数字转换成字符串，四位一组，从后往前分割</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">numStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">reverse</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">{1,4}</span><span style="color:#999999;">)</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">,</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">reverse</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">,</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">numStr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">transform</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">carr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">一</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">二</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">三</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">四</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">五</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">六</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">七</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">八</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">九</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">units</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">十</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">百</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">千</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">digit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">str</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">char</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">carr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">digit</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">units</span><span style="color:#999999;">[</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">digit</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//如果是0，且不是最后一位不是零，则加零，并且不加单位</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">[</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">char</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">char</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">[</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">part</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">numStr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">transform</span><span style="color:#999999;">(</span><span style="color:#B07D48;">part</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bunits</span><span style="color:#999999;">[</span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">cstr</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">unit</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">cstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">startsWith</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">一十</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">cstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cstr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//大写中文</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bigChinese</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">map</span><span style="color:#393A34;"> </span><span style="color:#999999;">={</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">零</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">一</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">壹</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">二</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">贰</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">三</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">叁</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">四</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">肆</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">五</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">伍</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">六</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">陆</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">七</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">柒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">八</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">捌</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">九</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">玖</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">十</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">拾</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">百</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">佰</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">千</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">仟</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">万</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">萬</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">亿</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">億</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">s</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">numberToChinese</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">s</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">map</span><span style="color:#999999;">[</span><span style="color:#B07D48;">item</span><span style="color:#999999;">]).</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bigChinese</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1000100001</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//拾億零壹拾萬零壹</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ n ]-66</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#999999;">)</span></span></code></pre></div>`,92),e=[o];function t(c,r,y,A,D,B){return n(),a("div",null,e)}const i=s(p,[["render",t]]);export{C as __pageData,i as default};
diff --git "a/assets/FrontEnd_JavaScript_\345\270\270\350\247\201\347\256\227\346\263\225.md.0cd56de3.lean.js" "b/assets/FrontEnd_JavaScript_\345\270\270\350\247\201\347\256\227\346\263\225.md.0cd56de3.lean.js"
new file mode 100644
index 00000000..3a742028
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\345\270\270\350\247\201\347\256\227\346\263\225.md.0cd56de3.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/常见算法.md","filePath":"FrontEnd/JavaScript/常见算法.md"}'),p={name:"FrontEnd/JavaScript/常见算法.md"},o=l("",92),e=[o];function t(c,r,y,A,D,B){return n(),a("div",null,e)}const i=s(p,[["render",t]]);export{C as __pageData,i as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\211\213\345\206\231Promise.md.fbddbbf5.js" "b/assets/FrontEnd_JavaScript_\346\211\213\345\206\231Promise.md.fbddbbf5.js"
new file mode 100644
index 00000000..014e3895
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\211\213\345\206\231Promise.md.fbddbbf5.js"
@@ -0,0 +1,1149 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/手写Promise.md","filePath":"FrontEnd/JavaScript/手写Promise.md"}'),p={name:"FrontEnd/JavaScript/手写Promise.md"},o=l(`<h2 id="一、声名promise并绑定this" tabindex="-1">一、声名Promise并绑定this <a class="header-anchor" href="#一、声名promise并绑定this" aria-label="Permalink to &quot;一、声名Promise并绑定this&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PENDING</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pending</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">FUFILLED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fulfilled</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">REJECTED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">rejected</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">executor</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// 绑定this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">executor</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reject</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 3.成功状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FUFILLED</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 4.失败状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reason</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PENDING</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pending</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">FUFILLED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fulfilled</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">REJECTED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">rejected</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">executor</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//初始态</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// 绑定this</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">executor</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reject</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 3.成功状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FUFILLED</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 4.失败状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reason</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>问题一：能多次修改状态</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;!</span><span style="color:#4D9375;">DOCTYPE</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">html</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">head</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">title</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">My-Promise</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">title</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">    &lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./Promise.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">head</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">body</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">    &lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">大功告成！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">一败涂地！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">body</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">html</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;!</span><span style="color:#1E754F;">DOCTYPE</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">html</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">head</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">title</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">My-Promise</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">title</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">    &lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./Promise.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">head</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">body</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">    &lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">大功告成！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">一败涂地！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">body</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">html</span><span style="color:#999999;">&gt;</span></span></code></pre></div><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/codepic/20210708162731.png"><h2 id="二、状态保护与执行者异步捕获" tabindex="-1">二、状态保护与执行者异步捕获 <a class="header-anchor" href="#二、状态保护与执行者异步捕获" aria-label="Permalink to &quot;二、状态保护与执行者异步捕获&quot;">​</a></h2><blockquote><p>改变状态前先判断，让初始状态只能修改一次</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PENDING</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pending</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">FUFILLED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fulfilled</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">REJECTED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">rejected</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">executor</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// 绑定this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">executor</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reject</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 3.成功状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//判断是不是初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FUFILLED</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 4.失败状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//判断是不是初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reason</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PENDING</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pending</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">FUFILLED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fulfilled</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">REJECTED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">rejected</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">executor</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//初始态</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// 绑定this</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">executor</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reject</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 3.成功状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//判断是不是初始态</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FUFILLED</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 4.失败状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//判断是不是初始态</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reason</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="三、then方法构建" tabindex="-1">三、then方法构建 <a class="header-anchor" href="#三、then方法构建" aria-label="Permalink to &quot;三、then方法构建&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FUFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FUFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="四、实现then异步" tabindex="-1">四、实现then异步 <a class="header-anchor" href="#四、实现then异步" aria-label="Permalink to &quot;四、实现then异步&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FUFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FUFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="五、解决同步代码需要等待执行问题" tabindex="-1">五、解决同步代码需要等待执行问题 <a class="header-anchor" href="#五、解决同步代码需要等待执行问题" aria-label="Permalink to &quot;五、解决同步代码需要等待执行问题&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// resolve(&#39;大功告成！&#39;)S</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">一败涂地！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">反败为胜！</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">p1</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">((</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">同步代码</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// resolve(&#39;大功告成！&#39;)S</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">一败涂地！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">反败为胜！</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">p1</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">((</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">同步代码</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span></code></pre></div><blockquote><p>解决前输出： 同步代码 一败涂地！ 反败为胜！</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">callback</span><span style="color:#666666;">.</span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">callback</span><span style="color:#666666;">.</span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">callback</span><span style="color:#999999;">.</span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">callback</span><span style="color:#999999;">.</span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>解决后输出： 同步代码 反败为胜！ 一败涂地！</p></blockquote><h2 id="六、then的链式操作" tabindex="-1">六、then的链式操作 <a class="header-anchor" href="#六、then的链式操作" aria-label="Permalink to &quot;六、then的链式操作&quot;">​</a></h2><blockquote><p><strong>注意点：</strong></p><ol><li>then返回的时Promise，Promise需要改变</li><li>之前的Promise状态并不会影响之后的Promise状态</li></ol></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">大功告成！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// reject(&quot;一败涂地！&quot;);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">状态绑定成功！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">马到功成！</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">优胜劣败！</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">同步代码</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">大功告成！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// reject(&quot;一败涂地！&quot;);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">状态绑定成功！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">马到功成！</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">优胜劣败！</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">同步代码</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//then的穿透处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">         </span><span style="color:#758575DD;">//then的穿透处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//解决异常</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//解决异常</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//then的穿透处理</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">         </span><span style="color:#A0ADA0;">//then的穿透处理</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//解决异常</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//解决异常</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>执行结果：</strong></p><img src="https://gitee.com/GiteeFXJ/picstore/raw/master/codepic/20210708174000.png"><h2 id="七、返回值的判断与处理" tabindex="-1">七、返回值的判断与处理 <a class="header-anchor" href="#七、返回值的判断与处理" aria-label="Permalink to &quot;七、返回值的判断与处理&quot;">​</a></h2><blockquote><p>判断并分别处理返回值为Promise、普通值的情况</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">// 判断并处理返回值 </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">// 判断并处理返回值 </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">// 判断并处理返回值 </span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">// 判断并处理返回值 </span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="八、代码优化及复用" tabindex="-1">八、代码优化及复用 <a class="header-anchor" href="#八、代码优化及复用" aria-label="Permalink to &quot;八、代码优化及复用&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// try {</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     let result = onFulfilled(value);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     resolve(result);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     reject(error);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// try {</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     let result = onRejected(value);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     resolve(result);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     //解决异常</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//     reject(error);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// try {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     let result = onFulfilled(this.value);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     // resolve(result)</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     if (result instanceof Promise) {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//         result.then(resolve, reject);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     } else {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//         resolve(result);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     }</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     reject(error);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// try {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     let result = onRejected(this.value);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     if (result instanceof Promise) {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//         result.then(resolve, reject);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     } else {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//         resolve(result);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     }</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//     reject(error);</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//抽取方法</span></span>
+<span class="line"><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// try {</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     let result = onFulfilled(value);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     resolve(result);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     reject(error);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// try {</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     let result = onRejected(value);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     resolve(result);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     //解决异常</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//     reject(error);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// try {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     let result = onFulfilled(this.value);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     // resolve(result)</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     if (result instanceof Promise) {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//         result.then(resolve, reject);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     } else {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//         resolve(result);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     }</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     reject(error);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// try {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     let result = onRejected(this.value);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     if (result instanceof Promise) {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//         result.then(resolve, reject);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     } else {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//         resolve(result);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     }</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// } catch (error) {</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//     reject(error);</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//抽取方法</span></span>
+<span class="line"><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="九、返回类型约束" tabindex="-1">九、返回类型约束 <a class="header-anchor" href="#九、返回类型约束" aria-label="Permalink to &quot;九、返回类型约束&quot;">​</a></h2><blockquote><p>当前Promise不能返回自己</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//原生的会报错:TypeError</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//原生的会报错:TypeError</span></span></code></pre></div></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TypeError</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Chaining cycle detected for promise</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TypeError</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Chaining cycle detected for promise</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="十、实现resolve和reject" tabindex="-1">十、实现resolve和reject <a class="header-anchor" href="#十、实现resolve和reject" aria-label="Permalink to &quot;十、实现resolve和reject&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">_</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">_</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><h2 id="十一、promise-all-实现" tabindex="-1">十一、Promise.all()实现 <a class="header-anchor" href="#十一、promise-all-实现" aria-label="Permalink to &quot;十一、Promise.all()实现&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">all</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolves</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">//判断数组长度，来看是否全部成功</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">all</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolves</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">//判断数组长度，来看是否全部成功</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>测试</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">失败</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#758575DD;">//所有成功才会执行成功的回调函数</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">all</span><span style="color:#666666;">([</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#666666;">]).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">resolve:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reject:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">失败</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#A0ADA0;">//所有成功才会执行成功的回调函数</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">all</span><span style="color:#999999;">([</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#999999;">]).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">resolve:</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reject:</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">);</span></span></code></pre></div><h2 id="十二、实现promise-race" tabindex="-1">十二、实现Promise.race() <a class="header-anchor" href="#十二、实现promise-race" aria-label="Permalink to &quot;十二、实现Promise.race()&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">race</span><span style="color:#666666;">([</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p3</span><span style="color:#666666;">]);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">race</span><span style="color:#999999;">([</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p3</span><span style="color:#999999;">]);</span></span></code></pre></div><blockquote><p>只要<code>p1</code>、<code>p2</code>、<code>p3</code>之中有一个实例率先改变状态，<code>p</code>的状态就跟着改变；率先改变的 Promise 实例的返回值，就传递给<code>p</code>的回调函数。 <strong>(谁快用谁)</strong></p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">race</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">race</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><p><strong>测试</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setInterval</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">成功1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setInterval</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">成功2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">race</span><span style="color:#666666;">([</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">p2</span><span style="color:#666666;">]).</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">promises</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setInterval</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">成功1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1000</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setInterval</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">成功2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">race</span><span style="color:#999999;">([</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">p2</span><span style="color:#999999;">]).</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">promises</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">);</span></span></code></pre></div><h2 id="十三、完整代码" tabindex="-1">十三、完整代码 <a class="header-anchor" href="#十三、完整代码" aria-label="Permalink to &quot;十三、完整代码&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PENDING</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pending</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">FUFILLED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fulfilled</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">REJECTED</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">rejected</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">executor</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//初始态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 绑定this    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">executor</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">reject</span><span style="color:#666666;">.</span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//3.resolve改变状态并执行回调函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">//遍历回调函数数组，传值并执行onFulfilled函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">callback</span><span style="color:#666666;">.</span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//3. reject改变状态并执行回调函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">             </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                 </span><span style="color:#758575DD;">//遍历回调函数数组，传值并执行onRejected函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">callback</span><span style="color:#666666;">.</span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          	  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//then方法</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">onFulfilled</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//判断参数是否为函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onFulfilled</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">onRejected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//初始态把回调函数存入数组</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PENDING</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">callbacks</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//成功</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">FULFILLED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onFulfilled</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//失败</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">status</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">.</span><span style="color:#BD976A;">REJECTED</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onRejected</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//解决链式调用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//不能返回自身promise</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TypeError</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Chaining cycle detected for promise</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">error</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">_</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">all</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resolves</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">//遍历每一个promise并执行</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">promise</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//保存</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">resolves</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#BD976A;">reason</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reason</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">race</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promises</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">promises</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promise</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">promise</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 1.定义三个状态</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PENDING</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pending</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">FUFILLED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fulfilled</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">REJECTED</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">rejected</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 2.构造函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">executor</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//初始态</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 绑定this    </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">executor</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">reject</span><span style="color:#999999;">.</span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//3.resolve改变状态并执行回调函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">//遍历回调函数数组，传值并执行onFulfilled函数</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">callback</span><span style="color:#999999;">.</span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//3. reject改变状态并执行回调函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">             </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                 </span><span style="color:#A0ADA0;">//遍历回调函数数组，传值并执行onRejected函数</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">callback</span><span style="color:#999999;">.</span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          	  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//then方法</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">onFulfilled</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//判断参数是否为函数</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onFulfilled</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">onRejected</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//初始态把回调函数存入数组</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PENDING</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">callbacks</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//成功</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">FULFILLED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onFulfilled</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//失败</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">status</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">.</span><span style="color:#B07D48;">REJECTED</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onRejected</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//解决链式调用</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//不能返回自身promise</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TypeError</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Chaining cycle detected for promise</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">error</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">_</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">all</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resolves</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">//遍历每一个promise并执行</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">promise</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//保存</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">resolves</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B07D48;">reason</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reason</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">race</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promises</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">promises</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promise</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">promise</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,45),e=[o];function c(t,r,y,A,D,E){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\211\213\345\206\231Promise.md.fbddbbf5.lean.js" "b/assets/FrontEnd_JavaScript_\346\211\213\345\206\231Promise.md.fbddbbf5.lean.js"
new file mode 100644
index 00000000..29ce3157
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\211\213\345\206\231Promise.md.fbddbbf5.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/手写Promise.md","filePath":"FrontEnd/JavaScript/手写Promise.md"}'),p={name:"FrontEnd/JavaScript/手写Promise.md"},o=l("",45),e=[o];function c(t,r,y,A,D,E){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\225\260\346\215\256\345\216\273\351\207\215.md.f1eaba48.js" "b/assets/FrontEnd_JavaScript_\346\225\260\346\215\256\345\216\273\351\207\215.md.f1eaba48.js"
new file mode 100644
index 00000000..74109743
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\225\260\346\215\256\345\216\273\351\207\215.md.f1eaba48.js"
@@ -0,0 +1,529 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/数据去重.md","filePath":"FrontEnd/JavaScript/数据去重.md"}'),p={name:"FrontEnd/JavaScript/数据去重.md"},o=l(`<blockquote><p>去重的核心：要根据实际业务怎么定义&#39;重&#39;</p></blockquote><h2 id="基本数据类型" tabindex="-1">基本数据类型 <a class="header-anchor" href="#基本数据类型" aria-label="Permalink to &quot;基本数据类型&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#758575DD;">//用Set去重</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)];</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 3]</span></span>
+<span class="line"><span style="color:#758575DD;">//用filter去重</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 相同的元素只保留一个</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">//indexOf</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#758575DD;">//或 !newArr.includes(arr[i])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//==&gt; reduce与 includes</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">item</span><span style="color:#666666;">],[])</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//双重循环遍历数组去重</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">isDuplicate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">isDuplicate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">break</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">isDuplicate</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">uniqueArr</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 3]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#A0ADA0;">//用Set去重</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)];</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 3]</span></span>
+<span class="line"><span style="color:#A0ADA0;">//用filter去重</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 相同的元素只保留一个</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">//indexOf</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#A0ADA0;">//或 !newArr.includes(arr[i])</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//==&gt; reduce与 includes</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">item</span><span style="color:#999999;">],[])</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//双重循环遍历数组去重</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">isDuplicate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">isDuplicate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">break</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">isDuplicate</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">uniqueArr</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 3]</span></span></code></pre></div><p>如果要去重一个包含不同数据类型的数组，需要添加一些额外的检查。</p><p>Date类型转换成Unix时间戳，RegExp类型转换成字符串。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">a</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">b</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">a</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">abc</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">abc</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">()];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isObject</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Object</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">;</span><span style="color:#758575DD;">//判断是否为对象</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#80A665;">isObject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//不是</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Date</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">getTime</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">RegExp</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}))];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">uniqueArr</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [&#39;a&#39;, &#39;b&#39;, 1, &#39;/abc/&#39;, 1678519417983]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">a</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">b</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">a</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">abc</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">abc</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(),</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">()];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isObject</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Object</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">//判断是否为对象</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#59873A;">isObject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//不是</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Date</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">getTime</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">RegExp</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}))];</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">uniqueArr</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [&#39;a&#39;, &#39;b&#39;, 1, &#39;/abc/&#39;, 1678519417983]</span></span></code></pre></div><h2 id="对象数组去重" tabindex="-1">对象数组去重 <a class="header-anchor" href="#对象数组去重" aria-label="Permalink to &quot;对象数组去重&quot;">​</a></h2><h3 id="对象相同比较" tabindex="-1">对象相同比较 <a class="header-anchor" href="#对象相同比较" aria-label="Permalink to &quot;对象相同比较&quot;">​</a></h3><p><strong>基本思路</strong>：</p><ol><li>首先判断两个值的类型是否相同，如果不同，则返回 <code>false</code>；</li><li>处理特殊情况 <code>null、undefined、Date、function</code>；</li><li>处理数组类型，对比项的数量，再递归对比每个项是否相等；</li><li>处理朴素对象，对比键的数量，相等则再递归对比值是否相等。</li></ol><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">equalType</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">val1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">val2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Object</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toString</span><span style="color:#666666;">.</span><span style="color:#80A665;">call</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val1</span><span style="color:#666666;">)</span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Object</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toString</span><span style="color:#666666;">.</span><span style="color:#80A665;">call</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断类型是否一致</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#80A665;">equalType</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断 null 和 undefined:只要有一个为 null 或 undefined，则直接比较值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断基本类型是否相等</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">number</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">string</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">boolean</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">.</span><span style="color:#80A665;">toString</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Date</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Date</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">.</span><span style="color:#80A665;">getTime</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">.</span><span style="color:#80A665;">getTime</span><span style="color:#666666;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 判断数组是否相等</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">.</span><span style="color:#80A665;">every</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">,</span><span style="color:#BD976A;">index</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">index</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// for (let i = 0; i &lt; obj1.length; i++) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   if (!isEqual(obj1[i], obj2[i])) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     return false;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   }</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// }</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// return true;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//比较对象是否相等</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//Object.keys: 返回对象自身的所有可枚举的属性的键名,不包含 Symbol 类型键名</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//Reflect.ownKeys(): 返回所有类型的键名，包括常规键名和 Symbol 键名。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">keys</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">keys</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">keys1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys2</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">key</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keys1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">equalType</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">val1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">val2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#998418;">Object</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toString</span><span style="color:#999999;">.</span><span style="color:#59873A;">call</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val1</span><span style="color:#999999;">)</span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Object</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toString</span><span style="color:#999999;">.</span><span style="color:#59873A;">call</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断类型是否一致</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#59873A;">equalType</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断 null 和 undefined:只要有一个为 null 或 undefined，则直接比较值</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断基本类型是否相等</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">number</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">string</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">boolean</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">.</span><span style="color:#59873A;">toString</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Date</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Date</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">.</span><span style="color:#59873A;">getTime</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">.</span><span style="color:#59873A;">getTime</span><span style="color:#999999;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 判断数组是否相等</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">.</span><span style="color:#59873A;">every</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">,</span><span style="color:#B07D48;">index</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">index</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// for (let i = 0; i &lt; obj1.length; i++) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   if (!isEqual(obj1[i], obj2[i])) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     return false;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   }</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// }</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// return true;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//比较对象是否相等</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//Object.keys: 返回对象自身的所有可枚举的属性的键名,不包含 Symbol 类型键名</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//Reflect.ownKeys(): 返回所有类型的键名，包括常规键名和 Symbol 键名。</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">keys</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">keys</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">keys1</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys2</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">key</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keys1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary><strong>测试示例</strong></summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 示例</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dance</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//date:new Date(&#39;2022-02-13&#39;),</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// func:function(){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  console.log(1)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// true</span></span>
+<span class="line"><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj3</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// false</span></span>
+<span class="line"><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#CB7676;">undefined</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#758575DD;">// false</span></span>
+<span class="line"><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 示例</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dance</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//date:new Date(&#39;2022-02-13&#39;),</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// func:function(){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  console.log(1)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// true</span></span>
+<span class="line"><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj3</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// false</span></span>
+<span class="line"><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#AB5959;">undefined</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">// false</span></span>
+<span class="line"><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span></span></code></pre></div></details><h3 id="对象数组去重-1" tabindex="-1">对象数组去重 <a class="header-anchor" href="#对象数组去重-1" aria-label="Permalink to &quot;对象数组去重&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//深拷贝</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">object</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Date</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">RegExp</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">RegExp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">key</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#80A665;">hasOwnProperty</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">uniqueArr</span><span style="color:#DBD7CAEE;">(arr){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#80A665;">isEqual</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">j</span><span style="color:#666666;">])){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">splice</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//深拷贝</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">object</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Date</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">RegExp</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">RegExp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">key</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#59873A;">hasOwnProperty</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">uniqueArr</span><span style="color:#393A34;">(arr){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#59873A;">isEqual</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">j</span><span style="color:#999999;">])){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">splice</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><details class="details custom-block"><summary>测试数据</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">objArr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#B8A965;">b</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#B8A965;">b</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">b</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#B8A965;">a</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#B8A965;">a</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#B8A965;">b</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dance</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//date:new Date(&#39;2022-02-13&#39;),</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// func:function(){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  console.log(1)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dance</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">},{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">hobby</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">reading</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">music</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dance</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">province</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Guangdong</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">city</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Shenzhen</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">detail</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">street</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Xinxi Road</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">number</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">888</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">date</span><span style="color:#666666;">:</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-02-11</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">func</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#758575DD;">//uniqueArr(objArr1)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">objArr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">a</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#998418;">b</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">a</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#998418;">b</span><span style="color:#999999;">:</span><span style="color:#2F798A;">3</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">b</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#998418;">a</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#998418;">a</span><span style="color:#999999;">:</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#998418;">b</span><span style="color:#999999;">:</span><span style="color:#2F798A;">2</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dance</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//date:new Date(&#39;2022-02-13&#39;),</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// func:function(){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  console.log(1)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dance</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">},{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tom</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">hobby</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">reading</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">music</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dance</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">province</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Guangdong</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">city</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Shenzhen</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">detail</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">street</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Xinxi Road</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">number</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">888</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">date</span><span style="color:#999999;">:</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-02-11</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">func</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#A0ADA0;">//uniqueArr(objArr1)</span></span></code></pre></div></details>`,15),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\225\260\346\215\256\345\216\273\351\207\215.md.f1eaba48.lean.js" "b/assets/FrontEnd_JavaScript_\346\225\260\346\215\256\345\216\273\351\207\215.md.f1eaba48.lean.js"
new file mode 100644
index 00000000..dab08fcf
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\225\260\346\215\256\345\216\273\351\207\215.md.f1eaba48.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/数据去重.md","filePath":"FrontEnd/JavaScript/数据去重.md"}'),p={name:"FrontEnd/JavaScript/数据去重.md"},o=l("",15),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md.9e71e873.js" "b/assets/FrontEnd_JavaScript_\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md.9e71e873.js"
new file mode 100644
index 00000000..6bc05602
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md.9e71e873.js"
@@ -0,0 +1,159 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"JS常用的求交集、并集、差集的方法","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/数组求集合.md","filePath":"FrontEnd/JavaScript/数组求集合.md"}'),p={name:"FrontEnd/JavaScript/数组求集合.md"},o=l(`<h1 id="js常用的求交集、并集、差集的方法" tabindex="-1">JS常用的求交集、并集、差集的方法 <a class="header-anchor" href="#js常用的求交集、并集、差集的方法" aria-label="Permalink to &quot;JS常用的求交集、并集、差集的方法&quot;">​</a></h1><h2 id="普通数组" tabindex="-1">普通数组 <a class="header-anchor" href="#普通数组" aria-label="Permalink to &quot;普通数组&quot;">​</a></h2><blockquote><p>示例数组</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">];</span></span></code></pre></div><h3 id="一、并集-a∪b" tabindex="-1">一、并集(A∪B) <a class="header-anchor" href="#一、并集-a∪b" aria-label="Permalink to &quot;一、并集(A∪B)&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方法一：</span></span>
+<span class="line"><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">// 虽然 NaN 和 NaN 不相等，但是在 Set 集合里面只会存在一个</span></span>
+<span class="line"><span style="color:#758575DD;">// undefined 和 Infinity 在 Set 集合里面也只会存在一个</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">NaN</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">NaN</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">([...</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">])]</span><span style="color:#758575DD;">// [1, 2, 3, NaN, 4, 5]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方法二：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">from</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//先b筛选a中没有的，再连接数组</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)))</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">));</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方法一：</span></span>
+<span class="line"><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 虽然 NaN 和 NaN 不相等，但是在 Set 集合里面只会存在一个</span></span>
+<span class="line"><span style="color:#A0ADA0;">// undefined 和 Infinity 在 Set 集合里面也只会存在一个</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">NaN</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">NaN</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">([...</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">])]</span><span style="color:#A0ADA0;">// [1, 2, 3, NaN, 4, 5]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">from</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//先b筛选a中没有的，再连接数组</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)))</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">));</span></span></code></pre></div><h3 id="二、交集-a∩b" tabindex="-1">二、交集（<em>A</em>∩B） <a class="header-anchor" href="#二、交集-a∩b" aria-label="Permalink to &quot;二、交集（*A*∩B）&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">intersection</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)))];</span><span style="color:#758575DD;">//[2, NaN]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">intersection</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)))];</span><span style="color:#A0ADA0;">//[2, NaN]</span></span></code></pre></div><h3 id="三、差集-a-b" tabindex="-1">三、差集(A-B) <a class="header-anchor" href="#三、差集-a-b" aria-label="Permalink to &quot;三、差集(A-B)&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-diff vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 差集（a 相对于 b 的差集） 属于a不属于b的元素</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">difference</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)))];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">//返回a与b数组区别的集合（交集取反） </span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">difference</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">b</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">difference</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">)));</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">difference</span><span style="color:#666666;">)</span><span style="color:#758575DD;">// [1,3,4,5]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方法二：先转为 Set</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">aSet</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">bSet</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//  </span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">difference</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">from</span><span style="color:#666666;">(</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">aSet</span><span style="color:#666666;">.</span><span style="color:#80A665;">has</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">bSet</span><span style="color:#666666;">.</span><span style="color:#80A665;">has</span><span style="color:#666666;">(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">))));</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">difference</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1,3,4,5]</span></span></code></pre><pre class="shiki vitesse-light has-diff vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 差集（a 相对于 b 的差集） 属于a不属于b的元素</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">difference</span><span style="color:#393A34;">  </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)))];</span></span>
+<span class="line"><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">//返回a与b数组区别的集合（交集取反） </span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">difference</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">b</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">difference</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">)));</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">difference</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">// [1,3,4,5]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二：先转为 Set</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">aSet</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">bSet</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//  </span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">difference</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">from</span><span style="color:#999999;">(</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">aSet</span><span style="color:#999999;">.</span><span style="color:#59873A;">has</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">bSet</span><span style="color:#999999;">.</span><span style="color:#59873A;">has</span><span style="color:#999999;">(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">))));</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">difference</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1,3,4,5]</span></span></code></pre></div><h2 id="对象数组" tabindex="-1">对象数组 <a class="header-anchor" href="#对象数组" aria-label="Permalink to &quot;对象数组&quot;">​</a></h2><blockquote><p>示例数组</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">=[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">01</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product01</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">02</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product02</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">03</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product03</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">04</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product04</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">05</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product05</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">=[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">03</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product03</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">06</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product06</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">07</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product07</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">08</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">product08</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">},</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">=[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">01</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product01</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">02</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product02</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">03</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product03</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">04</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product04</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">05</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product05</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">=[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">03</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product03</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">06</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product06</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">07</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product07</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">08</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">product08</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">},</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">];</span></span></code></pre></div><h3 id="一、并集-a∪b-1" tabindex="-1">一、并集（A∪B） <a class="header-anchor" href="#一、并集-a∪b-1" aria-label="Permalink to &quot;一、并集（A∪B）&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 用额外对象记录当前项 id 相同的是否收集，此 id 未收集，则进行收集</span></span>
+<span class="line"><span style="color:#758575DD;">//写法一：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">obj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},[])</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//写法二：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">findIndex</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">].</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span><span style="color:#CB7676;">===-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//简化</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//判断目标在数组中相同的 id 是否存在</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isExist</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">target</span><span style="color:#666666;">,</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">findIndex</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">target</span><span style="color:#666666;">[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">//合并数组并遍历，判断新数组不存在当前项，则收集</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">union</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">).</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isExist</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">id</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">],[])</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 用额外对象记录当前项 id 相同的是否收集，此 id 未收集，则进行收集</span></span>
+<span class="line"><span style="color:#A0ADA0;">//写法一：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{};</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">obj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},[])</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//写法二：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">findIndex</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">].</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span><span style="color:#AB5959;">===-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//简化</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//判断目标在数组中相同的 id 是否存在</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isExist</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">target</span><span style="color:#999999;">,</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">findIndex</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">target</span><span style="color:#999999;">[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">//合并数组并遍历，判断新数组不存在当前项，则收集</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">union</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">).</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isExist</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">id</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">],[])</span></span></code></pre></div><h3 id="二、交集-a∩b-1" tabindex="-1">二、交集（<em>A</em>∩B） <a class="header-anchor" href="#二、交集-a∩b-1" aria-label="Permalink to &quot;二、交集（*A*∩B）&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方法一：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">intersection</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">aids</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">aids</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//方法二：</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">intersection</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">findIndex</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,[])</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方法一：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">intersection</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">aids</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">aids</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二：</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">intersection</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">findIndex</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,[])</span></span></code></pre></div><h3 id="三、差集-a-b-1" tabindex="-1">三、差集(A-B) <a class="header-anchor" href="#三、差集-a-b-1" aria-label="Permalink to &quot;三、差集(A-B)&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-diff vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//找出arr1数组中，arr2数组没有的对象</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">diff</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">every</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">diff</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">arr2</span><span style="color:#666666;">.</span><span style="color:#80A665;">some</span><span style="color:#666666;">(</span><span style="color:#BD976A;">j</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">j</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light has-diff vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//找出arr1数组中，arr2数组没有的对象</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">diff</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">every</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">diff</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">arr2</span><span style="color:#999999;">.</span><span style="color:#59873A;">some</span><span style="color:#999999;">(</span><span style="color:#B07D48;">j</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">j</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">))</span></span></code></pre></div>`,19),e=[o];function r(t,c,y,A,D,B){return a(),n("div",null,e)}const C=s(p,[["render",r]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md.9e71e873.lean.js" "b/assets/FrontEnd_JavaScript_\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md.9e71e873.lean.js"
new file mode 100644
index 00000000..087ff397
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.md.9e71e873.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"JS常用的求交集、并集、差集的方法","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/数组求集合.md","filePath":"FrontEnd/JavaScript/数组求集合.md"}'),p={name:"FrontEnd/JavaScript/数组求集合.md"},o=l("",19),e=[o];function r(t,c,y,A,D,B){return a(),n("div",null,e)}const C=s(p,[["render",r]]);export{i as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\226\207\344\273\266\347\263\273\347\273\237.md.1488f287.js" "b/assets/FrontEnd_JavaScript_\346\226\207\344\273\266\347\263\273\347\273\237.md.1488f287.js"
new file mode 100644
index 00000000..f0239516
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\226\207\344\273\266\347\263\273\347\273\237.md.1488f287.js"
@@ -0,0 +1,171 @@
+import{D as x}from"./chunks/DemoWrap.1b6e7adf.js";import{d as g,a3 as w,h as D,o as C,c as d,k as n,a4 as u,a5 as F,F as U,_ as m,C as P,a as _,a6 as L,H as i,w as E,t as T,e as b,p as V,m as q,Q as f}from"./chunks/framework.c53372a0.js";const j=g({__name:"demo1",async setup(r){let l,t;const s=new Blob(["1,2,3"]),c=new File(["1,2,3"],"test.txt",{type:"text/plain"}),y=([l,t]=w(()=>s.arrayBuffer()),l=await l,t(),l);[l,t]=w(()=>c.arrayBuffer()),l=await l,t();const p=new FileReader;p.readAsArrayBuffer(c),p.onload=a=>{var B;console.log("[ e ]-11",(B=a.target)==null?void 0:B.result)},new DataView(y).setUint8(0,4);const o=D(null),e=a=>{o.value=a.target.files};return(a,B)=>(C(),d("input",{type:"file",onChange:e},null,32))}}),O={class:"opt-wrap"},H=g({__name:"FilePicker",setup(r){const l=async e=>{const a={title:"Open File",accept:{"image/*":[".png",".jpg",".jpeg"]}},[B]=await window.showOpenFilePicker(a),R=await B.getFile(),h=new FileReader;h.readAsArrayBuffer(R),h.onload=S=>{var v;console.log("[ e ]-11",(v=S.target)==null?void 0:v.result)}},t={title:"Open File",types:[{description:"Text Files",accept:{"text/plain":[".txt"]}}]},s=D("Hello World"),c=D(null),y=async()=>{const a=await(await window.showSaveFilePicker()).createWritable();await a.write(s.value),await a.close()},p=async()=>{const[e]=await window.showOpenFilePicker(t);c.value=e;const a=await e.getFile();s.value=await a.text()},A=async()=>{if(c.value){const e=await c.value.createWritable();await e.write(s.value),await e.close()}},o=()=>{y()};return(e,a)=>(C(),d(U,null,[n("input",{type:"file",onClick:l}),n("div",O,[u(n("textarea",{name:"",id:"",cols:"30",rows:"10","onUpdate:modelValue":a[0]||(a[0]=B=>s.value=B)},null,512),[[F,s.value]]),n("div",{class:"opts"},[n("button",{onClick:y}," 创建"),n("button",{onClick:p}," 打开"),n("button",{onClick:A},"保存 "),n("button",{onClick:o}," 保存为")])])],64))}});const I=m(H,[["__scopeId","data-v-6e6d96d1"]]),k=r=>(V("data-v-fcdef9a9"),r=r(),q(),r),N={class:"opt-wrap"},W=k(()=>n("option",{value:"BLOB"},"BLOB URL",-1)),z=k(()=>n("option",{value:"DATA"},"DATA URL",-1)),J=[W,z],$={key:0,class:"show-wrap"},M=["href"],Y=["src"],Q=["src"],G=g({__name:"DemoUrl",setup(r){const l=D("BLOB"),t=D(""),s=D(""),c=async(y,p)=>{t.value=y;const A=await fetch(p);if(l.value==="BLOB"){const o=await A.blob();s.value=URL.createObjectURL(o)}else{const o=new FileReader;o.onload=e=>{var a;s.value=(a=e.target)==null?void 0:a.result},o.readAsDataURL(await A.blob())}};return(y,p)=>{const A=P("font");return C(),d("div",null,[n("div",N,[_(" URL 类型"),u(n("select",{id:"urltype","onUpdate:modelValue":p[0]||(p[0]=o=>l.value=o)},J,512),[[L,l.value]]),n("button",{onClick:p[1]||(p[1]=o=>c("image","./demo/url.png"))},"获取图片 URL"),n("button",{onClick:p[2]||(p[2]=o=>c("text","./demo/url.txt"))},"获取文本 URL")]),u(n("textarea",{"onUpdate:modelValue":p[3]||(p[3]=o=>s.value=o)},null,512),[[F,s.value]]),s.value?(C(),d("div",$,[n("a",{href:s.value,target:"_blank"}," 链接 ",8,M),i(A,{color:"urlType=='DATA' ? 'red' :'green'"},{default:E(()=>[_("DATA URL"+T(l.value=="DATA"?"不":"")+"可直接点击链接打开, 可复制链接打开",1)]),_:1}),t.value=="image"?(C(),d("img",{key:0,src:s.value,alt:"图片"},null,8,Y)):b("",!0),n("iframe",{src:s.value},null,8,Q)])):b("",!0)])}}});const K=m(G,[["__scopeId","data-v-fcdef9a9"]]),X=f(`<h2 id="blob与-file" tabindex="-1">Blob与 File <a class="header-anchor" href="#blob与-file" aria-label="Permalink to &quot;Blob与 File&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blob</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Blob</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1,2,3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">File</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1,2,3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text/plain</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blob</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Blob</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1,2,3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">File</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1,2,3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text/plain</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span></code></pre></div><h2 id="arraybuffer" tabindex="-1">ArrayBuffer <a class="header-anchor" href="#arraybuffer" aria-label="Permalink to &quot;ArrayBuffer&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blob</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Blob</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1,2,3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">File</span><span style="color:#666666;">([</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1,2,3</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test.txt</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text/plain</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//ArrayBuffer</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blobArrayBuffer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blob</span><span style="color:#666666;">.</span><span style="color:#80A665;">arrayBuffer</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileArrayBuffer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">arrayBuffer</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ blobArrayBuffer ]-6</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">blobArrayBuffer</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ fileArrayBuffer ]-8</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileArrayBuffer</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blob</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Blob</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1,2,3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">File</span><span style="color:#999999;">([</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1,2,3</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test.txt</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text/plain</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//ArrayBuffer</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blobArrayBuffer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blob</span><span style="color:#999999;">.</span><span style="color:#59873A;">arrayBuffer</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileArrayBuffer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">arrayBuffer</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ blobArrayBuffer ]-6</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">blobArrayBuffer</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ fileArrayBuffer ]-8</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileArrayBuffer</span><span style="color:#999999;">)</span></span></code></pre></div>`,4),Z=f(`<h2 id="filereader" tabindex="-1">FileReader <a class="header-anchor" href="#filereader" aria-label="Permalink to &quot;FileReader&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileReader</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">FileReader</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">fileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsArrayBuffer</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">fileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ e ]-13</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ e.target ]-14</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ e.target.result ]-15</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileArrayBuffer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// false</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileReader</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">FileReader</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">fileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsArrayBuffer</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">fileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ e ]-13</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ e.target ]-14</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ e.target.result ]-15</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#393A34;">  </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileArrayBuffer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// false</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-02-11-18-18-03.png" alt="2023-02-11-18-18-03"></p><h2 id="dataview" tabindex="-1">DataView <a class="header-anchor" href="#dataview" aria-label="Permalink to &quot;DataView&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dataView</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">DataView</span><span style="color:#666666;">(</span><span style="color:#BD976A;">blobArrayBuffer</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ dataView ]-19</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dataView</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ dataView.getUint8(0) ]-20</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dataView</span><span style="color:#666666;">.</span><span style="color:#80A665;">getUint8</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#BD976A;">dataView</span><span style="color:#666666;">.</span><span style="color:#80A665;">setUint8</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ dataView.getUint8(0) ]-20</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dataView</span><span style="color:#666666;">.</span><span style="color:#80A665;">getUint8</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dataView</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">DataView</span><span style="color:#999999;">(</span><span style="color:#B07D48;">blobArrayBuffer</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ dataView ]-19</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dataView</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ dataView.getUint8(0) ]-20</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dataView</span><span style="color:#999999;">.</span><span style="color:#59873A;">getUint8</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#B07D48;">dataView</span><span style="color:#999999;">.</span><span style="color:#59873A;">setUint8</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ dataView.getUint8(0) ]-20</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dataView</span><span style="color:#999999;">.</span><span style="color:#59873A;">getUint8</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">))</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-02-11-18-25-32.png" alt="2023-02-11-18-25-32"></p><h2 id="filepicker" tabindex="-1">FilePicker <a class="header-anchor" href="#filepicker" aria-label="Permalink to &quot;FilePicker&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">openFilePicker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">: </span><span style="color:#5DA994;">any</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Open File</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">accept</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">image/*</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.png</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.jpg</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.jpeg</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">fileHandle</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">any</span><span style="color:#666666;">).</span><span style="color:#80A665;">showOpenFilePicker</span><span style="color:#666666;">(</span><span style="color:#BD976A;">option</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileHandle</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFile</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fileReader</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">FileReader</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsArrayBuffer</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">fileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[ e ]-11</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">openFilePicker</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Open File</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">accept</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">image/*</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.png</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.jpg</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.jpeg</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">fileHandle</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">as</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">).</span><span style="color:#59873A;">showOpenFilePicker</span><span style="color:#999999;">(</span><span style="color:#B07D48;">option</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileHandle</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFile</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fileReader</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">FileReader</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsArrayBuffer</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">fileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[ e ]-11</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="文件操作" tabindex="-1">文件操作 <a class="header-anchor" href="#文件操作" aria-label="Permalink to &quot;文件操作&quot;">​</a></h2><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">textarea</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">ref</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Hello World</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">fh</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">ref</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//创建文件</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">openCreate</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const  </span><span style="color:#BD976A;">fileHandle</span><span style="color:#CB7676;">  </span><span style="color:#666666;">=</span><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;">  </span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">any</span><span style="color:#666666;">).</span><span style="color:#80A665;">showSaveFilePicker</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">fileSteam</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileHandle</span><span style="color:#666666;">.</span><span style="color:#80A665;">createWritable</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileSteam</span><span style="color:#666666;">.</span><span style="color:#80A665;">write</span><span style="color:#666666;">(</span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileSteam</span><span style="color:#666666;">.</span><span style="color:#80A665;">close</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//打开文件</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">openShow</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#666666;">[</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileHandle</span><span style="color:#CB7676;"> </span><span style="color:#666666;">]</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;">  </span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">any</span><span style="color:#666666;">).</span><span style="color:#80A665;">showOpenFilePicker</span><span style="color:#666666;">(</span><span style="color:#BD976A;">option</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">fh</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileHandle</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">file</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;">  </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;">  </span><span style="color:#BD976A;">fileHandle</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFile</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#80A665;">text</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//保存文件</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">openSave</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">fh</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#CB7676;">    const </span><span style="color:#BD976A;">fileSteam</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fh</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">createWritable</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileSteam</span><span style="color:#666666;">.</span><span style="color:#80A665;">write</span><span style="color:#666666;">(</span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">fileSteam</span><span style="color:#666666;">.</span><span style="color:#80A665;">close</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//保存为文件</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">openSaveAs</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#80A665;">openCreate</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">textarea</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">ref</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Hello World</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">fh</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">ref</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//创建文件</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">openCreate</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const  </span><span style="color:#B07D48;">fileHandle</span><span style="color:#AB5959;">  </span><span style="color:#999999;">=</span><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;">  </span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">).</span><span style="color:#59873A;">showSaveFilePicker</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">fileSteam</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileHandle</span><span style="color:#999999;">.</span><span style="color:#59873A;">createWritable</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileSteam</span><span style="color:#999999;">.</span><span style="color:#59873A;">write</span><span style="color:#999999;">(</span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileSteam</span><span style="color:#999999;">.</span><span style="color:#59873A;">close</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//打开文件</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">openShow</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#999999;">[</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileHandle</span><span style="color:#AB5959;"> </span><span style="color:#999999;">]</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;">  </span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">).</span><span style="color:#59873A;">showOpenFilePicker</span><span style="color:#999999;">(</span><span style="color:#B07D48;">option</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">fh</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileHandle</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">file</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;">  </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;">  </span><span style="color:#B07D48;">fileHandle</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFile</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#59873A;">text</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//保存文件</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">openSave</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">fh</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#AB5959;">    const </span><span style="color:#B07D48;">fileSteam</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fh</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">createWritable</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileSteam</span><span style="color:#999999;">.</span><span style="color:#59873A;">write</span><span style="color:#999999;">(</span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">fileSteam</span><span style="color:#999999;">.</span><span style="color:#59873A;">close</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//保存为文件</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">openSaveAs</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#59873A;">openCreate</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>filepicker</strong></p>`,11),ss=f(`<h2 id="url" tabindex="-1">URL <a class="header-anchor" href="#url" aria-label="Permalink to &quot;URL&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//Blob URL</span></span>
+<span class="line"><span style="color:#BD976A;">URL</span><span style="color:#666666;">.</span><span style="color:#80A665;">createObjectURL</span><span style="color:#666666;">(</span><span style="color:#BD976A;">blob</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//Data  URL</span></span>
+<span class="line"><span style="color:#BD976A;">FileReader</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsDataURL</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#BD976A;">canvas</span><span style="color:#666666;">.</span><span style="color:#80A665;">toDataURL</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//Blob URL</span></span>
+<span class="line"><span style="color:#B07D48;">URL</span><span style="color:#999999;">.</span><span style="color:#59873A;">createObjectURL</span><span style="color:#999999;">(</span><span style="color:#B07D48;">blob</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//Data  URL</span></span>
+<span class="line"><span style="color:#B07D48;">FileReader</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsDataURL</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#B07D48;">canvas</span><span style="color:#999999;">.</span><span style="color:#59873A;">toDataURL</span><span style="color:#999999;">()</span></span></code></pre></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#80A665;">href</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">url</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">a</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#80A665;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">url</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">iframe</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#80A665;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">url</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">iframe</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#59873A;">href</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">url</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">a</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#59873A;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">url</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">iframe</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#59873A;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">url</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">iframe</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">TYPE</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">image</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">url</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">ref</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">onFetch</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> async </span><span style="color:#666666;">(</span><span style="color:#BD976A;">type</span><span style="color:#666666;">: </span><span style="color:#5DA994;">TYPE</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">response</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">fetch</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//BLOB URL</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// const data = await response.blob()</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// url.value = URL.createObjectURL(data)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//Data URL</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">fr</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">FileReader</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">fr</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">url</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">?.</span><span style="color:#BD976A;">result</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">string</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#BD976A;">fr</span><span style="color:#666666;">.</span><span style="color:#80A665;">readAsDataURL</span><span style="color:#666666;">(</span><span style="color:#4D9375;">await</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">response</span><span style="color:#666666;">.</span><span style="color:#80A665;">blob</span><span style="color:#666666;">())</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">TYPE</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">image</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">url</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">ref</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">onFetch</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> async </span><span style="color:#999999;">(</span><span style="color:#B07D48;">type</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">TYPE</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">response</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">fetch</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//BLOB URL</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// const data = await response.blob()</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// url.value = URL.createObjectURL(data)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//Data URL</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">fr</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">FileReader</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">fr</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">url</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">?.</span><span style="color:#B07D48;">result</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#B07D48;">fr</span><span style="color:#999999;">.</span><span style="color:#59873A;">readAsDataURL</span><span style="color:#999999;">(</span><span style="color:#1E754F;">await</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">response</span><span style="color:#999999;">.</span><span style="color:#59873A;">blob</span><span style="color:#999999;">())</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,4),as=f('<h2 id="参考资料" tabindex="-1">参考资料 <a class="header-anchor" href="#参考资料" aria-label="Permalink to &quot;参考资料&quot;">​</a></h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob" target="_blank" rel="noreferrer">MDN Blob API 参考</a><br><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/File" target="_blank" rel="noreferrer">MDN File API 参考</a><br><a href="https://zhuanlan.zhihu.com/p/568915443" target="_blank" rel="noreferrer">谈谈JS二进制：File、Blob、FileReader、ArrayBuffer、Base64</a></p>',2),os=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/文件系统.md","filePath":"FrontEnd/JavaScript/文件系统.md"}'),ns={name:"FrontEnd/JavaScript/文件系统.md"},es=Object.assign(ns,{setup(r){return(l,t)=>{const s=x;return C(),d("div",null,[X,i(s,{pkg:"FrontEnd/JavaScript/demo",path:"demo1.vue"},{default:E(()=>[i(j)]),_:1}),Z,i(s,{pkg:"FrontEnd/JavaScript/demo",path:"FilePicker.vue"},{default:E(()=>[i(I)]),_:1}),ss,i(s,{pkg:"FrontEnd/JavaScript/demo",path:"DemoUrl.vue"},{default:E(()=>[i(K)]),_:1}),as])}}});export{os as __pageData,es as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\226\207\344\273\266\347\263\273\347\273\237.md.1488f287.lean.js" "b/assets/FrontEnd_JavaScript_\346\226\207\344\273\266\347\263\273\347\273\237.md.1488f287.lean.js"
new file mode 100644
index 00000000..59294714
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\226\207\344\273\266\347\263\273\347\273\237.md.1488f287.lean.js"
@@ -0,0 +1 @@
+import{D as x}from"./chunks/DemoWrap.1b6e7adf.js";import{d as g,a3 as w,h as D,o as C,c as d,k as n,a4 as u,a5 as F,F as U,_ as m,C as P,a as _,a6 as L,H as i,w as E,t as T,e as b,p as V,m as q,Q as f}from"./chunks/framework.c53372a0.js";const j=g({__name:"demo1",async setup(r){let l,t;const s=new Blob(["1,2,3"]),c=new File(["1,2,3"],"test.txt",{type:"text/plain"}),y=([l,t]=w(()=>s.arrayBuffer()),l=await l,t(),l);[l,t]=w(()=>c.arrayBuffer()),l=await l,t();const p=new FileReader;p.readAsArrayBuffer(c),p.onload=a=>{var B;console.log("[ e ]-11",(B=a.target)==null?void 0:B.result)},new DataView(y).setUint8(0,4);const o=D(null),e=a=>{o.value=a.target.files};return(a,B)=>(C(),d("input",{type:"file",onChange:e},null,32))}}),O={class:"opt-wrap"},H=g({__name:"FilePicker",setup(r){const l=async e=>{const a={title:"Open File",accept:{"image/*":[".png",".jpg",".jpeg"]}},[B]=await window.showOpenFilePicker(a),R=await B.getFile(),h=new FileReader;h.readAsArrayBuffer(R),h.onload=S=>{var v;console.log("[ e ]-11",(v=S.target)==null?void 0:v.result)}},t={title:"Open File",types:[{description:"Text Files",accept:{"text/plain":[".txt"]}}]},s=D("Hello World"),c=D(null),y=async()=>{const a=await(await window.showSaveFilePicker()).createWritable();await a.write(s.value),await a.close()},p=async()=>{const[e]=await window.showOpenFilePicker(t);c.value=e;const a=await e.getFile();s.value=await a.text()},A=async()=>{if(c.value){const e=await c.value.createWritable();await e.write(s.value),await e.close()}},o=()=>{y()};return(e,a)=>(C(),d(U,null,[n("input",{type:"file",onClick:l}),n("div",O,[u(n("textarea",{name:"",id:"",cols:"30",rows:"10","onUpdate:modelValue":a[0]||(a[0]=B=>s.value=B)},null,512),[[F,s.value]]),n("div",{class:"opts"},[n("button",{onClick:y}," 创建"),n("button",{onClick:p}," 打开"),n("button",{onClick:A},"保存 "),n("button",{onClick:o}," 保存为")])])],64))}});const I=m(H,[["__scopeId","data-v-6e6d96d1"]]),k=r=>(V("data-v-fcdef9a9"),r=r(),q(),r),N={class:"opt-wrap"},W=k(()=>n("option",{value:"BLOB"},"BLOB URL",-1)),z=k(()=>n("option",{value:"DATA"},"DATA URL",-1)),J=[W,z],$={key:0,class:"show-wrap"},M=["href"],Y=["src"],Q=["src"],G=g({__name:"DemoUrl",setup(r){const l=D("BLOB"),t=D(""),s=D(""),c=async(y,p)=>{t.value=y;const A=await fetch(p);if(l.value==="BLOB"){const o=await A.blob();s.value=URL.createObjectURL(o)}else{const o=new FileReader;o.onload=e=>{var a;s.value=(a=e.target)==null?void 0:a.result},o.readAsDataURL(await A.blob())}};return(y,p)=>{const A=P("font");return C(),d("div",null,[n("div",N,[_(" URL 类型"),u(n("select",{id:"urltype","onUpdate:modelValue":p[0]||(p[0]=o=>l.value=o)},J,512),[[L,l.value]]),n("button",{onClick:p[1]||(p[1]=o=>c("image","./demo/url.png"))},"获取图片 URL"),n("button",{onClick:p[2]||(p[2]=o=>c("text","./demo/url.txt"))},"获取文本 URL")]),u(n("textarea",{"onUpdate:modelValue":p[3]||(p[3]=o=>s.value=o)},null,512),[[F,s.value]]),s.value?(C(),d("div",$,[n("a",{href:s.value,target:"_blank"}," 链接 ",8,M),i(A,{color:"urlType=='DATA' ? 'red' :'green'"},{default:E(()=>[_("DATA URL"+T(l.value=="DATA"?"不":"")+"可直接点击链接打开, 可复制链接打开",1)]),_:1}),t.value=="image"?(C(),d("img",{key:0,src:s.value,alt:"图片"},null,8,Y)):b("",!0),n("iframe",{src:s.value},null,8,Q)])):b("",!0)])}}});const K=m(G,[["__scopeId","data-v-fcdef9a9"]]),X=f("",4),Z=f("",11),ss=f("",4),as=f("",2),os=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/文件系统.md","filePath":"FrontEnd/JavaScript/文件系统.md"}'),ns={name:"FrontEnd/JavaScript/文件系统.md"},es=Object.assign(ns,{setup(r){return(l,t)=>{const s=x;return C(),d("div",null,[X,i(s,{pkg:"FrontEnd/JavaScript/demo",path:"demo1.vue"},{default:E(()=>[i(j)]),_:1}),Z,i(s,{pkg:"FrontEnd/JavaScript/demo",path:"FilePicker.vue"},{default:E(()=>[i(I)]),_:1}),ss,i(s,{pkg:"FrontEnd/JavaScript/demo",path:"DemoUrl.vue"},{default:E(()=>[i(K)]),_:1}),as])}}});export{os as __pageData,es as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md.a9560fb8.js" "b/assets/FrontEnd_JavaScript_\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md.a9560fb8.js"
new file mode 100644
index 00000000..82b5ecc9
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md.a9560fb8.js"
@@ -0,0 +1,237 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/正则表达式.md","filePath":"FrontEnd/JavaScript/正则表达式.md"}'),p={name:"FrontEnd/JavaScript/正则表达式.md"},o=l(`<h2 id="资料参考-learnregex" tabindex="-1">资料参考：<a href="https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md" target="_blank" rel="noreferrer">LearnRegex</a> <a class="header-anchor" href="#资料参考-learnregex" aria-label="Permalink to &quot;资料参考：[LearnRegex](https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md)&quot;">​</a></h2><h2 id="应用场景" tabindex="-1">应用场景 <a class="header-anchor" href="#应用场景" aria-label="Permalink to &quot;应用场景&quot;">​</a></h2><ol><li>表单校验</li><li>字符串匹配和替换、解析(vue模板解析)</li></ol><h2 id="可视化工具" tabindex="-1">可视化工具： <a class="header-anchor" href="#可视化工具" aria-label="Permalink to &quot;可视化工具：&quot;">​</a></h2><ol><li><a href="https://jex.im/regulex/#!flags=&amp;re=" target="_blank" rel="noreferrer">Regulex</a></li><li><a href="https://regexper.com/" target="_blank" rel="noreferrer">Regexper</a></li></ol><h2 id="_1-或者" tabindex="-1">1. 或者 <code>|</code> <a class="header-anchor" href="#_1-或者" aria-label="Permalink to &quot;1. 或者 \`|\`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tel</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">020-99999999</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">010</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">020</span><span style="color:#666666;">)</span><span style="color:#E6CC77;">\\-</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">{8}</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tel</span><span style="color:#666666;">));</span><span style="color:#758575DD;">//true</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tel</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">020-99999999</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">010</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">020</span><span style="color:#999999;">)</span><span style="color:#BDA437;">\\-</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">{8}</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tel</span><span style="color:#999999;">));</span><span style="color:#A0ADA0;">//true</span></span></code></pre></div><h2 id="_2-原子表-、原子组" tabindex="-1">2. 原子表<code>[]</code>、原子组<code>()</code> <a class="header-anchor" href="#_2-原子表-、原子组" aria-label="Permalink to &quot;2. 原子表\`[]\`、原子组\`()\`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//原子表</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">123456</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//出现在其中就匹配成功</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//true</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">9</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//[()] [.+] 特殊符号放在原子表里就是普通符号(保留字符本意）</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">www.baidu.com+</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">.+</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gi</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//[&#39;.&#39;, &#39;.&#39;, &#39;+&#39;]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//原子组</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(</span><span style="color:#C4704F;">34</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">56</span><span style="color:#666666;">)</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hdjfaks34fjj</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//true 满足组合才行</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hdjfaks35fjj</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//false</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//原子表</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">123456</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//出现在其中就匹配成功</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//true</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">9</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//[()] [.+] 特殊符号放在原子表里就是普通符号(保留字符本意）</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">www.baidu.com+</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">.+</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gi</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//[&#39;.&#39;, &#39;.&#39;, &#39;+&#39;]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//原子组</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">34</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">56</span><span style="color:#999999;">)</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hdjfaks34fjj</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//true 满足组合才行</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hdjfaks35fjj</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//false</span></span></code></pre></div><h2 id="_3-边界符-、" tabindex="-1">3. 边界符<code>^</code>、<code>$</code> <a class="header-anchor" href="#_3-边界符-、" aria-label="Permalink to &quot;3. 边界符\`^\`、\`$\`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tel</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">12020-99999999</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">(</span><span style="color:#C4704F;">010</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">020</span><span style="color:#666666;">)</span><span style="color:#E6CC77;">\\-</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">{8}</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tel</span><span style="color:#666666;">));</span><span style="color:#758575DD;">//false 以010开头</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tel</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">020-999999998</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">(</span><span style="color:#C4704F;">010</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">020</span><span style="color:#666666;">)</span><span style="color:#E6CC77;">\\-</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">{8}</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tel</span><span style="color:#666666;">));</span><span style="color:#758575DD;">//false 以8位数结尾</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tel</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">12020-99999999</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">010</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">020</span><span style="color:#999999;">)</span><span style="color:#BDA437;">\\-</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">{8}</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tel</span><span style="color:#999999;">));</span><span style="color:#A0ADA0;">//false 以010开头</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tel</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">020-999999998</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">010</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">020</span><span style="color:#999999;">)</span><span style="color:#BDA437;">\\-</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">{8}</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tel</span><span style="color:#999999;">));</span><span style="color:#A0ADA0;">//false 以8位数结尾</span></span></code></pre></div><h2 id="_4-元字符" tabindex="-1">4. 元字符 <a class="header-anchor" href="#_4-元字符" aria-label="Permalink to &quot;4. 元字符&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032157146.png" alt="image.png"></p><h2 id="_5-匹配所有字符" tabindex="-1">5. 匹配所有字符 <a class="header-anchor" href="#_5-匹配所有字符" aria-label="Permalink to &quot;5. 匹配所有字符&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">\\s\\S</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">\\d\\D</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">\\s\\S</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">\\d\\D</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span></span></code></pre></div><h2 id="_6-模式修正符号i、g" tabindex="-1">6. 模式修正符号<code>i</code>、<code>g</code> <a class="header-anchor" href="#_6-模式修正符号i、g" aria-label="Permalink to &quot;6. 模式修正符号\`i\`、\`g\`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">djfkdjakDJFKJD</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">hd</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">ig</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//i 不区分大小写</span></span>
+<span class="line"><span style="color:#758575DD;">//g 全局匹配</span></span>
+<span class="line"><span style="color:#758575DD;">//m 每一行单独处理(^,$)检测字符串的开头或结尾,如果想要它在每行的开头和结尾生效,则用m</span></span>
+<span class="line"><span style="color:#758575DD;">//u 宽字节匹配</span></span>
+<span class="line"><span style="color:#758575DD;">//y 匹配完不匹配后面（提升效率）</span></span>
+<span class="line"><span style="color:#758575DD;">//字符属性</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hdstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">dfa2332,hello! 正则表达式，哈！</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#BD976A;">hdstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\p</span><span style="color:#C4704F;">{sc=Han}</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gu</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//按语言系统匹配中文 [&#39;正&#39;, &#39;则&#39;, &#39;表&#39;, &#39;达&#39;, &#39;式&#39;,  &#39;哈&#39;]</span></span>
+<span class="line"><span style="color:#BD976A;">hdstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\p</span><span style="color:#C4704F;">{P}</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gu</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//匹配所有标点符号  //[&#39;,&#39;, &#39;!&#39;, &#39;，&#39;, &#39;！&#39;]</span></span>
+<span class="line"><span style="color:#BD976A;">hdstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\p</span><span style="color:#C4704F;">{L}</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gu</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//匹配所有字母</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hd</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">djfkdjakDJFKJD</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">hd</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">ig</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//i 不区分大小写</span></span>
+<span class="line"><span style="color:#A0ADA0;">//g 全局匹配</span></span>
+<span class="line"><span style="color:#A0ADA0;">//m 每一行单独处理(^,$)检测字符串的开头或结尾,如果想要它在每行的开头和结尾生效,则用m</span></span>
+<span class="line"><span style="color:#A0ADA0;">//u 宽字节匹配</span></span>
+<span class="line"><span style="color:#A0ADA0;">//y 匹配完不匹配后面（提升效率）</span></span>
+<span class="line"><span style="color:#A0ADA0;">//字符属性</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hdstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">dfa2332,hello! 正则表达式，哈！</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B07D48;">hdstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\p</span><span style="color:#AB5E3F;">{sc=Han}</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gu</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//按语言系统匹配中文 [&#39;正&#39;, &#39;则&#39;, &#39;表&#39;, &#39;达&#39;, &#39;式&#39;,  &#39;哈&#39;]</span></span>
+<span class="line"><span style="color:#B07D48;">hdstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\p</span><span style="color:#AB5E3F;">{P}</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gu</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//匹配所有标点符号  //[&#39;,&#39;, &#39;!&#39;, &#39;，&#39;, &#39;！&#39;]</span></span>
+<span class="line"><span style="color:#B07D48;">hdstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\p</span><span style="color:#AB5E3F;">{L}</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gu</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//匹配所有字母</span></span></code></pre></div><h2 id="_7-原子组中的原子表" tabindex="-1">7. 原子组中的原子表<code>([-\\/])</code> <a class="header-anchor" href="#_7-原子组中的原子表" aria-label="Permalink to &quot;7. 原子组中的原子表\`([-\\/])\`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dateStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-08-30</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">或</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022/08/30</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#758575DD;">//true </span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">{4}</span><span style="color:#666666;">([</span><span style="color:#C99076;">-</span><span style="color:#E6CC77;">\\/</span><span style="color:#666666;">])</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">{2}</span><span style="color:#4D9375;">\\1</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">{2}</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2022-08/30</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#C99076;">\\w</span><span style="color:#CB7676;">{3,7}</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gi</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//校验用户名</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hhtml</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;h2&gt;www.sougou.com&lt;/h2&gt;</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">&lt;</span><span style="color:#666666;">(</span><span style="color:#C4704F;">h</span><span style="color:#666666;">[</span><span style="color:#C99076;">1-6</span><span style="color:#666666;">])</span><span style="color:#C4704F;">&gt;</span><span style="color:#666666;">([</span><span style="color:#C99076;">\\s\\S</span><span style="color:#666666;">]</span><span style="color:#CB7676;">*</span><span style="color:#666666;">)</span><span style="color:#C4704F;">&lt;</span><span style="color:#E6CC77;">\\/</span><span style="color:#4D9375;">\\1</span><span style="color:#C4704F;">&gt;</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span><span style="color:#DBD7CAEE;">;</span></span>
+<span class="line"><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//匹配到的第一个</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">h1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//原子组1   </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">www.baidu.com</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//原子组2</span></span>
+<span class="line"><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//替换操作</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hhtml</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;p&gt;$1&lt;/p&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hhtml</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">p0</span><span style="color:#666666;">,</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">p2</span><span style="color:#666666;">)=&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;p&gt;</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">p1</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">&lt;/p&gt;</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span></span>
+<span class="line"><span style="color:#BD976A;">$</span><span style="color:#CB7676;">&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//找到内容本身 (\\0)</span></span>
+<span class="line"><span style="color:#80A665;">$</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;"> //内容前面的字符</span></span>
+<span class="line"><span style="color:#C98A7D;">$&#39; //内容后面的字符</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">let reg = /&lt;(h[1-6])&gt;([</span><span style="color:#C99076;">\\s\\S</span><span style="color:#C98A7D;">]*)&lt;</span><span style="color:#C99076;">\\/\\1</span><span style="color:#C98A7D;">&gt;/gi; //全局匹配</span></span>
+<span class="line"><span style="color:#C98A7D;">[</span></span>
+<span class="line"><span style="color:#C98A7D;">    &quot;&lt;h1&gt;www.baidu.com&lt;/h1&gt;&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">    &quot;&lt;h2&gt;www.sougou.com&lt;/h2&gt;&quot;</span></span>
+<span class="line"><span style="color:#C98A7D;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">let mailReg =  /^</span><span style="color:#C99076;">\\w</span><span style="color:#C98A7D;">[</span><span style="color:#C99076;">\\w</span><span style="color:#C98A7D;">-]+@[</span><span style="color:#C99076;">\\w</span><span style="color:#C98A7D;">]([</span><span style="color:#C99076;">\\w</span><span style="color:#C98A7D;">-]+.)+(com|cn|cc|net|org)/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C98A7D;">//不记录分组(?:) 原子组中使用?:则（match,exec输出结果中）不会记录此原子组</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dateStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-08-30</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">或</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022/08/30</span><span style="color:#B5695999;">&#39;</span><span style="color:#A0ADA0;">//true </span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">{4}</span><span style="color:#999999;">([</span><span style="color:#A65E2B;">-</span><span style="color:#BDA437;">\\/</span><span style="color:#999999;">])</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">{2}</span><span style="color:#1E754F;">\\1</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">{2}</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2022-08/30</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#A65E2B;">\\w</span><span style="color:#AB5959;">{3,7}</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gi</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//校验用户名</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hhtml</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;h2&gt;www.sougou.com&lt;/h2&gt;</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">h</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">1-6</span><span style="color:#999999;">])</span><span style="color:#AB5E3F;">&gt;</span><span style="color:#999999;">([</span><span style="color:#A65E2B;">\\s\\S</span><span style="color:#999999;">]</span><span style="color:#AB5959;">*</span><span style="color:#999999;">)</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#BDA437;">\\/</span><span style="color:#1E754F;">\\1</span><span style="color:#AB5E3F;">&gt;</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span><span style="color:#393A34;">;</span></span>
+<span class="line"><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//匹配到的第一个</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">h1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//原子组1   </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">www.baidu.com</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//原子组2</span></span>
+<span class="line"><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//替换操作</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hhtml</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">,</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;p&gt;$1&lt;/p&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hhtml</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">p0</span><span style="color:#999999;">,</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">p2</span><span style="color:#999999;">)=&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;p&gt;</span><span style="color:#999999;">\${</span><span style="color:#B56959;">p1</span><span style="color:#999999;">}</span><span style="color:#B56959;">&lt;/p&gt;</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#393A34;">                        </span></span>
+<span class="line"><span style="color:#B07D48;">$</span><span style="color:#AB5959;">&amp;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//找到内容本身 (\\0)</span></span>
+<span class="line"><span style="color:#59873A;">$</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;"> //内容前面的字符</span></span>
+<span class="line"><span style="color:#B56959;">$&#39; //内容后面的字符</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">let reg = /&lt;(h[1-6])&gt;([</span><span style="color:#A65E2B;">\\s\\S</span><span style="color:#B56959;">]*)&lt;</span><span style="color:#A65E2B;">\\/\\1</span><span style="color:#B56959;">&gt;/gi; //全局匹配</span></span>
+<span class="line"><span style="color:#B56959;">[</span></span>
+<span class="line"><span style="color:#B56959;">    &quot;&lt;h1&gt;www.baidu.com&lt;/h1&gt;&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">    &quot;&lt;h2&gt;www.sougou.com&lt;/h2&gt;&quot;</span></span>
+<span class="line"><span style="color:#B56959;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">let mailReg =  /^</span><span style="color:#A65E2B;">\\w</span><span style="color:#B56959;">[</span><span style="color:#A65E2B;">\\w</span><span style="color:#B56959;">-]+@[</span><span style="color:#A65E2B;">\\w</span><span style="color:#B56959;">]([</span><span style="color:#A65E2B;">\\w</span><span style="color:#B56959;">-]+.)+(com|cn|cc|net|org)/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B56959;">//不记录分组(?:) 原子组中使用?:则（match,exec输出结果中）不会记录此原子组</span></span></code></pre></div><h2 id="_8-贪婪匹配-、-、" tabindex="-1">8.贪婪匹配<code>+</code>、<code>*</code>、<code>?</code> <a class="header-anchor" href="#_8-贪婪匹配-、-、" aria-label="Permalink to &quot;8.贪婪匹配\`+\`、\`*\`、\`?\`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//一个或多个</span></span>
+<span class="line"><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//0个或多个</span></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//0个或1个</span></span>
+<span class="line"><span style="color:#666666;">{</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//0-10个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//禁止贪婪（往少的一方倾斜）</span></span>
+<span class="line"><span style="color:#CB7676;">+?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//一个 let reg = /(.*?at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;The fat&#39;]</span></span>
+<span class="line"><span style="color:#CB7676;">*?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//匹配到一个就停止let reg = /(.*?at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;The fat&#39;]</span></span>
+<span class="line"><span style="color:#CB7676;">??</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// let reg = /(.??at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;fat&#39;]</span></span>
+<span class="line"><span style="color:#666666;">{</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,}</span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">}</span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//3个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//案例练习</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">html</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;span&gt;www.baidu.com&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;span&gt;www.map.baidu.com&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;span&gt;www.know.baidu.com&lt;/span&gt;</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">regbaidu</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">&lt;span&gt;</span><span style="color:#666666;">[</span><span style="color:#C99076;">\\s\\S</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+</span><span style="color:#C4704F;">&lt;</span><span style="color:#E6CC77;">\\/</span><span style="color:#C4704F;">span&gt;</span><span style="color:#C98A7D99;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//贪婪到最后</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">regbaidu1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">&lt;span&gt;</span><span style="color:#666666;">([</span><span style="color:#C99076;">\\s\\S</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+?</span><span style="color:#666666;">)</span><span style="color:#C4704F;">&lt;</span><span style="color:#E6CC77;">\\/</span><span style="color:#C4704F;">span&gt;</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gi</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newhtml</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">html</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">regbaidu1</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">v</span><span style="color:#666666;">,</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">)=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;h2 style=&#39;color:red&#39;&gt;</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">p1</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">&lt;/h2&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//&quot;&lt;h2 style=&#39;color:red&#39;&gt;www.baidu.com&lt;/h2&gt;\\n&lt;h2 style=&#39;color:red&#39;&gt;www.map.baidu.com&lt;/h2&gt;\\n&lt;h2 style=&#39;color:red&#39;&gt;www.know.baidu.com&lt;/h2&gt;&quot;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//一个或多个</span></span>
+<span class="line"><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//0个或多个</span></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//0个或1个</span></span>
+<span class="line"><span style="color:#999999;">{</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#2F798A;">10</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//0-10个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//禁止贪婪（往少的一方倾斜）</span></span>
+<span class="line"><span style="color:#AB5959;">+?</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//一个 let reg = /(.*?at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;The fat&#39;]</span></span>
+<span class="line"><span style="color:#AB5959;">*?</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//匹配到一个就停止let reg = /(.*?at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;The fat&#39;]</span></span>
+<span class="line"><span style="color:#AB5959;">??</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// let reg = /(.??at)/ ==&gt; &#39;The fat cat sat on the mat. &#39;.match(reg) [&#39;fat&#39;]</span></span>
+<span class="line"><span style="color:#999999;">{</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,}</span><span style="color:#AB5959;">?</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">10</span><span style="color:#999999;">}</span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//3个</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//案例练习</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">html</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;span&gt;www.baidu.com&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;span&gt;www.map.baidu.com&lt;/span&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;span&gt;www.know.baidu.com&lt;/span&gt;</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">regbaidu</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">&lt;span&gt;</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">\\s\\S</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#BDA437;">\\/</span><span style="color:#AB5E3F;">span&gt;</span><span style="color:#B5695999;">/</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//贪婪到最后</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">regbaidu1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">&lt;span&gt;</span><span style="color:#999999;">([</span><span style="color:#A65E2B;">\\s\\S</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+?</span><span style="color:#999999;">)</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#BDA437;">\\/</span><span style="color:#AB5E3F;">span&gt;</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gi</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newhtml</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">html</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">regbaidu1</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">v</span><span style="color:#999999;">,</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">)=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;h2 style=&#39;color:red&#39;&gt;</span><span style="color:#999999;">\${</span><span style="color:#B56959;">p1</span><span style="color:#999999;">}</span><span style="color:#B56959;">&lt;/h2&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//&quot;&lt;h2 style=&#39;color:red&#39;&gt;www.baidu.com&lt;/h2&gt;\\n&lt;h2 style=&#39;color:red&#39;&gt;www.map.baidu.com&lt;/h2&gt;\\n&lt;h2 style=&#39;color:red&#39;&gt;www.know.baidu.com&lt;/h2&gt;&quot;</span></span></code></pre></div><h3 id="批量验证密码" tabindex="-1">批量验证密码 <a class="header-anchor" href="#批量验证密码" aria-label="Permalink to &quot;批量验证密码&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">psdRegs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">[</span><span style="color:#C99076;">0-9a-z</span><span style="color:#666666;">]</span><span style="color:#CB7676;">{6,10}</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">A-Z</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">0-9</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">psdRegs</span><span style="color:#666666;">.</span><span style="color:#80A665;">every</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fdkafad</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//false</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">psdRegs</span><span style="color:#666666;">.</span><span style="color:#80A665;">every</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1f12aA</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//true</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">psdRegs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">0-9a-z</span><span style="color:#999999;">]</span><span style="color:#AB5959;">{6,10}</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span><span style="color:#999999;">,</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">A-Z</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">0-9</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">psdRegs</span><span style="color:#999999;">.</span><span style="color:#59873A;">every</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fdkafad</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//false</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">psdRegs</span><span style="color:#999999;">.</span><span style="color:#59873A;">every</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1f12aA</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//true</span></span></code></pre></div><h2 id="_9-matchall" tabindex="-1">9. matchAll <a class="header-anchor" href="#_9-matchall" aria-label="Permalink to &quot;9. matchAll&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hstr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;h2&gt;www.map.baidu.com&lt;/h2&gt;</span></span>
+<span class="line"><span style="color:#C98A7D;">&lt;h3&gt;百度一下&lt;/h3&gt;</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">breg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">&lt;</span><span style="color:#666666;">(</span><span style="color:#C4704F;">h</span><span style="color:#666666;">[</span><span style="color:#C99076;">1-6</span><span style="color:#666666;">])</span><span style="color:#C4704F;">&gt;</span><span style="color:#666666;">([</span><span style="color:#C99076;">\\S\\s</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+</span><span style="color:#666666;">)</span><span style="color:#C4704F;">&lt;</span><span style="color:#E6CC77;">\\/</span><span style="color:#4D9375;">\\1</span><span style="color:#C4704F;">&gt;</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">gi</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">hstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#BD976A;">breg</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//全局匹配拿不到它每个原子组</span></span>
+<span class="line"><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">&lt;h2&gt;www.map.baidu.com&lt;/h2&gt;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">&lt;h3&gt;百度一下&lt;/h3&gt;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//解决方法：使用matchAll</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#BD976A;">it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hstr</span><span style="color:#666666;">.</span><span style="color:#80A665;">matchAll</span><span style="color:#666666;">(</span><span style="color:#BD976A;">breg</span><span style="color:#666666;">)){</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">dir</span><span style="color:#666666;">(</span><span style="color:#BD976A;">it</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">content</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">it</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">]);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//每个匹配项信息</span></span>
+<span class="line"><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">h1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//原子组1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">www.baidu.com</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//原子组2</span></span>
+<span class="line"><span style="color:#666666;">]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hstr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;h2&gt;www.map.baidu.com&lt;/h2&gt;</span></span>
+<span class="line"><span style="color:#B56959;">&lt;h3&gt;百度一下&lt;/h3&gt;</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">breg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">h</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">1-6</span><span style="color:#999999;">])</span><span style="color:#AB5E3F;">&gt;</span><span style="color:#999999;">([</span><span style="color:#A65E2B;">\\S\\s</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+</span><span style="color:#999999;">)</span><span style="color:#AB5E3F;">&lt;</span><span style="color:#BDA437;">\\/</span><span style="color:#1E754F;">\\1</span><span style="color:#AB5E3F;">&gt;</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">gi</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">hstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B07D48;">breg</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//全局匹配拿不到它每个原子组</span></span>
+<span class="line"><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">&lt;h2&gt;www.map.baidu.com&lt;/h2&gt;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">&lt;h3&gt;百度一下&lt;/h3&gt;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//解决方法：使用matchAll</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#B07D48;">it</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hstr</span><span style="color:#999999;">.</span><span style="color:#59873A;">matchAll</span><span style="color:#999999;">(</span><span style="color:#B07D48;">breg</span><span style="color:#999999;">)){</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">dir</span><span style="color:#999999;">(</span><span style="color:#B07D48;">it</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">content</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">it</span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">]);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//每个匹配项信息</span></span>
+<span class="line"><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&lt;h1&gt;www.baidu.com&lt;/h1&gt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">h1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//原子组1</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">www.baidu.com</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//原子组2</span></span>
+<span class="line"><span style="color:#999999;">]</span></span></code></pre></div><h2 id="" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155273.png" alt="image.png"> <a class="header-anchor" href="#" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155273.png)&quot;">​</a></h2><h2 id="_10-断言匹配" tabindex="-1">10. 断言匹配\`\` <a class="header-anchor" href="#_10-断言匹配" aria-label="Permalink to &quot;10. 断言匹配\`\`&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">百度</span><span style="color:#666666;">(?=</span><span style="color:#C4704F;">地图</span><span style="color:#666666;">)</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span></span>
+<span class="line"><span style="color:#758575DD;">// 只有百度后面有地图两字的才满足要求</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">htm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">百度一下，百度地图</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#BD976A;">innerHTML</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">&lt;a href=&quot;www.map.baidu.com&quot;&gt;$&amp;&lt;/a&gt;</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//判断 </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#666666;">&lt;=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//判断前面内容是..</span></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#666666;">&lt;=</span><span style="color:#BD976A;">href</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//前面是href=&quot;www.baidu.com&quot;符合</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?!</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//限制不是..</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;">  </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+</span><span style="color:#666666;">(?!</span><span style="color:#C99076;">\\d</span><span style="color:#666666;">)</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//限制最后一位不是数字</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?!</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//限定不包含关键词,必须以字母结束</span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">^</span><span style="color:#666666;">(?!</span><span style="color:#C99076;">.</span><span style="color:#CB7676;">*</span><span style="color:#C4704F;">百度</span><span style="color:#C99076;">.</span><span style="color:#CB7676;">*</span><span style="color:#666666;">)[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#CB7676;">{4,5}</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">?</span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;">!</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//前面不是数字 </span></span>
+<span class="line"><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">(?&lt;!</span><span style="color:#C99076;">\\d</span><span style="color:#CB7676;">+</span><span style="color:#666666;">)[</span><span style="color:#C99076;">a-z</span><span style="color:#666666;">]</span><span style="color:#CB7676;">+</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">i</span></span>
+<span class="line"><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">baidu88baidu</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span><span style="color:#BD976A;">reg</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//baidu</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">百度</span><span style="color:#999999;">(?=</span><span style="color:#AB5E3F;">地图</span><span style="color:#999999;">)</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 只有百度后面有地图两字的才满足要求</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">htm</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">百度一下，百度地图</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#B07D48;">innerHTML</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">,</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">&lt;a href=&quot;www.map.baidu.com&quot;&gt;$&amp;&lt;/a&gt;</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//判断 </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#999999;">&lt;=</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//判断前面内容是..</span></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#999999;">&lt;=</span><span style="color:#B07D48;">href</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//前面是href=&quot;www.baidu.com&quot;符合</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?!</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//限制不是..</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;">  </span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+</span><span style="color:#999999;">(?!</span><span style="color:#A65E2B;">\\d</span><span style="color:#999999;">)</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//限制最后一位不是数字</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?!</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//限定不包含关键词,必须以字母结束</span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">^</span><span style="color:#999999;">(?!</span><span style="color:#A65E2B;">.</span><span style="color:#AB5959;">*</span><span style="color:#AB5E3F;">百度</span><span style="color:#A65E2B;">.</span><span style="color:#AB5959;">*</span><span style="color:#999999;">)[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#AB5959;">{4,5}</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">?</span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;">!</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//前面不是数字 </span></span>
+<span class="line"><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reg</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#999999;">(?&lt;!</span><span style="color:#A65E2B;">\\d</span><span style="color:#AB5959;">+</span><span style="color:#999999;">)[</span><span style="color:#A65E2B;">a-z</span><span style="color:#999999;">]</span><span style="color:#AB5959;">+</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">i</span></span>
+<span class="line"><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">baidu88baidu</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span><span style="color:#B07D48;">reg</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//baidu</span></span></code></pre></div><h3 id="将链接替换为想要的网址" tabindex="-1">将链接替换为想要的网址 <a class="header-anchor" href="#将链接替换为想要的网址" aria-label="Permalink to &quot;将链接替换为想要的网址&quot;">​</a></h3><h2 id="-1" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155274.png" alt="image.png"> <a class="header-anchor" href="#-1" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155274.png)&quot;">​</a></h2><h3 id="将不含oss的替换" tabindex="-1">将不含oss的替换 <a class="header-anchor" href="#将不含oss的替换" aria-label="Permalink to &quot;将不含oss的替换&quot;">​</a></h3><h2 id="-2" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155275.png" alt="image.png"> <a class="header-anchor" href="#-2" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155275.png)&quot;">​</a></h2><h3 id="模糊电话后四位" tabindex="-1">模糊电话后四位 <a class="header-anchor" href="#模糊电话后四位" aria-label="Permalink to &quot;模糊电话后四位&quot;">​</a></h3><h2 id="-3" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155277.png" alt="image.png"> <a class="header-anchor" href="#-3" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155277.png)&quot;">​</a></h2><h2 id="案例练习" tabindex="-1">案例练习 <a class="header-anchor" href="#案例练习" aria-label="Permalink to &quot;案例练习&quot;">​</a></h2><h3 id="替换练习" tabindex="-1">替换练习 <a class="header-anchor" href="#替换练习" aria-label="Permalink to &quot;替换练习&quot;">​</a></h3><h2 id="-4" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155279.png" alt="image.png"> <a class="header-anchor" href="#-4" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155279.png)&quot;">​</a></h2><h3 id="给原子组起别名" tabindex="-1">给原子组起别名 <a class="header-anchor" href="#给原子组起别名" aria-label="Permalink to &quot;给原子组起别名&quot;">​</a></h3><h2 id="-5" tabindex="-1"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155280.png" alt="image.png"> <a class="header-anchor" href="#-5" aria-label="Permalink to &quot;![image.png](https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302032155280.png)&quot;">​</a></h2>`,39),e=[o];function t(c,r,y,A,D,B){return a(),n("div",null,e)}const h=s(p,[["render",t]]);export{C as __pageData,h as default};
diff --git "a/assets/FrontEnd_JavaScript_\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md.a9560fb8.lean.js" "b/assets/FrontEnd_JavaScript_\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md.a9560fb8.lean.js"
new file mode 100644
index 00000000..b48ff19c
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md.a9560fb8.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/正则表达式.md","filePath":"FrontEnd/JavaScript/正则表达式.md"}'),p={name:"FrontEnd/JavaScript/正则表达式.md"},o=l("",39),e=[o];function t(c,r,y,A,D,B){return a(),n("div",null,e)}const h=s(p,[["render",t]]);export{C as __pageData,h as default};
diff --git "a/assets/FrontEnd_JavaScript_\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md.f15b6a8f.js" "b/assets/FrontEnd_JavaScript_\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md.f15b6a8f.js"
new file mode 100644
index 00000000..242d622f
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md.f15b6a8f.js"
@@ -0,0 +1,89 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"获取目录结构(纯前端)","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/获取目录结构.md","filePath":"FrontEnd/JavaScript/获取目录结构.md"}'),p={name:"FrontEnd/JavaScript/获取目录结构.md"},o=l(`<h1 id="获取目录结构-纯前端" tabindex="-1">获取目录结构(纯前端) <a class="header-anchor" href="#获取目录结构-纯前端" aria-label="Permalink to &quot;获取目录结构(纯前端)&quot;">​</a></h1><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">@</span><span style="color:#80A665;">click</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">onSelectDir</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">select-btn</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">选择文件夹</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">button</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">button</span><span style="color:#393A34;"> </span><span style="color:#999999;">@</span><span style="color:#59873A;">click</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">onSelectDir</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">select-btn</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">选择文件夹</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">button</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">onSelectDir</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dirHandle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">showDirectoryPicker</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getDirData</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dirHandle</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">directoryData</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">/*递归获取文件夹下的所有文件, 并生成树状结构 </span></span>
+<span class="line"><span style="color:#758575DD;"> {</span></span>
+<span class="line"><span style="color:#758575DD;">&quot;id&quot;: &quot;o6ukw45e&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">&quot;name&quot;: &quot;core&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">&quot;ftype&quot;: &quot;dir&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">&quot;children&quot;: [</span></span>
+<span class="line"><span style="color:#758575DD;">  {</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;id&quot;: &quot;bc41wb16&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;name&quot;: &quot;.eslintrc.cjs&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;ftype&quot;: &quot;cjs&quot;</span></span>
+<span class="line"><span style="color:#758575DD;">  },]</span></span>
+<span class="line"><span style="color:#758575DD;">}</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">exclude</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">node_modules</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.git</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.vscode</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.prettierignore</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">dist</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">];</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//排除的文件夹</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getDirData</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">dirHandle</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dirData</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">of</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dirHandle</span><span style="color:#666666;">.</span><span style="color:#80A665;">values</span><span style="color:#666666;">())</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">kind</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//文件大小</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">kind</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">file</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">entry</span><span style="color:#666666;">.</span><span style="color:#80A665;">getFile</span><span style="color:#666666;">().</span><span style="color:#80A665;">then</span><span style="color:#666666;">(</span><span style="color:#BD976A;">file</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">file</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ftype</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">).</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">unknown</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">dirData</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomId</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">value</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">ftype</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">kind</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">directory</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">exclude</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">continue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">children</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">randomId</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">ftype</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dir</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">children</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">dirData</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">children</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getDirData</span><span style="color:#666666;">(</span><span style="color:#BD976A;">entry</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">children</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">onSelectDir</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dirHandle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">showDirectoryPicker</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getDirData</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dirHandle</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">directoryData</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*递归获取文件夹下的所有文件, 并生成树状结构 </span></span>
+<span class="line"><span style="color:#A0ADA0;"> {</span></span>
+<span class="line"><span style="color:#A0ADA0;">&quot;id&quot;: &quot;o6ukw45e&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">&quot;name&quot;: &quot;core&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">&quot;ftype&quot;: &quot;dir&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">&quot;children&quot;: [</span></span>
+<span class="line"><span style="color:#A0ADA0;">  {</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;id&quot;: &quot;bc41wb16&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;name&quot;: &quot;.eslintrc.cjs&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;ftype&quot;: &quot;cjs&quot;</span></span>
+<span class="line"><span style="color:#A0ADA0;">  },]</span></span>
+<span class="line"><span style="color:#A0ADA0;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">exclude</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">node_modules</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.git</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.vscode</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.prettierignore</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">dist</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">];</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//排除的文件夹</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getDirData</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">dirHandle</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dirData</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">of</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dirHandle</span><span style="color:#999999;">.</span><span style="color:#59873A;">values</span><span style="color:#999999;">())</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">kind</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//文件大小</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">kind</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">file</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">entry</span><span style="color:#999999;">.</span><span style="color:#59873A;">getFile</span><span style="color:#999999;">().</span><span style="color:#59873A;">then</span><span style="color:#999999;">(</span><span style="color:#B07D48;">file</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">file</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ftype</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">).</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">unknown</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">dirData</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomId</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">value</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">ftype</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">kind</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">directory</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">exclude</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">continue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">children</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#59873A;">randomId</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">ftype</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dir</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">children</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">dirData</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">children</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getDirData</span><span style="color:#999999;">(</span><span style="color:#B07D48;">entry</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">children</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,3),e=[o];function t(c,r,y,D,A,B){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md.f15b6a8f.lean.js" "b/assets/FrontEnd_JavaScript_\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md.f15b6a8f.lean.js"
new file mode 100644
index 00000000..f27069e8
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.md.f15b6a8f.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"获取目录结构(纯前端)","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/获取目录结构.md","filePath":"FrontEnd/JavaScript/获取目录结构.md"}'),p={name:"FrontEnd/JavaScript/获取目录结构.md"},o=l("",3),e=[o];function t(c,r,y,D,A,B){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\351\253\230\351\230\266\345\207\275\346\225\260.md.f3e81d0b.js" "b/assets/FrontEnd_JavaScript_\351\253\230\351\230\266\345\207\275\346\225\260.md.f3e81d0b.js"
new file mode 100644
index 00000000..5bad9437
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\351\253\230\351\230\266\345\207\275\346\225\260.md.f3e81d0b.js"
@@ -0,0 +1,293 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/高阶函数.md","filePath":"FrontEnd/JavaScript/高阶函数.md"}'),p={name:"FrontEnd/JavaScript/高阶函数.md"},o=l(`<h2 id="高阶函数之filter" tabindex="-1">高阶函数之filter <a class="header-anchor" href="#高阶函数之filter" aria-label="Permalink to &quot;高阶函数之filter&quot;">​</a></h2><h3 id="定义" tabindex="-1">定义 <a class="header-anchor" href="#定义" aria-label="Permalink to &quot;定义&quot;">​</a></h3><blockquote><ul><li>通过提供函数实现的依次测试的所有元素，true 则表示通过，如果为 false 则失败。</li><li>返回值是一个新数组，由通过测试为 true 的所有元素组成</li><li>如果没有任何数组元素通过测试，则返回空数组。</li></ul></blockquote><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li><strong>原始数组不发生改变</strong></li><li><strong>不会对空数组进行检测</strong></li><li><strong>满足条件的留下，是对原数组的过滤。</strong></li></ol></div><h3 id="语法" tabindex="-1">语法 <a class="header-anchor" href="#语法" aria-label="Permalink to &quot;语法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentValue</span><span style="color:#666666;">,</span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">, </span><span style="color:#80A665;">thisValue</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//currentValue  必须，遍历到的当前元素值</span></span>
+<span class="line"><span style="color:#758575DD;">//index         可选，当前元素的索引值</span></span>
+<span class="line"><span style="color:#758575DD;">//arr           可选，当前元素属于的数组对象</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentValue</span><span style="color:#999999;">,</span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">, </span><span style="color:#59873A;">thisValue</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//currentValue  必须，遍历到的当前元素值</span></span>
+<span class="line"><span style="color:#A0ADA0;">//index         可选，当前元素的索引值</span></span>
+<span class="line"><span style="color:#A0ADA0;">//arr           可选，当前元素属于的数组对象</span></span></code></pre></div><h3 id="用法" tabindex="-1">用法 <a class="header-anchor" href="#用法" aria-label="Permalink to &quot;用法&quot;">​</a></h3><h5 id="过滤小于-100" tabindex="-1">过滤小于 100 <a class="header-anchor" href="#过滤小于-100" aria-label="Permalink to &quot;过滤小于 100&quot;">​</a></h5><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">30</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">110</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">60</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">190</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">50</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newNums</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#BD976A;">nums</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newNums</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//[20,30,60,50]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#2F798A;">30</span><span style="color:#999999;">,</span><span style="color:#2F798A;">110</span><span style="color:#999999;">,</span><span style="color:#2F798A;">60</span><span style="color:#999999;">,</span><span style="color:#2F798A;">190</span><span style="color:#999999;">,</span><span style="color:#2F798A;">50</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newNums</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B07D48;">nums</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newNums</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//[20,30,60,50]</span></span></code></pre></div><h5 id="返回奇数元素" tabindex="-1">返回奇数元素 <a class="header-anchor" href="#返回奇数元素" aria-label="Permalink to &quot;返回奇数元素&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">=[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#CB7676;">%</span><span style="color:#4C9A91;">2</span><span style="color:#CB7676;">!==</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//[1,3,5]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">=[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#AB5959;">%</span><span style="color:#2F798A;">2</span><span style="color:#AB5959;">!==</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//[1,3,5]</span></span></code></pre></div><h5 id="数组去重" tabindex="-1">数组去重 <a class="header-anchor" href="#数组去重" aria-label="Permalink to &quot;数组去重&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">apple</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">strawberry</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">banana</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">pear</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">apple</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">orange</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">orange</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">strawberry</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//去除重复元素依靠的是indexOf总是返回第一个元素的位置，</span></span>
+<span class="line"><span style="color:#758575DD;">//后续的重复元素位置与indexOf返回的位置相等,表示是同一个元素</span></span>
+<span class="line"><span style="color:#758575DD;">//后续的重复元素位置与indexOf返回的位置不相等，表示元素重复并且过滤。</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">filterArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#CB7676;">===</span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;">;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">filterArr</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//[&quot;apple&quot;, &quot;strawberry&quot;, &quot;banana&quot;, &quot;pear&quot;, &quot;orange&quot;]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">apple</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">strawberry</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">banana</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">pear</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">apple</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">orange</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">orange</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">strawberry</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//去除重复元素依靠的是indexOf总是返回第一个元素的位置，</span></span>
+<span class="line"><span style="color:#A0ADA0;">//后续的重复元素位置与indexOf返回的位置相等,表示是同一个元素</span></span>
+<span class="line"><span style="color:#A0ADA0;">//后续的重复元素位置与indexOf返回的位置不相等，表示元素重复并且过滤。</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">filterArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#AB5959;">===</span><span style="color:#B07D48;">index</span><span style="color:#393A34;">;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">filterArr</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//[&quot;apple&quot;, &quot;strawberry&quot;, &quot;banana&quot;, &quot;pear&quot;, &quot;orange&quot;]</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">element</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">self</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">self</span><span style="color:#666666;">.</span><span style="color:#80A665;">indexOf</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">element</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// [1, 2, 3, 5, 4]</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">element</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">self</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">self</span><span style="color:#999999;">.</span><span style="color:#59873A;">indexOf</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">element</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr2</span><span style="color:#393A34;"> </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// [1, 2, 3, 5, 4]</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]</span></span></code></pre></div><h5 id="找出素数" tabindex="-1">找出素数 <a class="header-anchor" href="#找出素数" aria-label="Permalink to &quot;找出素数&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//除了1和自身,不能被其他数整除的</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">=[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">8</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">9</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">37</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">filter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> 	</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">sqrt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">%</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//除了1和自身,不能被其他数整除的</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">=[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">7</span><span style="color:#999999;">,</span><span style="color:#2F798A;">8</span><span style="color:#999999;">,</span><span style="color:#2F798A;">9</span><span style="color:#999999;">,</span><span style="color:#2F798A;">11</span><span style="color:#999999;">,</span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#2F798A;">37</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">filter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;"> 	</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">sqrt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">%</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">});</span></span></code></pre></div><h2 id="高阶函数之map" tabindex="-1">高阶函数之map <a class="header-anchor" href="#高阶函数之map" aria-label="Permalink to &quot;高阶函数之map&quot;">​</a></h2><h3 id="定义-1" tabindex="-1">定义 <a class="header-anchor" href="#定义-1" aria-label="Permalink to &quot;定义&quot;">​</a></h3><blockquote><p>原数组中的每个元素依次调用一个指定方法后，</p><p>返回值组成的新数组</p></blockquote><div class="tip custom-block"><p class="custom-block-title">TIP</p><ol><li><strong>原始数组不发生改变</strong></li><li><strong>不会对空数组进行检测</strong></li><li><strong>对原数组的加工，返回加工后新数组</strong></li></ol></div><h3 id="语法-1" tabindex="-1">语法 <a class="header-anchor" href="#语法-1" aria-label="Permalink to &quot;语法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">array</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentValue</span><span style="color:#666666;">,</span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">, </span><span style="color:#80A665;">thisValue</span><span style="color:#DBD7CAEE;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//currentValue  数组中正在处理的当前元素。</span></span>
+<span class="line"><span style="color:#758575DD;">//index可选  数组中正在处理的当前元素的索引。</span></span>
+<span class="line"><span style="color:#758575DD;">//array可选  map 方法被调用的数组。</span></span>
+<span class="line"><span style="color:#758575DD;">//thisArg可选 执行 callback 函数时使用的this 值。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">array</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentValue</span><span style="color:#999999;">,</span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;">, </span><span style="color:#59873A;">thisValue</span><span style="color:#393A34;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//currentValue  数组中正在处理的当前元素。</span></span>
+<span class="line"><span style="color:#A0ADA0;">//index可选  数组中正在处理的当前元素的索引。</span></span>
+<span class="line"><span style="color:#A0ADA0;">//array可选  map 方法被调用的数组。</span></span>
+<span class="line"><span style="color:#A0ADA0;">//thisArg可选 执行 callback 函数时使用的this 值。</span></span></code></pre></div><h3 id="用法-1" tabindex="-1">用法 <a class="header-anchor" href="#用法-1" aria-label="Permalink to &quot;用法&quot;">​</a></h3><h5 id="返回数组元素平方后的新数组" tabindex="-1">返回数组元素平方后的新数组 <a class="header-anchor" href="#返回数组元素平方后的新数组" aria-label="Permalink to &quot;返回数组元素平方后的新数组&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">pow</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//定义一个平方函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#CB7676;">*</span><span style="color:#BD976A;">x</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">=[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">8</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">9</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pow</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//map()传入的是函数对象本身</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">       </span><span style="color:#758575DD;">//结果：[1,4,9,16,25,36,49,64,81];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">pow</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">){</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//定义一个平方函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#AB5959;">*</span><span style="color:#B07D48;">x</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">=[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">7</span><span style="color:#999999;">,</span><span style="color:#2F798A;">8</span><span style="color:#999999;">,</span><span style="color:#2F798A;">9</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pow</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//map()传入的是函数对象本身</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">);</span><span style="color:#393A34;">       </span><span style="color:#A0ADA0;">//结果：[1,4,9,16,25,36,49,64,81];</span></span></code></pre></div><h5 id="用给定函数创建新字符串" tabindex="-1">用给定函数创建新字符串 <a class="header-anchor" href="#用给定函数创建新字符串" aria-label="Permalink to &quot;用给定函数创建新字符串&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mapString</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fn</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">str</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">((</span><span style="color:#BD976A;">c</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#80A665;">mapString</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">lorem ipsum</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#666666;">.</span><span style="color:#80A665;">toUpperCase</span><span style="color:#666666;">());</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// &#39;LOREM IPSUM&#39;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mapString</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fn</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">str</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">((</span><span style="color:#B07D48;">c</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#59873A;">mapString</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">lorem ipsum</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#999999;">.</span><span style="color:#59873A;">toUpperCase</span><span style="color:#999999;">());</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// &#39;LOREM IPSUM&#39;</span></span></code></pre></div><h5 id="把二维数组变字符串" tabindex="-1">把二维数组变字符串 <a class="header-anchor" href="#把二维数组变字符串" aria-label="Permalink to &quot;把二维数组变字符串&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">]];</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">row</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">row</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)).</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">;</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// &quot;1,2;3,4&quot;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">]];</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">row</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">row</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)).</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">;</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// &quot;1,2;3,4&quot;</span></span></code></pre></div><h5 id="数字序列转为数组-删除符号" tabindex="-1">数字序列转为数组，删除符号 <a class="header-anchor" href="#数字序列转为数组-删除符号" aria-label="Permalink to &quot;数字序列转为数组，删除符号&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">digitize</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">abs</span><span style="color:#666666;">(</span><span style="color:#C98A7D;">n</span><span style="color:#666666;">)</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">].</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#80A665;">digitize</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">123</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 3]</span></span>
+<span class="line"><span style="color:#80A665;">digitize</span><span style="color:#666666;">(</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">123</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 3]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">digitize</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">\${</span><span style="color:#B56959;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">abs</span><span style="color:#999999;">(</span><span style="color:#B56959;">n</span><span style="color:#999999;">)</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">].</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#59873A;">digitize</span><span style="color:#999999;">(</span><span style="color:#2F798A;">123</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 3]</span></span>
+<span class="line"><span style="color:#59873A;">digitize</span><span style="color:#999999;">(</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">123</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 3]</span></span></code></pre></div><h5 id="拿到所有图片的图片名称并以数组形式返回" tabindex="-1">拿到所有图片的图片名称并以数组形式返回 <a class="header-anchor" href="#拿到所有图片的图片名称并以数组形式返回" aria-label="Permalink to &quot;拿到所有图片的图片名称并以数组形式返回&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getImages</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">includeDuplicates</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">images</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementsByTagName</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">img</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">srcList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">images</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">(</span><span style="color:#BD976A;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">getAttribute</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">src</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">includeDuplicates</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">srcList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Set</span><span style="color:#666666;">(</span><span style="color:#BD976A;">srcList</span><span style="color:#666666;">)];</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">getImages</span><span style="color:#666666;">(</span><span style="color:#BD976A;">document</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#758575DD;">// [&#39;image1.jpg&#39;, &#39;image2.png&#39;, &#39;image1.png&#39;, &#39;...&#39;]</span></span>
+<span class="line"><span style="color:#80A665;">getImages</span><span style="color:#666666;">(</span><span style="color:#BD976A;">document</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// [&#39;image1.jpg&#39;, &#39;image2.png&#39;, &#39;...&#39;] 名字去重</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getImages</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">includeDuplicates</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">images</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementsByTagName</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">img</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">srcList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">images</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">(</span><span style="color:#B07D48;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">getAttribute</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">src</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">includeDuplicates</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">srcList</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Set</span><span style="color:#999999;">(</span><span style="color:#B07D48;">srcList</span><span style="color:#999999;">)];</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">getImages</span><span style="color:#999999;">(</span><span style="color:#B07D48;">document</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#A0ADA0;">// [&#39;image1.jpg&#39;, &#39;image2.png&#39;, &#39;image1.png&#39;, &#39;...&#39;]</span></span>
+<span class="line"><span style="color:#59873A;">getImages</span><span style="color:#999999;">(</span><span style="color:#B07D48;">document</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// [&#39;image1.jpg&#39;, &#39;image2.png&#39;, &#39;...&#39;] 名字去重</span></span></code></pre></div><h5 id="vue中循环注册组件" tabindex="-1">vue中循环注册组件 <a class="header-anchor" href="#vue中循环注册组件" aria-label="Permalink to &quot;vue中循环注册组件&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">Vue</span><span style="color:#666666;">.</span><span style="color:#80A665;">component</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ele</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">render</span><span style="color:#666666;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">createElement</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createElement</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">div</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			    </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">,{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">length</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">5</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}).</span><span style="color:#80A665;">map</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createElement</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Child</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">Vue</span><span style="color:#999999;">.</span><span style="color:#59873A;">component</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ele</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">render</span><span style="color:#999999;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">createElement</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createElement</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">div</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			    </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">,{</span><span style="color:#393A34;"> </span><span style="color:#998418;">length</span><span style="color:#999999;">:</span><span style="color:#2F798A;">5</span><span style="color:#393A34;"> </span><span style="color:#999999;">}).</span><span style="color:#59873A;">map</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createElement</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Child</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">});</span></span></code></pre></div><h2 id="高阶函数之-reduce" tabindex="-1">高阶函数之 reduce <a class="header-anchor" href="#高阶函数之-reduce" aria-label="Permalink to &quot;高阶函数之 reduce&quot;">​</a></h2><h3 id="定义-2" tabindex="-1">定义 <a class="header-anchor" href="#定义-2" aria-label="Permalink to &quot;定义&quot;">​</a></h3><blockquote><p><strong>原始数组不发生改变</strong></p><p><strong>对于空数组是不会执行回调函数的</strong></p></blockquote><h3 id="语法-2" tabindex="-1">语法 <a class="header-anchor" href="#语法-2" aria-label="Permalink to &quot;语法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">(</span><span style="color:#BD976A;">callback</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">initialValue</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#758575DD;">//callback （执行数组中每个值的函数，包含四个参数）</span></span>
+<span class="line"><span style="color:#758575DD;">//initialValue （作为第一次调用 callback 的第一个参数。）</span></span>
+<span class="line"><span style="color:#758575DD;">//如果没有提供initialValue，从索引1的地方开始执行callback方法，跳过第一个索引。</span></span>
+<span class="line"><span style="color:#758575DD;">//如果提供initialValue，从索引0开始</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">(</span><span style="color:#B07D48;">callback</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">initialValue</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#A0ADA0;">//callback （执行数组中每个值的函数，包含四个参数）</span></span>
+<span class="line"><span style="color:#A0ADA0;">//initialValue （作为第一次调用 callback 的第一个参数。）</span></span>
+<span class="line"><span style="color:#A0ADA0;">//如果没有提供initialValue，从索引1的地方开始执行callback方法，跳过第一个索引。</span></span>
+<span class="line"><span style="color:#A0ADA0;">//如果提供initialValue，从索引0开始</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//执行数组中每个值的callback 函数，包含四个参数</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">previousValue</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentValue</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">array</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">previousValue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentValue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">，</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//执行数组中每个值的callback 函数，包含四个参数</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">previousValue</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentValue</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">array</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">previousValue</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentValue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span><span style="color:#393A34;">，</span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>1、<strong>previousValue</strong> ：上一次调用回调返回的值，或者是提供的初始值（initialValue）</p><p>2、<strong>currentValue</strong> ：数组中当前被处理的元素</p><p>3、<strong>index</strong> ：当前元素在数组中的索引</p><p>4、<strong>array</strong> ：调用 reduce 函数 的数组</p></div><h3 id="用法-2" tabindex="-1">用法 <a class="header-anchor" href="#用法-2" aria-label="Permalink to &quot;用法&quot;">​</a></h3><h5 id="数组求和" tabindex="-1">数组求和 <a class="header-anchor" href="#数组求和" aria-label="Permalink to &quot;数组求和&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">].</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">acc</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">acc</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#80A665;">sum</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 10</span></span>
+<span class="line"><span style="color:#80A665;">sum</span><span style="color:#666666;">(...[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">]);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 10</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">].</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">acc</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">acc</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#59873A;">sum</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 10</span></span>
+<span class="line"><span style="color:#59873A;">sum</span><span style="color:#999999;">(...[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">]);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 10</span></span></code></pre></div><h5 id="数组去重-1" tabindex="-1">数组去重 <a class="header-anchor" href="#数组去重-1" aria-label="Permalink to &quot;数组去重&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">],[])</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">newArr</span><span style="color:#666666;">);</span><span style="color:#758575DD;">// [1, 2, 3, 4]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">],[])</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">newArr</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">// [1, 2, 3, 4]</span></span></code></pre></div><h5 id="计算两个或多个数字的平均值" tabindex="-1">计算两个或多个数字的平均值 <a class="header-anchor" href="#计算两个或多个数字的平均值" aria-label="Permalink to &quot;计算两个或多个数字的平均值&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">average</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">nums</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">nums</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">acc</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">acc</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nums</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#80A665;">average</span><span style="color:#666666;">(...[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">]);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 2</span></span>
+<span class="line"><span style="color:#80A665;">average</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 2</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">average</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">nums</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">nums</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">acc</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">acc</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nums</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#59873A;">average</span><span style="color:#999999;">(...[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">]);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 2</span></span>
+<span class="line"><span style="color:#59873A;">average</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 2</span></span></code></pre></div><h5 id="将多维数组转化为一维" tabindex="-1">将多维数组转化为一维 <a class="header-anchor" href="#将多维数组转化为一维" aria-label="Permalink to &quot;将多维数组转化为一维&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,[</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">7</span><span style="color:#666666;">]]]</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">convertArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,...</span><span style="color:#80A665;">convertArr</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">],[])</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#80A665;">convertArr</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//[0, 1, 2, 3, 4, 5, 6, 7]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,[</span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span><span style="color:#2F798A;">6</span><span style="color:#999999;">,</span><span style="color:#2F798A;">7</span><span style="color:#999999;">]]]</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">convertArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,...</span><span style="color:#59873A;">convertArr</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">],[])</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#59873A;">convertArr</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//[0, 1, 2, 3, 4, 5, 6, 7]</span></span></code></pre></div><h5 id="对象里的属性求和" tabindex="-1">对象里的属性求和 <a class="header-anchor" href="#对象里的属性求和" aria-label="Permalink to &quot;对象里的属性求和&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">subject</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">math</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">score</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">subject</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">chinese</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">score</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">subject</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">english</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">score</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">30</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">prev</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#BD976A;">score</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">prev</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sum</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//60</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">subject</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">math</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">score</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">subject</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">chinese</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">score</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">subject</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">english</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">score</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">30</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">prev</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#B07D48;">score</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">prev</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sum</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//60</span></span></code></pre></div><h5 id="统计数组中每个元素出现的次数" tabindex="-1">统计数组中每个元素出现的次数 <a class="header-anchor" href="#统计数组中每个元素出现的次数" aria-label="Permalink to &quot;统计数组中每个元素出现的次数&quot;">​</a></h5><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">arr11</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">111</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">22</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">111</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">234</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">999</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">999</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">111</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr11</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">item</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">item</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">item</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span></span>
+<span class="line"><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{})</span></span>
+<span class="line"><span style="color:#758575DD;">//{ &#39;22&#39;: 1, &#39;111&#39;: 3, &#39;234&#39;: 1, &#39;999&#39;: 2 }</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">arr11</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">111</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">22</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">111</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">234</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">999</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">999</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">111</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr11</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">item</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">item</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">item</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span></span>
+<span class="line"><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">{})</span></span>
+<span class="line"><span style="color:#A0ADA0;">//{ &#39;22&#39;: 1, &#39;111&#39;: 3, &#39;234&#39;: 1, &#39;999&#39;: 2 }</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">names</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Alice</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Bob</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Tiff</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Bruce</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Alice</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nameNum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">names</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cur</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">]</span><span style="color:#CB7676;">++</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span></span>
+<span class="line"><span style="color:#666666;">},{})</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">nameNum</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">names</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Alice</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Bob</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Tiff</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Bruce</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Alice</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nameNum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">names</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cur</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">]</span><span style="color:#AB5959;">++</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span></span>
+<span class="line"><span style="color:#999999;">},{})</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">nameNum</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}</span></span></code></pre></div><h2 id="高阶函数之-sort" tabindex="-1">高阶函数之 sort <a class="header-anchor" href="#高阶函数之-sort" aria-label="Permalink to &quot;高阶函数之 sort&quot;">​</a></h2><h3 id="定义-3" tabindex="-1">定义 <a class="header-anchor" href="#定义-3" aria-label="Permalink to &quot;定义&quot;">​</a></h3><blockquote><p><code>sort() </code>方法用原地算法对数组的元素进行排序，并返回数组，</p><p>该排序方法会在原数组上直接进行排序，并<strong>不会生成一个排好序的新数组</strong>。</p><p>排序算法现在是稳定的。默认排序顺序是根据字符串 Unicode 码点。</p></blockquote><h3 id="语法-3" tabindex="-1">语法 <a class="header-anchor" href="#语法-3" aria-label="Permalink to &quot;语法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">sort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sortby</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//sort() 在没有参数时，返回的结果是按升序来排列的</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//sortby	可选。规定排序顺序。必须是函数。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">sort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sortby</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//sort() 在没有参数时，返回的结果是按升序来排列的</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//sortby	可选。规定排序顺序。必须是函数。</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><strong>function(a, b)(return a- b)</strong></p><ul><li>如果指明了参数：compare (a, b) ，（a, b 是两个要比较的元素，a 在 b 前面）那么数组会按照该函数的返回值排序</li><li>如果 compare (a, b) 返回值 &lt; 0 ，a 会被排列到 b 之前，即参数 a, b 的顺序保存原样；</li><li>如果 compare (a, b) 返回值 = 0 ，a 和 b 的相对位置不变。（ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守）</li><li>如果 compare (a, b) 返回值 &gt; 0 ，b 会被排列到 a 之前。即交换参数 a, b 的顺序</li></ul></div><h3 id="用法-3" tabindex="-1">用法 <a class="header-anchor" href="#用法-3" aria-label="Permalink to &quot;用法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sortby</span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">koala</span><span style="color:#666666;">=[</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">].</span><span style="color:#80A665;">sort</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sortby</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">koala</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// [1 , 2 , 10 , 20]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sortby</span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">koala</span><span style="color:#999999;">=[</span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">].</span><span style="color:#59873A;">sort</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sortby</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">koala</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// [1 , 2 , 10 , 20]</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">sort</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// [1, 2, 10, 20]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">sort</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// [1, 2, 10, 20]</span></span></code></pre></div><h2 id="自定义高阶函数" tabindex="-1">自定义高阶函数 <a class="header-anchor" href="#自定义高阶函数" aria-label="Permalink to &quot;自定义高阶函数&quot;">​</a></h2><h4 id="字符串数组每项长度、并转换为整数数组" tabindex="-1">字符串数组每项长度、并转换为整数数组 <a class="header-anchor" href="#字符串数组每项长度、并转换为整数数组" aria-label="Permalink to &quot;字符串数组每项长度、并转换为整数数组&quot;">​</a></h4><h3 id="语法-4" tabindex="-1">语法 <a class="header-anchor" href="#语法-4" aria-label="Permalink to &quot;语法&quot;">​</a></h3><blockquote><ul><li>创建了一个高阶函数 mapForEach ，它接受一个数组和一个回调函数 fn。</li><li>它循环遍历传入的数组，并在每次迭代时在 newArray.push 方法调用回调函数 fn 。</li><li>回调函数 fn 接收数组的当前元素并返回该元素的长度，该元素存储在 newArray 中。</li><li>for 循环完成后，newArray 被返回并赋值给 lenArray。</li></ul></blockquote><h3 id="用法-4" tabindex="-1">用法 <a class="header-anchor" href="#用法-4" aria-label="Permalink to &quot;用法&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">strArray</span><span style="color:#666666;">=[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">JavaScript</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">PHP</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">JAVA</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">C</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Python</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mapForEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">,</span><span style="color:#BD976A;">fn</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArray</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">newArray</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#80A665;">fn</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArray</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lenArray</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mapForEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">strArray</span><span style="color:#666666;">,(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">lenArray</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//[10,3,4,1,6]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">strArray</span><span style="color:#999999;">=[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">JavaScript</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">PHP</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">JAVA</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">C</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Python</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mapForEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">,</span><span style="color:#B07D48;">fn</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArray</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">newArray</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#59873A;">fn</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]));</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArray</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lenArray</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mapForEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">strArray</span><span style="color:#999999;">,(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">lenArray</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//[10,3,4,1,6]</span></span></code></pre></div>`,71),e=[o];function c(r,t,y,A,D,B){return a(),n("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_JavaScript_\351\253\230\351\230\266\345\207\275\346\225\260.md.f3e81d0b.lean.js" "b/assets/FrontEnd_JavaScript_\351\253\230\351\230\266\345\207\275\346\225\260.md.f3e81d0b.lean.js"
new file mode 100644
index 00000000..5f9052ca
--- /dev/null
+++ "b/assets/FrontEnd_JavaScript_\351\253\230\351\230\266\345\207\275\346\225\260.md.f3e81d0b.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/JavaScript/高阶函数.md","filePath":"FrontEnd/JavaScript/高阶函数.md"}'),p={name:"FrontEnd/JavaScript/高阶函数.md"},o=l("",71),e=[o];function c(r,t,y,A,D,B){return a(),n("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_Shell_\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md.7ce896dd.js" "b/assets/FrontEnd_Shell_\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md.7ce896dd.js"
new file mode 100644
index 00000000..8093fa74
--- /dev/null
+++ "b/assets/FrontEnd_Shell_\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md.7ce896dd.js"
@@ -0,0 +1,147 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"自动部署","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/Shell/自动部署脚本.md","filePath":"FrontEnd/Shell/自动部署脚本.md"}'),l={name:"FrontEnd/Shell/自动部署脚本.md"},o=p(`<h1 id="自动部署" tabindex="-1">自动部署 <a class="header-anchor" href="#自动部署" aria-label="Permalink to &quot;自动部署&quot;">​</a></h1><h2 id="脚本" tabindex="-1">脚本 <a class="header-anchor" href="#脚本" aria-label="Permalink to &quot;脚本&quot;">​</a></h2><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">#!/usr/bin/env sh</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">set</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-e</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">run</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docs:build</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">cd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">docs/.vitepress/dist</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">init</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-A</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">commit</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-m</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">🎉deploy gh-pages🎉</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">push</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">git@github.com:fxzer/zerdocs.git</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">master:gh-pages</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">cd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">..</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#80A665;">rm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-rf</span><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D;">dist</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B8A965;">cd</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">-</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">#!/usr/bin/env sh</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">set</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-e</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">run</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docs:build</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">cd</span><span style="color:#393A34;"> </span><span style="color:#B56959;">docs/.vitepress/dist</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">init</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">add</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-A</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">commit</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-m</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">🎉deploy gh-pages🎉</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">push</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-f</span><span style="color:#393A34;"> </span><span style="color:#B56959;">git@github.com:fxzer/zerdocs.git</span><span style="color:#393A34;"> </span><span style="color:#B56959;">master:gh-pages</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">cd</span><span style="color:#393A34;"> </span><span style="color:#B56959;">..</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#59873A;">rm</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-rf</span><span style="color:#393A34;">  </span><span style="color:#B56959;">dist</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#998418;">cd</span><span style="color:#393A34;"> </span><span style="color:#B56959;">-</span></span></code></pre></div><h2 id="action" tabindex="-1">Action <a class="header-anchor" href="#action" aria-label="Permalink to &quot;Action&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">主要流程</p><p>检查代码(Checkout) ===&gt; 启动node环境(Setup Node) ===&gt; 构建静态文件(Build) ===&gt; 把静态文件push到gh-pages,触发gh-pages自带的workflow部署(Push To GitHub Pages)===&gt; 把仓库同步到Gitee(Sync to Gitee) ===&gt; 触发Gitee Pages服务部署(Build Gitee Pages)</p></div><div class="language-yml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">yml</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Deploy GitHub Pages And Sync to Gitee</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;"># 触发条件：在 push 到 master 分支后</span></span>
+<span class="line"><span style="color:#4D9375;">on</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">push</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">branches</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">master</span></span>
+<span class="line"><span style="color:#758575DD;"># 任务</span></span>
+<span class="line"><span style="color:#B8A965;">jobs</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">build-and-deploy</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">runs-on</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ubuntu-latest</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#部署运行环境搭建</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">steps</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Checkout 🛎️</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">actions/checkout@main</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">persist-credentials</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fetch-depth</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#github代码拉取深度</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Setup Node  🎬</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">actions/setup-node@main</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">node-version</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">lts/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Build 🔧</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">run</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">|</span></span>
+<span class="line"><span style="color:#C98A7D;">          yarn</span></span>
+<span class="line"><span style="color:#C98A7D;">          yarn run build</span></span>
+<span class="line"><span style="color:#C98A7D;">          ls -lrth</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">📲 Push To GitHub Pages</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ftnext/action-push-ghpages@v1.0.0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">build_dir</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">dist</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">github_token</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">\${{ secrets.DEPLOY_TOKEN }}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">🔁 Sync to Gitee</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#同步到Gitee</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">wearerequired/git-mirror-action@master</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">env</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意在此项目的 Settings-&gt;Actions-&gt; Secrets 配置 GITEE_RSA_PRIVATE_KEY</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">SSH_PRIVATE_KEY</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">\${{ secrets.GITEE_RSA_PRIVATE_KEY }}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意替换为你的 GitHub 源仓库地址</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">source-repo</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">git@github.com:fxzer/zerdocs.git</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意替换为你的 Gitee 目标仓库地址</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">destination-repo</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">git@gitee.com:fxzer/zerdocs.git</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">✅ Build Gitee Pages</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">#触发Gitee自动部署</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">uses</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">yanglbme/gitee-pages-action@master</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">with</span><span style="color:#666666;">:</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意替换为你的 Gitee 用户名</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">gitee-username</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">fxzer</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意在 Settings-&gt;Secrets 配置 GITEE_PASSWORD</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">gitee-password</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">\${{ secrets.GITEE_PASSWORD }}</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 注意替换为你的 Gitee 仓库 </span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 坑点:https://gitee.com/fxzer/zerdocs --&gt;则填:fxzer/zerdocs,注意仓库名和路径名不一致问题</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">gitee-repo</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">fxzer/zerdocs</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;"># 要部署的分支</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">branch</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">gh-pages</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Deploy GitHub Pages And Sync to Gitee</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;"># 触发条件：在 push 到 master 分支后</span></span>
+<span class="line"><span style="color:#1E754F;">on</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">push</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">branches</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#B56959;">master</span></span>
+<span class="line"><span style="color:#A0ADA0;"># 任务</span></span>
+<span class="line"><span style="color:#998418;">jobs</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">build-and-deploy</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">runs-on</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ubuntu-latest</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#部署运行环境搭建</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">steps</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Checkout 🛎️</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">actions/checkout@main</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">persist-credentials</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fetch-depth</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#github代码拉取深度</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Setup Node  🎬</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">actions/setup-node@main</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">node-version</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">lts/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Build 🔧</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">run</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">|</span></span>
+<span class="line"><span style="color:#B56959;">          yarn</span></span>
+<span class="line"><span style="color:#B56959;">          yarn run build</span></span>
+<span class="line"><span style="color:#B56959;">          ls -lrth</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">📲 Push To GitHub Pages</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ftnext/action-push-ghpages@v1.0.0</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">build_dir</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">dist</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">github_token</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">\${{ secrets.DEPLOY_TOKEN }}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">🔁 Sync to Gitee</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#同步到Gitee</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">wearerequired/git-mirror-action@master</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">env</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意在此项目的 Settings-&gt;Actions-&gt; Secrets 配置 GITEE_RSA_PRIVATE_KEY</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">SSH_PRIVATE_KEY</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">\${{ secrets.GITEE_RSA_PRIVATE_KEY }}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意替换为你的 GitHub 源仓库地址</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">source-repo</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">git@github.com:fxzer/zerdocs.git</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意替换为你的 Gitee 目标仓库地址</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">destination-repo</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">git@gitee.com:fxzer/zerdocs.git</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">-</span><span style="color:#393A34;"> </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">✅ Build Gitee Pages</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">#触发Gitee自动部署</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">uses</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">yanglbme/gitee-pages-action@master</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">with</span><span style="color:#999999;">:</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意替换为你的 Gitee 用户名</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">gitee-username</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">fxzer</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意在 Settings-&gt;Secrets 配置 GITEE_PASSWORD</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">gitee-password</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">\${{ secrets.GITEE_PASSWORD }}</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 注意替换为你的 Gitee 仓库 </span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 坑点:https://gitee.com/fxzer/zerdocs --&gt;则填:fxzer/zerdocs,注意仓库名和路径名不一致问题</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">gitee-repo</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">fxzer/zerdocs</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;"># 要部署的分支</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">branch</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B56959;">gh-pages</span></span></code></pre></div>`,6),e=[o];function c(t,r,y,A,i,D){return n(),a("div",null,e)}const C=s(l,[["render",c]]);export{B as __pageData,C as default};
diff --git "a/assets/FrontEnd_Shell_\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md.7ce896dd.lean.js" "b/assets/FrontEnd_Shell_\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md.7ce896dd.lean.js"
new file mode 100644
index 00000000..96a543b8
--- /dev/null
+++ "b/assets/FrontEnd_Shell_\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.md.7ce896dd.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"自动部署","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/Shell/自动部署脚本.md","filePath":"FrontEnd/Shell/自动部署脚本.md"}'),l={name:"FrontEnd/Shell/自动部署脚本.md"},o=p("",6),e=[o];function c(t,r,y,A,i,D){return n(),a("div",null,e)}const C=s(l,[["render",c]]);export{B as __pageData,C as default};
diff --git "a/assets/FrontEnd_TypeScript_\345\210\235\345\255\246\347\254\224\350\256\260.md.a7be054a.js" "b/assets/FrontEnd_TypeScript_\345\210\235\345\255\246\347\254\224\350\256\260.md.a7be054a.js"
new file mode 100644
index 00000000..5815cce7
--- /dev/null
+++ "b/assets/FrontEnd_TypeScript_\345\210\235\345\255\246\347\254\224\350\256\260.md.a7be054a.js"
@@ -0,0 +1,987 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/TypeScript/初学笔记.md","filePath":"FrontEnd/TypeScript/初学笔记.md"}'),p={name:"FrontEnd/TypeScript/初学笔记.md"},o=l(`<h2 id="基础语法" tabindex="-1">基础语法 <a class="header-anchor" href="#基础语法" aria-label="Permalink to &quot;基础语法&quot;">​</a></h2><h3 id="一、基础类型" tabindex="-1">一、基础类型 <a class="header-anchor" href="#一、基础类型" aria-label="Permalink to &quot;一、基础类型&quot;">​</a></h3><h4 id="js类型" tabindex="-1">JS类型 <a class="header-anchor" href="#js类型" aria-label="Permalink to &quot;JS类型&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">boolean</span></span>
+<span class="line"><span style="color:#BD976A;">number</span></span>
+<span class="line"><span style="color:#BD976A;">string</span></span>
+<span class="line"><span style="color:#BD976A;">array</span></span>
+<span class="line"><span style="color:#BD976A;">object</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//对象: {}、 function(){}</span></span>
+<span class="line"><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#CB7676;">undefined</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//默认情况下null和undefined是所有类型的子类型。可以赋值给其他类型</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">boolean</span></span>
+<span class="line"><span style="color:#B07D48;">number</span></span>
+<span class="line"><span style="color:#B07D48;">string</span></span>
+<span class="line"><span style="color:#B07D48;">array</span></span>
+<span class="line"><span style="color:#B07D48;">object</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//对象: {}、 function(){}</span></span>
+<span class="line"><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#AB5959;">undefined</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//默认情况下null和undefined是所有类型的子类型。可以赋值给其他类型</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><strong>object 类型常见用法</strong></p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//1.严格要求</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#CB7676;"> </span><span style="color:#666666;">:{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> ,</span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= { </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">age </span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//1.严格要求</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#AB5959;"> </span><span style="color:#999999;">:{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> ,</span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">= { </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">age </span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span><span style="color:#999999;">}</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//2.可选</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#CB7676;"> </span><span style="color:#666666;">:{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> ,</span><span style="color:#BD976A;">age</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= { </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsna </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//2.可选</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#AB5959;"> </span><span style="color:#999999;">:{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> ,</span><span style="color:#B07D48;">age</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">= { </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsna </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//3.多个可选</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#CB7676;"> </span><span style="color:#666666;">:{</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> ,[</span><span style="color:#BD976A;">porname</span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;">]:</span><span style="color:#5DA994;">string</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= { </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsna </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">address</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">上海</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#B8A965;">gender</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">男</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//3.多个可选</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#AB5959;"> </span><span style="color:#999999;">:{</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> ,[</span><span style="color:#B07D48;">porname</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">]:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">= { </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsna </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">address</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">上海</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#998418;">gender</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">男</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">}</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//4.箭头函数设置函数结构</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#80A665;">d</span><span style="color:#666666;">: (</span><span style="color:#BD976A;">c</span><span style="color:#666666;">:</span><span style="color:#5DA994;">number</span><span style="color:#666666;">,</span><span style="color:#BD976A;">d</span><span style="color:#666666;">:</span><span style="color:#5DA994;">number</span><span style="color:#666666;">)=&gt;</span><span style="color:#5DA994;">number</span></span>
+<span class="line"><span style="color:#80A665;">d</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">n1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">n2</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n1</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">n2</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//4.箭头函数设置函数结构</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#59873A;">d</span><span style="color:#999999;">: (</span><span style="color:#B07D48;">c</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">,</span><span style="color:#B07D48;">d</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">)=&gt;</span><span style="color:#2E8F82;">number</span></span>
+<span class="line"><span style="color:#59873A;">d</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">n1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">n2</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n1</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">n2</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><strong>数组</strong></p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">[] 	</span><span style="color:#758575DD;">//字符串数组 arr = [&#39;zhansan&#39;,&#39;lisi&#39;]</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">arr1</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Array</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">number</span><span style="color:#666666;">&gt;	</span><span style="color:#758575DD;">//数值数组 arr1 = [1,2,3,4,5]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">[] 	</span><span style="color:#A0ADA0;">//字符串数组 arr = [&#39;zhansan&#39;,&#39;lisi&#39;]</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">arr1</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Array</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">&gt;	</span><span style="color:#A0ADA0;">//数值数组 arr1 = [1,2,3,4,5]</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><strong>元组</strong></p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">h</span><span style="color:#666666;">: [</span><span style="color:#5DA994;">string</span><span style="color:#666666;"> ,</span><span style="color:#5DA994;">number</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#BD976A;">h</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hello</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">123</span><span style="color:#666666;">]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">h</span><span style="color:#999999;">: [</span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> ,</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#B07D48;">h</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hello</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">123</span><span style="color:#999999;">]</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><strong>枚举</strong></p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">enum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Color</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#BD976A;">Red</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Green</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Blue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">c</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Color</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">Color</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Green</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//c为2</span></span>
+<span class="line"><span style="color:#BD976A;">Color</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// Green 枚举的值得到它的名字</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">enum</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Color</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B07D48;">Red</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Green</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Blue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">c</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Color</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">Color</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Green</span><span style="color:#999999;">;</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//c为2</span></span>
+<span class="line"><span style="color:#B07D48;">Color</span><span style="color:#999999;">[</span><span style="color:#2F798A;">2</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// Green 枚举的值得到它的名字</span></span></code></pre></div><h4 id="ts新增类型" tabindex="-1">TS新增类型 <a class="header-anchor" href="#ts新增类型" aria-label="Permalink to &quot;TS新增类型&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">字面量</span><span style="color:#DBD7CAEE;">	  </span><span style="color:#758575DD;">//限制类型在几个值之间（联合类型）例：let b : &#39;male&#39;|&#39;amale&#39; 、 </span></span>
+<span class="line"><span style="color:#BD976A;">enum</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//枚举类型</span></span>
+<span class="line"><span style="color:#BD976A;">tuple</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//元组 [string, number];</span></span>
+<span class="line"><span style="color:#CB7676;">void</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//表示没有返回值，不返回或返回undefined，和其他类型平等关系，不能直接赋值给其他类型	</span></span>
+<span class="line"><span style="color:#BD976A;">Any</span><span style="color:#DBD7CAEE;">		</span><span style="color:#758575DD;">//任意类型</span></span>
+<span class="line"><span style="color:#BD976A;">unknown</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//未知类型 </span></span>
+<span class="line"><span style="color:#BD976A;">never</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//永远不返回结果，没有类型是never的子类型、没有类型可以赋值给never类型（除了never本身之外）</span></span>
+<span class="line"><span style="color:#758575DD;">//函数用于执行不到返回值那一步，(抛出异常或死循环)的返回值类型</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">字面量</span><span style="color:#393A34;">	  </span><span style="color:#A0ADA0;">//限制类型在几个值之间（联合类型）例：let b : &#39;male&#39;|&#39;amale&#39; 、 </span></span>
+<span class="line"><span style="color:#B07D48;">enum</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//枚举类型</span></span>
+<span class="line"><span style="color:#B07D48;">tuple</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//元组 [string, number];</span></span>
+<span class="line"><span style="color:#AB5959;">void</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//表示没有返回值，不返回或返回undefined，和其他类型平等关系，不能直接赋值给其他类型	</span></span>
+<span class="line"><span style="color:#B07D48;">Any</span><span style="color:#393A34;">		</span><span style="color:#A0ADA0;">//任意类型</span></span>
+<span class="line"><span style="color:#B07D48;">unknown</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//未知类型 </span></span>
+<span class="line"><span style="color:#B07D48;">never</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//永远不返回结果，没有类型是never的子类型、没有类型可以赋值给never类型（除了never本身之外）</span></span>
+<span class="line"><span style="color:#A0ADA0;">//函数用于执行不到返回值那一步，(抛出异常或死循环)的返回值类型</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><code>unknown</code>与<code>any</code>区别</p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">a</span><span style="color:#666666;">: </span><span style="color:#5DA994;">any</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> </span></span>
+<span class="line"><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// OK  any类型可以赋值任意类型</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">a</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">any</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> </span></span>
+<span class="line"><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// OK  any类型可以赋值任意类型</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">e</span><span style="color:#666666;">: </span><span style="color:#5DA994;">unknown</span></span>
+<span class="line"><span style="color:#BD976A;">e</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">TypeScript</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">f</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span></span>
+<span class="line"><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">//Error 未知类型不能直接赋值给其他变量（类型安全的any）</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//处理方式一：</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">e</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">string</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//处理方式二：类型断言</span></span>
+<span class="line"><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">as</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">string</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">e</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">unknown</span></span>
+<span class="line"><span style="color:#B07D48;">e</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">TypeScript</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">f</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">//Error 未知类型不能直接赋值给其他变量（类型安全的any）</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//处理方式一：</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">e</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">string</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//处理方式二：类型断言</span></span>
+<span class="line"><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">as</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">string</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title"><code>|</code>和<code>&amp;</code> ：表示或，&amp;：表示且</p></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">g</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> | </span><span style="color:#5DA994;">boolean</span></span>
+<span class="line"><span style="color:#BD976A;">g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">sdfj</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">g</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">h</span><span style="color:#CB7676;"> </span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;"> &amp; </span><span style="color:#5DA994;">number</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">i</span><span style="color:#666666;">: {</span><span style="color:#BD976A;">name</span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;">} &amp;{</span><span style="color:#BD976A;">age</span><span style="color:#666666;">:</span><span style="color:#5DA994;">number</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#BD976A;">f</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">= {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">h hh</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">18</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">g</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> | </span><span style="color:#2E8F82;">boolean</span></span>
+<span class="line"><span style="color:#B07D48;">g</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">sdfj</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">g</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">h</span><span style="color:#AB5959;"> </span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> &amp; </span><span style="color:#2E8F82;">number</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">i</span><span style="color:#999999;">: {</span><span style="color:#B07D48;">name</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">} &amp;{</span><span style="color:#B07D48;">age</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">number</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#B07D48;">f</span><span style="color:#393A34;"> </span><span style="color:#999999;">= {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">h hh</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">18</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="二、类型声名" tabindex="-1">二、类型声名 <a class="header-anchor" href="#二、类型声名" aria-label="Permalink to &quot;二、类型声名&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">name</span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;">	 </span><span style="color:#758575DD;">//声名string类型变量</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">age</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">19</span><span style="color:#CB7676;">	 </span><span style="color:#758575DD;">//类型声名可省略，会自动类型推断，age推断为number</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">name</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">	 </span><span style="color:#A0ADA0;">//声名string类型变量</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">age</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">19</span><span style="color:#AB5959;">	 </span><span style="color:#A0ADA0;">//类型声名可省略，会自动类型推断，age推断为number</span></span></code></pre></div><h3 id="三、as-const-断言" tabindex="-1">三、as const 断言 <a class="header-anchor" href="#三、as-const-断言" aria-label="Permalink to &quot;三、as const 断言&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">a</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">99</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">const</span><span style="color:#CB7676;"> 	</span><span style="color:#758575DD;">//a值只能为99,指定明确的值、类型</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">b</span><span style="color:#666666;">:</span><span style="color:#5DA994;">string</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">asfghj</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">obj</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#BD976A;">b</span><span style="color:#666666;">,		</span><span style="color:#758575DD;">//值只能为string</span></span>
+<span class="line"><span style="color:#666666;">}</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> const</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">a</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">99</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">const</span><span style="color:#AB5959;"> 	</span><span style="color:#A0ADA0;">//a值只能为99,指定明确的值、类型</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">b</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">asfghj</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">obj</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B07D48;">b</span><span style="color:#999999;">,		</span><span style="color:#A0ADA0;">//值只能为string</span></span>
+<span class="line"><span style="color:#999999;">}</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> const</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">x</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">1024</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">y</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2048</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">arr</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#BD976A;">y</span><span style="color:#666666;">]</span><span style="color:#CB7676;"> 	</span><span style="color:#758575DD;">// arr[1]类型是 number|string</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">arr</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#BD976A;">y</span><span style="color:#666666;">]</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">as</span><span style="color:#CB7676;"> </span><span style="color:#5DA994;">const</span><span style="color:#CB7676;"> 	</span><span style="color:#758575DD;">// 指定为元组，arr[1]类型只能为 number</span></span>
+<span class="line"><span style="color:#758575DD;">//同：let arr = &lt;const&gt;[x,y]</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">x</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">1024</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">y</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2048</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">arr</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#B07D48;">y</span><span style="color:#999999;">]</span><span style="color:#AB5959;"> 	</span><span style="color:#A0ADA0;">// arr[1]类型是 number|string</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">arr</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#B07D48;">y</span><span style="color:#999999;">]</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">as</span><span style="color:#AB5959;"> </span><span style="color:#2E8F82;">const</span><span style="color:#AB5959;"> 	</span><span style="color:#A0ADA0;">// 指定为元组，arr[1]类型只能为 number</span></span>
+<span class="line"><span style="color:#A0ADA0;">//同：let arr = &lt;const&gt;[x,y]</span></span></code></pre></div><h2 id="面对对象" tabindex="-1">面对对象 <a class="header-anchor" href="#面对对象" aria-label="Permalink to &quot;面对对象&quot;">​</a></h2><h3 id="一、类" tabindex="-1">一、类 <a class="header-anchor" href="#一、类" aria-label="Permalink to &quot;一、类&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">类名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">属性名</span><span style="color:#666666;">: </span><span style="color:#5DA994;">类型</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">参数</span><span style="color:#666666;">: </span><span style="color:#5DA994;">类型</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">属性名</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">参数</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">方法名</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">....</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">类名</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">属性名</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">类型</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">参数</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">类型</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">属性名</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">参数</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">方法名</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">....</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>栗子:</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#666666;">\${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">大家好，我是</span><span style="color:#999999;">\${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span></code></pre></div><h4 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;">​</a></h4><blockquote><p><strong>注1：在TS中只能有一个构造器方法！</strong></p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p><strong>注2：子类继承父类时，必须调用父类的构造方法（如果子类中也定义了构造方法）！</strong></p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">A</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">protected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">num</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">X</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">A</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">protected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">A</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">protected</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">num</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">X</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">A</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">protected</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="二、封装" tabindex="-1">二、封装 <a class="header-anchor" href="#二、封装" aria-label="Permalink to &quot;二、封装&quot;">​</a></h3><ul><li><p>静态属性（static）：</p><ul><li>声明为static的属性或方法不再属于实例，而是属于类的属性；</li></ul></li><li><p>只读属性（readonly）：</p><ul><li>如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改</li></ul></li><li><p>TS中属性具有三种修饰符：</p><ul><li>public（默认值），可以在类、子类和对象中修改</li><li>protected ，可以在类、子类中修改</li><li>private ，可以在类中修改</li></ul></li></ul><details class="details custom-block"><summary>public</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">public</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 写或什么都不写都是public</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">public</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 可以在类中修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#666666;">\${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Employee</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//子类中可以修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">p</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span><span style="color:#758575DD;">// 可以通过对象修改</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">public</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 写或什么都不写都是public</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">public</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 可以在类中修改</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">大家好，我是</span><span style="color:#999999;">\${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Employee</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//子类中可以修改</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">p</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">// 可以通过对象修改</span></span></code></pre></div></details><details class="details custom-block"><summary>protected</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">protected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">protected</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 可以修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#666666;">\${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Employee</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//子类中可以修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">p</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span><span style="color:#758575DD;">// 不能修改</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">protected</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">protected</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 可以修改</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">大家好，我是</span><span style="color:#999999;">\${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Employee</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//子类中可以修改</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">p</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">// 不能修改</span></span></code></pre></div></details><details class="details custom-block"><summary>private</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 可以修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">sayHello</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">大家好，我是</span><span style="color:#666666;">\${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Employee</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">super</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//子类中不能修改</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">p</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">p</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span><span style="color:#758575DD;">// 不能修改</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 可以修改</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">sayHello</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">大家好，我是</span><span style="color:#999999;">\${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Employee</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">super</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//子类中不能修改</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">p</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">p</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">// 不能修改</span></span></code></pre></div></details><h3 id="三、属性存取器" tabindex="-1">三、属性存取器 <a class="header-anchor" href="#三、属性存取器" aria-label="Permalink to &quot;三、属性存取器&quot;">​</a></h3><blockquote><p>对于一些不希望被任意修改的属性，可以将其设置为private</p><p>直接将其设置为private将导致无法再通过对象修改其中的属性</p><p>我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器</p><p>读取属性的方法叫做setter方法，设置属性的方法叫做getter方法</p></blockquote><details class="details custom-block"><summary>示例</summary><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">private</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">_name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">_name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">get</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">name</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">_name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">set</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">name</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">_name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">p1</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">孙悟空</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// 实际通过调用getter方法读取name属性</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">p1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// 实际通过调用setter方法修改name属性 </span></span>
+<span class="line"><span style="color:#BD976A;">p1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">猪八戒</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">private</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">_name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">_name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">get</span><span style="color:#393A34;"> </span><span style="color:#59873A;">name</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">_name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">set</span><span style="color:#393A34;"> </span><span style="color:#59873A;">name</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">_name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">p1</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">孙悟空</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 实际通过调用getter方法读取name属性</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">p1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 实际通过调用setter方法修改name属性 </span></span>
+<span class="line"><span style="color:#B07D48;">p1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">猪八戒</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span></code></pre></div></details><h4 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-label="Permalink to &quot;静态属性&quot;">​</a></h4><blockquote><p>静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用</p><p>静态属性（方法）使用static开头</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Tools</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">PI</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3.1415926</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">static</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">sum</span><span style="color:#666666;">(</span><span style="color:#BD976A;">num1</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num2</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">num2</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Tools</span><span style="color:#666666;">.</span><span style="color:#BD976A;">PI</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">Tools</span><span style="color:#666666;">.</span><span style="color:#80A665;">sum</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">123</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">456</span><span style="color:#666666;">));</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Tools</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">PI</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3.1415926</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">static</span><span style="color:#393A34;"> </span><span style="color:#59873A;">sum</span><span style="color:#999999;">(</span><span style="color:#B07D48;">num1</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num2</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">num2</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Tools</span><span style="color:#999999;">.</span><span style="color:#B07D48;">PI</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">Tools</span><span style="color:#999999;">.</span><span style="color:#59873A;">sum</span><span style="color:#999999;">(</span><span style="color:#2F798A;">123</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">456</span><span style="color:#999999;">));</span></span></code></pre></div><h3 id="四、继承" tabindex="-1">四、继承 <a class="header-anchor" href="#四、继承" aria-label="Permalink to &quot;四、继承&quot;">​</a></h3><blockquote><p>通过继承可以将其他类中的属性和方法引入到当前类中，通过继承可以在不修改类的情况下完成对类的扩展</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">bark</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">\${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">在汪汪叫！</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">dog</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Dog</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">旺财</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">dog</span><span style="color:#666666;">.</span><span style="color:#80A665;">bark</span><span style="color:#666666;">();</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Dog</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">bark</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">\${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">在汪汪叫！</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">dog</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Dog</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">旺财</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">dog</span><span style="color:#999999;">.</span><span style="color:#59873A;">bark</span><span style="color:#999999;">();</span></span></code></pre></div><h4 id="重写" tabindex="-1">重写 <a class="header-anchor" href="#重写" aria-label="Permalink to &quot;重写&quot;">​</a></h4><blockquote><p>发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">run</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">父类中的run方法！</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">bark</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">\${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">在汪汪叫！</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">run</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">子类中的run方法，会重写父类中的run方法！</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#BD976A;">dog</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> new </span><span style="color:#80A665;">Dog</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">旺财</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">4</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">dog</span><span style="color:#666666;">.</span><span style="color:#80A665;">bark</span><span style="color:#666666;">();</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">run</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">父类中的run方法！</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Dog</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">bark</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">\${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">在汪汪叫！</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">run</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">子类中的run方法，会重写父类中的run方法！</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#B07D48;">dog</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> new </span><span style="color:#59873A;">Dog</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">旺财</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">4</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">dog</span><span style="color:#999999;">.</span><span style="color:#59873A;">bark</span><span style="color:#999999;">();</span></span></code></pre></div><h3 id="五、抽象类-abstract-class" tabindex="-1">五、抽象类（abstract class） <a class="header-anchor" href="#五、抽象类-abstract-class" aria-label="Permalink to &quot;五、抽象类（abstract class）&quot;">​</a></h3><blockquote><p>抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例，用于抽取类的共同特点</p><p>使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现;</p></blockquote><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">abstract</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Animal</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">abstract</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">run</span><span style="color:#666666;">():</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">void</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">bark</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">动物在叫~</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Dog</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Animals</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">run</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">狗在跑~</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">abstract</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Animal</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">abstract</span><span style="color:#393A34;"> </span><span style="color:#59873A;">run</span><span style="color:#999999;">():</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">void</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">bark</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">动物在叫~</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Dog</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Animals</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">run</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">狗在跑~</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="六、接口" tabindex="-1">六、接口 <a class="header-anchor" href="#六、接口" aria-label="Permalink to &quot;六、接口&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//用于类型检查</span></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">firstName</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">lastName</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">address</span><span style="color:#CB7676;">?</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//可选属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">readonly</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//只读属性</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">greeter</span><span style="color:#666666;">(</span><span style="color:#BD976A;">person</span><span style="color:#666666;">: </span><span style="color:#5DA994;">Person</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Hello, </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">person</span><span style="color:#666666;">.</span><span style="color:#BD976A;">firstName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">person</span><span style="color:#666666;">.</span><span style="color:#BD976A;">lastName</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//用于类型检查</span></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Person</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">firstName</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">lastName</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">address</span><span style="color:#AB5959;">?</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//可选属性</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">readonly</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;">;</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//只读属性</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">greeter</span><span style="color:#999999;">(</span><span style="color:#B07D48;">person</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">Person</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Hello, </span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">person</span><span style="color:#999999;">.</span><span style="color:#B07D48;">firstName</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">person</span><span style="color:#999999;">.</span><span style="color:#B07D48;">lastName</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="基本配置" tabindex="-1">基本配置 <a class="header-anchor" href="#基本配置" aria-label="Permalink to &quot;基本配置&quot;">​</a></h2><h3 id="一、ts编译配置" tabindex="-1">一、TS编译配置 <a class="header-anchor" href="#一、ts编译配置" aria-label="Permalink to &quot;一、TS编译配置&quot;">​</a></h3><blockquote><p><strong>但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json</strong></p></blockquote><details class="details custom-block"><summary>tsconfig.json详细配置</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#758575DD;">/* </span></span>
+<span class="line"><span style="color:#758575DD;">    tsconfig.json 是ts编译器的配置文件，ts编译器可以更具它的信息来对代码进行编译</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;include&quot; 用来表示指定哪些ts文件需要被编译</span></span>
+<span class="line"><span style="color:#758575DD;">        路径：</span></span>
+<span class="line"><span style="color:#758575DD;">            *表示任意文件，</span></span>
+<span class="line"><span style="color:#758575DD;">            **表示任意目录</span></span>
+<span class="line"><span style="color:#758575DD;">    &quot;exclude&quot; 用来表示不需要被编译的文件目录</span></span>
+<span class="line"><span style="color:#758575DD;">            默认值：{&quot;node_modules&quot;, &quot;bower_components&quot;, &quot;jspm_packages&quot;}</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">include</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./src/**/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// &quot;exclude&quot;: [</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     &quot;./src/hello/**/*&quot;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#758575DD;">/*</span></span>
+<span class="line"><span style="color:#758575DD;">        被继承的配置文件</span></span>
+<span class="line"><span style="color:#758575DD;">        例如：&quot;extends&quot;: &quot;。/configs/base&quot;,</span></span>
+<span class="line"><span style="color:#758575DD;">      */</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//  &quot;extends&quot;: &quot;&quot;,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#758575DD;">/*</span></span>
+<span class="line"><span style="color:#758575DD;">        指定被编译文件的列表，只有需要编译的文件少时才会用到</span></span>
+<span class="line"><span style="color:#758575DD;">      */</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//  &quot;files&quot;: [],</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//compilerOptions 编译器的选项 </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">compilerOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//target 用来指定ts被编译为ES的版本</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//&#39;es3&#39;, &#39;es5&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es2016&#39;, &#39;es2017&#39;, &#39;es2018&#39;, &#39;es2019&#39;, &#39;es2020&#39;, &#39;esnext&#39;.</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">target</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ES2015</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//module 指定要使用的模块化的规范</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//&#39;none&#39;, &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es2020&#39;, &#39;esnext&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">module</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">es2015</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//lib 用来指定项目所用的库</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#758575DD;">/* &#39;es5&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es7&#39;, &#39;es2016&#39;, &#39;es2017&#39;, &#39;es2018&#39;, &#39;es2019&#39;, &#39;es2020&#39;, &#39;esnext&#39;, &#39;dom&#39;, </span></span>
+<span class="line"><span style="color:#758575DD;">       &#39;dom.iterable&#39;, &#39;webworker&#39;, &#39;webworker.importscripts&#39;, &#39;webworker.iterable&#39;, &#39;scripthost&#39;, &#39;es2015.core&#39;, &#39;es2015.collection&#39;, </span></span>
+<span class="line"><span style="color:#758575DD;">          &#39;es2015.generator&#39;, &#39;es2015.iterable&#39;, &#39;es2015.promise&#39;, &#39;es2015.proxy&#39;, &#39;es2015.reflect&#39;, &#39;es2015.symbol&#39;, &#39;es2015.symbol.wellknown&#39;, &#39;es2016.array.include&#39;,</span></span>
+<span class="line"><span style="color:#758575DD;">          &#39;es2017.object&#39;, &#39;es2017.sharedmemory&#39;, &#39;es2017.string&#39;, &#39;es2017.intl&#39;, &#39;es2017.typedarrays&#39;, &#39;es2018.asyncgenerator&#39;, &#39;es2018.asynciterable&#39;, &#39;es2018.intl&#39;, </span></span>
+<span class="line"><span style="color:#758575DD;">         &#39;es2018.promise&#39;, &#39;es2018.regexp&#39;, &#39;es2019.array&#39;, &#39;es2019.object&#39;, &#39;es2019.string&#39;, &#39;es2019.symbol&#39;, &#39;es2020.bigint&#39;, &#39;es2020.promise&#39;, </span></span>
+<span class="line"><span style="color:#758575DD;">         &#39;es2020.sharedmemory&#39;, &#39;es2020.string&#39;, &#39;es2020.symbol.wellknown&#39;, &#39;es2020.intl&#39;, &#39;esnext.array&#39;, &#39;esnext.symbol&#39;, &#39;esnext.asynciterable&#39;, &#39;esnext.intl&#39;, */</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//outDir 用来指定编译后文件所在的目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">outDir</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./dist</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//outFile 将代码合并为一个文件</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// &quot;outFile&quot;: &quot;./dist/app.js&quot;,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 是否对js文件进行编译，默认是false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">allowJs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 是否检查js代码是否符合语法规范，默认值是false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">checkJs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 是否移除注释</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">removeComments</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 不生成编译后的文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">noEmit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 当有错误时不生成编译文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">noEmitOnError</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 所有严格检查的总开关</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">strict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 用来设置编译后的文件是否使用严格模式，默认是false</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 在ES6中的模块化会自动使用严格模式，而无需在文件开头添加\`&#39;use strict&#39;\`</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">alwaysStrict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 不允许隐式的any类型</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">noImplicitAny</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 不允许不明确类型的this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">noImplicitThis</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 严格检查空值</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">strictNullChecks</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#A0ADA0;">/* </span></span>
+<span class="line"><span style="color:#A0ADA0;">    tsconfig.json 是ts编译器的配置文件，ts编译器可以更具它的信息来对代码进行编译</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;include&quot; 用来表示指定哪些ts文件需要被编译</span></span>
+<span class="line"><span style="color:#A0ADA0;">        路径：</span></span>
+<span class="line"><span style="color:#A0ADA0;">            *表示任意文件，</span></span>
+<span class="line"><span style="color:#A0ADA0;">            **表示任意目录</span></span>
+<span class="line"><span style="color:#A0ADA0;">    &quot;exclude&quot; 用来表示不需要被编译的文件目录</span></span>
+<span class="line"><span style="color:#A0ADA0;">            默认值：{&quot;node_modules&quot;, &quot;bower_components&quot;, &quot;jspm_packages&quot;}</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">include</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./src/**/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// &quot;exclude&quot;: [</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     &quot;./src/hello/**/*&quot;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ]</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#A0ADA0;">/*</span></span>
+<span class="line"><span style="color:#A0ADA0;">        被继承的配置文件</span></span>
+<span class="line"><span style="color:#A0ADA0;">        例如：&quot;extends&quot;: &quot;。/configs/base&quot;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">      */</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//  &quot;extends&quot;: &quot;&quot;,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A0ADA0;">/*</span></span>
+<span class="line"><span style="color:#A0ADA0;">        指定被编译文件的列表，只有需要编译的文件少时才会用到</span></span>
+<span class="line"><span style="color:#A0ADA0;">      */</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//  &quot;files&quot;: [],</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//compilerOptions 编译器的选项 </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">compilerOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//target 用来指定ts被编译为ES的版本</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//&#39;es3&#39;, &#39;es5&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es2016&#39;, &#39;es2017&#39;, &#39;es2018&#39;, &#39;es2019&#39;, &#39;es2020&#39;, &#39;esnext&#39;.</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">target</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ES2015</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//module 指定要使用的模块化的规范</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//&#39;none&#39;, &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es2020&#39;, &#39;esnext&#39;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">module</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">es2015</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//lib 用来指定项目所用的库</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#A0ADA0;">/* &#39;es5&#39;, &#39;es6&#39;, &#39;es2015&#39;, &#39;es7&#39;, &#39;es2016&#39;, &#39;es2017&#39;, &#39;es2018&#39;, &#39;es2019&#39;, &#39;es2020&#39;, &#39;esnext&#39;, &#39;dom&#39;, </span></span>
+<span class="line"><span style="color:#A0ADA0;">       &#39;dom.iterable&#39;, &#39;webworker&#39;, &#39;webworker.importscripts&#39;, &#39;webworker.iterable&#39;, &#39;scripthost&#39;, &#39;es2015.core&#39;, &#39;es2015.collection&#39;, </span></span>
+<span class="line"><span style="color:#A0ADA0;">          &#39;es2015.generator&#39;, &#39;es2015.iterable&#39;, &#39;es2015.promise&#39;, &#39;es2015.proxy&#39;, &#39;es2015.reflect&#39;, &#39;es2015.symbol&#39;, &#39;es2015.symbol.wellknown&#39;, &#39;es2016.array.include&#39;,</span></span>
+<span class="line"><span style="color:#A0ADA0;">          &#39;es2017.object&#39;, &#39;es2017.sharedmemory&#39;, &#39;es2017.string&#39;, &#39;es2017.intl&#39;, &#39;es2017.typedarrays&#39;, &#39;es2018.asyncgenerator&#39;, &#39;es2018.asynciterable&#39;, &#39;es2018.intl&#39;, </span></span>
+<span class="line"><span style="color:#A0ADA0;">         &#39;es2018.promise&#39;, &#39;es2018.regexp&#39;, &#39;es2019.array&#39;, &#39;es2019.object&#39;, &#39;es2019.string&#39;, &#39;es2019.symbol&#39;, &#39;es2020.bigint&#39;, &#39;es2020.promise&#39;, </span></span>
+<span class="line"><span style="color:#A0ADA0;">         &#39;es2020.sharedmemory&#39;, &#39;es2020.string&#39;, &#39;es2020.symbol.wellknown&#39;, &#39;es2020.intl&#39;, &#39;esnext.array&#39;, &#39;esnext.symbol&#39;, &#39;esnext.asynciterable&#39;, &#39;esnext.intl&#39;, */</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//outDir 用来指定编译后文件所在的目录</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">outDir</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./dist</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//outFile 将代码合并为一个文件</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// &quot;outFile&quot;: &quot;./dist/app.js&quot;,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 是否对js文件进行编译，默认是false</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">allowJs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 是否检查js代码是否符合语法规范，默认值是false</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">checkJs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 是否移除注释</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">removeComments</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 不生成编译后的文件</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">noEmit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 当有错误时不生成编译文件</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">noEmitOnError</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 所有严格检查的总开关</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">strict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 用来设置编译后的文件是否使用严格模式，默认是false</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 在ES6中的模块化会自动使用严格模式，而无需在文件开头添加\`&#39;use strict&#39;\`</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">alwaysStrict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 不允许隐式的any类型</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">noImplicitAny</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 不允许不明确类型的this</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">noImplicitThis</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 严格检查空值</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">strictNullChecks</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h3 id="二、webpack整合" tabindex="-1">二、webpack整合 <a class="header-anchor" href="#二、webpack整合" aria-label="Permalink to &quot;二、webpack整合&quot;">​</a></h3><p>步骤如下：</p><h4 id="_1-初始化项目" tabindex="-1">1. 初始化项目 <a class="header-anchor" href="#_1-初始化项目" aria-label="Permalink to &quot;1. 初始化项目&quot;">​</a></h4><p>进入项目根目录，执行命令 <code>npm init -y</code>，创建package.json文件</p><h4 id="_2-下载构建工具" tabindex="-1">2. 下载构建工具 <a class="header-anchor" href="#_2-下载构建工具" aria-label="Permalink to &quot;2. 下载构建工具&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">webpack</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">webpack-cli</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">webpack-dev-server</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">typescript</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">ts-loader</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">clean-webpack-plugin</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">i</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span><span style="color:#393A34;"> </span><span style="color:#B56959;">webpack</span><span style="color:#393A34;"> </span><span style="color:#B56959;">webpack-cli</span><span style="color:#393A34;"> </span><span style="color:#B56959;">webpack-dev-server</span><span style="color:#393A34;"> </span><span style="color:#B56959;">typescript</span><span style="color:#393A34;"> </span><span style="color:#B56959;">ts-loader</span><span style="color:#393A34;"> </span><span style="color:#B56959;">clean-webpack-plugin</span></span></code></pre></div><h4 id="_3-配置webpack" tabindex="-1">3. 配置webpack <a class="header-anchor" href="#_3-配置webpack" aria-label="Permalink to &quot;3. 配置webpack&quot;">​</a></h4><details class="details custom-block"><summary>webpack.config.js详细配置</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 引入一个包</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">// 引入html插件</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">HTMLWebpackPlugin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">html-webpack-plugin</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#758575DD;">//引入clean插件</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">CleanWebpackPlugin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">clean-webpack-plugin</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// npm init -y 初始化 创建package.json文件</span></span>
+<span class="line"><span style="color:#758575DD;">// npm i -D webpack webpack-cli typescript ts-loader  安装四个依赖</span></span>
+<span class="line"><span style="color:#758575DD;">// 编写webpack配置文件</span></span>
+<span class="line"><span style="color:#758575DD;">// 编写tsconfig.json文件</span></span>
+<span class="line"><span style="color:#758575DD;">// 修改package.json中加上build命令</span></span>
+<span class="line"><span style="color:#758575DD;">// npm i -D html-webpack-plugin //自动生成html</span></span>
+<span class="line"><span style="color:#758575DD;">// npm i -D webpack-dev-server //自动响应浏览器更新</span></span>
+<span class="line"><span style="color:#758575DD;">// npm i -D clean-webpack-plugin //清楚dist目录旧文件</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//webpack 中所有的配置信息都应该写在module.exports中</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 指定入口文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">entry</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./src/index.ts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 指定打包文件所在目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">output</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//指定打包文件的目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">path</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">dist</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//打包后文件的名字</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">filename</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">bundle.js</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//告诉webpack不使用箭头函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">environment</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">arrowFunction</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//指定webpack打包时要使用的模块</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">module</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 指定要loader加载的规则</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">rules</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// test指定的时规则生效的文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">test</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\.</span><span style="color:#C4704F;">ts</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//以ts结尾的文件</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// 要使用的loader</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">use</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// 配置babel</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                        </span><span style="color:#758575DD;">//指定加载器</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#B8A965;">loader</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">babel-loader</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                        </span><span style="color:#758575DD;">// 设置babel</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#B8A965;">options</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                            </span><span style="color:#758575DD;">//设置预定义的环境</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#B8A965;">presets</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#666666;">                                    </span><span style="color:#758575DD;">//指定环境的插件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@babel/preset-env</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                                    </span><span style="color:#758575DD;">// 配置信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">                                        </span><span style="color:#758575DD;">// 要兼容的目标浏览器及版本</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#B8A965;">targets</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                            </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">chrome</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">58</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                            </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ie</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">11</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">                                        </span><span style="color:#758575DD;">//指定corejs的版本</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">corejs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">3</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">                                        </span><span style="color:#758575DD;">//使用corejs的方式 &quot;usage&quot;  表示按需加载</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">useBuiltIns</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">usage</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">                    </span><span style="color:#758575DD;">// &#39;babel-loader&#39;,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ts-loader</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">                </span><span style="color:#758575DD;">// 要排除的文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">exclude</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">node-modules</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//配置Webpack 插件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">plugins</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">CleanWebpackPlugin</span><span style="color:#666666;">(),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">HTMLWebpackPlugin</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">            </span><span style="color:#758575DD;">// title: &quot;这是一个自定义的title&quot;、</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">template</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./src/index.html</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 用来设置引用模块，可以将这些文件识别为模块</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">resolve</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">extensions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.js</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 引入一个包</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 引入html插件</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">HTMLWebpackPlugin</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">html-webpack-plugin</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#A0ADA0;">//引入clean插件</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">CleanWebpackPlugin</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">clean-webpack-plugin</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// npm init -y 初始化 创建package.json文件</span></span>
+<span class="line"><span style="color:#A0ADA0;">// npm i -D webpack webpack-cli typescript ts-loader  安装四个依赖</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 编写webpack配置文件</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 编写tsconfig.json文件</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 修改package.json中加上build命令</span></span>
+<span class="line"><span style="color:#A0ADA0;">// npm i -D html-webpack-plugin //自动生成html</span></span>
+<span class="line"><span style="color:#A0ADA0;">// npm i -D webpack-dev-server //自动响应浏览器更新</span></span>
+<span class="line"><span style="color:#A0ADA0;">// npm i -D clean-webpack-plugin //清楚dist目录旧文件</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//webpack 中所有的配置信息都应该写在module.exports中</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 指定入口文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">entry</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./src/index.ts</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 指定打包文件所在目录</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">output</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//指定打包文件的目录</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">path</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">dist</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//打包后文件的名字</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">filename</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">bundle.js</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//告诉webpack不使用箭头函数</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">environment</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">arrowFunction</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//指定webpack打包时要使用的模块</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">module</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 指定要loader加载的规则</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">rules</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// test指定的时规则生效的文件</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">test</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\.</span><span style="color:#AB5E3F;">ts</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//以ts结尾的文件</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// 要使用的loader</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">use</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// 配置babel</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                        </span><span style="color:#A0ADA0;">//指定加载器</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#998418;">loader</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">babel-loader</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                        </span><span style="color:#A0ADA0;">// 设置babel</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#998418;">options</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                            </span><span style="color:#A0ADA0;">//设置预定义的环境</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#998418;">presets</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#999999;">                                    </span><span style="color:#A0ADA0;">//指定环境的插件</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@babel/preset-env</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                                    </span><span style="color:#A0ADA0;">// 配置信息</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">                                        </span><span style="color:#A0ADA0;">// 要兼容的目标浏览器及版本</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#998418;">targets</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                                            </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">chrome</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">58</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                                            </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ie</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">11</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">                                        </span><span style="color:#A0ADA0;">//指定corejs的版本</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">corejs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">3</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">                                        </span><span style="color:#A0ADA0;">//使用corejs的方式 &quot;usage&quot;  表示按需加载</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">useBuiltIns</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">usage</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">                    </span><span style="color:#A0ADA0;">// &#39;babel-loader&#39;,</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ts-loader</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">                </span><span style="color:#A0ADA0;">// 要排除的文件</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">exclude</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">node-modules</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//配置Webpack 插件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">plugins</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">CleanWebpackPlugin</span><span style="color:#999999;">(),</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">HTMLWebpackPlugin</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">            </span><span style="color:#A0ADA0;">// title: &quot;这是一个自定义的title&quot;、</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">template</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./src/index.html</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 用来设置引用模块，可以将这些文件识别为模块</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">resolve</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">extensions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.js</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h4 id="_4-配置ts编译选项" tabindex="-1">4.配置TS编译选项 <a class="header-anchor" href="#_4-配置ts编译选项" aria-label="Permalink to &quot;4.配置TS编译选项&quot;">​</a></h4><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">compilerOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">target</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ES2015</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">module</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ES2015</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">strict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">compilerOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">target</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ES2015</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">module</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ES2015</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">strict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_5-修改package-json配置" tabindex="-1">5 .修改package.json配置 <a class="header-anchor" href="#_5-修改package-json配置" aria-label="Permalink to &quot;5 .修改package.json配置&quot;">​</a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">scripts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;"> {</span></span>
+<span class="line"><span style="color:#666666;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">test</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">echo </span><span style="color:#C99076;">\\&quot;</span><span style="color:#C98A7D;">Error: no test specified</span><span style="color:#C99076;">\\&quot;</span><span style="color:#C98A7D;"> &amp;&amp; exit 1</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">build</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">webpack</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line highlighted"><span style="color:#666666;">       </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">start</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">webpack serve --open chrome.exe</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;"> </span><span style="color:#758575DD;">//使用chrome启动</span></span>
+<span class="line"><span style="color:#666666;">   },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">scripts</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">:</span><span style="color:#999999;"> {</span></span>
+<span class="line"><span style="color:#999999;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">test</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">echo </span><span style="color:#A65E2B;">\\&quot;</span><span style="color:#B56959;">Error: no test specified</span><span style="color:#A65E2B;">\\&quot;</span><span style="color:#B56959;"> &amp;&amp; exit 1</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">build</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">webpack</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line highlighted"><span style="color:#999999;">       </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">start</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">webpack serve --open chrome.exe</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//使用chrome启动</span></span>
+<span class="line"><span style="color:#999999;">   },</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h4 id="_6-项目使用" tabindex="-1">6.项目使用 <a class="header-anchor" href="#_6-项目使用" aria-label="Permalink to &quot;6.项目使用&quot;">​</a></h4><p>在src下创建ts文件，并在并命令行执行<code>npm run build</code>对代码进行编译；</p><p>或者执行<code>npm start</code>来启动开发服务器；</p><h4 id="_7-babel" tabindex="-1">7.Babel <a class="header-anchor" href="#_7-babel" aria-label="Permalink to &quot;7.Babel&quot;">​</a></h4><div class="warning custom-block"><p class="custom-block-title">Babel作用</p><p>虽然TS在编译时也支持代码转换，但是只支持简单的代码转换；</p><p>对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换；</p></div><p><strong>7.1 安装依赖包：</strong></p><p><code>npm i -D @babel/core @babel/preset-env babel-loader core-js</code></p><p>共安装了4个包，分别是：</p><ul><li>@babel/core：babel的核心工具</li><li>@babel/preset-env：babel的预定义环境</li><li>@babel-loader：babel在webpack中的加载器</li><li>core-js：core-js用来使老版本的浏览器支持新版ES语法</li></ul><h4 id="_7-2-修改webpack-config-js配置文件" tabindex="-1">7.2 修改webpack.config.js配置文件 <a class="header-anchor" href="#_7-2-修改webpack-config-js配置文件" aria-label="Permalink to &quot;7.2 修改webpack.config.js配置文件&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">...</span></span>
+<span class="line"><span style="color:#80A665;">module</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">rules</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">test</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\.</span><span style="color:#C4704F;">ts</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">use</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#B8A965;">loader</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">babel-loader</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#B8A965;">options</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#B8A965;">presets</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@babel/preset-env</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//支持的目标版本</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">targets</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">chrome</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">58</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ie</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">11</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">                                    </span><span style="color:#758575DD;">//corejs版本</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">corejs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">3</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">useBuiltIns</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">usage</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                            </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                        </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                    </span><span style="color:#B8A965;">loader</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ts-loader</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">exclude</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">node_modules</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">...</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">...</span></span>
+<span class="line"><span style="color:#59873A;">module</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">rules</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">test</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\.</span><span style="color:#AB5E3F;">ts</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">use</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#998418;">loader</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">babel-loader</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#998418;">options</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#998418;">presets</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@babel/preset-env</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#999999;">{</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//支持的目标版本</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">targets</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:{</span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">chrome</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">58</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">                                        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ie</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">11</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">                                    </span><span style="color:#A0ADA0;">//corejs版本</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">corejs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">3</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                                    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">useBuiltIns</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">usage</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">                                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                            </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">                        </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                    </span><span style="color:#998418;">loader</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ts-loader</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">exclude</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">node_modules</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">...</span></span></code></pre></div>`,86),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_TypeScript_\345\210\235\345\255\246\347\254\224\350\256\260.md.a7be054a.lean.js" "b/assets/FrontEnd_TypeScript_\345\210\235\345\255\246\347\254\224\350\256\260.md.a7be054a.lean.js"
new file mode 100644
index 00000000..90c9c489
--- /dev/null
+++ "b/assets/FrontEnd_TypeScript_\345\210\235\345\255\246\347\254\224\350\256\260.md.a7be054a.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/TypeScript/初学笔记.md","filePath":"FrontEnd/TypeScript/初学笔记.md"}'),p={name:"FrontEnd/TypeScript/初学笔记.md"},o=l("",86),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/FrontEnd_TypeScript_\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md.21fda5ca.js" "b/assets/FrontEnd_TypeScript_\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md.21fda5ca.js"
new file mode 100644
index 00000000..abe0d48a
--- /dev/null
+++ "b/assets/FrontEnd_TypeScript_\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md.21fda5ca.js"
@@ -0,0 +1,53 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/TypeScript/进阶使用技巧.md","filePath":"FrontEnd/TypeScript/进阶使用技巧.md"}'),o={name:"FrontEnd/TypeScript/进阶使用技巧.md"},l=p(`<h2 id="松散类型自动推推导" tabindex="-1">松散类型自动推推导 <a class="header-anchor" href="#松散类型自动推推导" aria-label="Permalink to &quot;松散类型自动推推导&quot;">​</a></h2><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//1.</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IconProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Size</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 2.</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">string</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IconProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Size</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,但模版中使用失去类型提示</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//3.</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Omit</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IconProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Size</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,保留模版类型提示</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//4.封装为 type</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">LooseAutoComplete</span><span style="color:#666666;">&lt;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">xs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#CB7676;">type</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">LooseAutoComplete</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">string</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">T</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">|</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Omit</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">T</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#CB7676;">interface</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">IconProps</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">size</span><span style="color:#666666;">:</span><span style="color:#5DA994;">Size</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,保留模版类型提示</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//1.</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IconProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Size</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 2.</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">string</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IconProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Size</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,但模版中使用失去类型提示</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//3.</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Omit</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IconProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Size</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,保留模版类型提示</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//4.封装为 type</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Size</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">LooseAutoComplete</span><span style="color:#999999;">&lt;</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sm</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">xs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#AB5959;">type</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">LooseAutoComplete</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">T</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">T</span><span style="color:#393A34;"> </span><span style="color:#999999;">|</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Omit</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">T</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#AB5959;">interface</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">IconProps</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">size</span><span style="color:#999999;">:</span><span style="color:#2E8F82;">Size</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// size 可以推导为 &quot;sm&quot; | &quot;xs&quot; | string ,保留模版类型提示</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,2),t=[l];function e(c,r,y,A,D,i){return n(),a("div",null,t)}const C=s(o,[["render",e]]);export{B as __pageData,C as default};
diff --git "a/assets/FrontEnd_TypeScript_\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md.21fda5ca.lean.js" "b/assets/FrontEnd_TypeScript_\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md.21fda5ca.lean.js"
new file mode 100644
index 00000000..564983c8
--- /dev/null
+++ "b/assets/FrontEnd_TypeScript_\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.md.21fda5ca.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as p}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/TypeScript/进阶使用技巧.md","filePath":"FrontEnd/TypeScript/进阶使用技巧.md"}'),o={name:"FrontEnd/TypeScript/进阶使用技巧.md"},l=p("",2),t=[l];function e(c,r,y,A,D,i){return n(),a("div",null,t)}const C=s(o,[["render",e]]);export{B as __pageData,C as default};
diff --git "a/assets/FrontEnd_TypeScript_\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md.7a55465d.js" "b/assets/FrontEnd_TypeScript_\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md.7a55465d.js"
new file mode 100644
index 00000000..01dca3b2
--- /dev/null
+++ "b/assets/FrontEnd_TypeScript_\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md.7a55465d.js"
@@ -0,0 +1,265 @@
+import{_ as s,o as n,c as a,Q as o}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"Typescript 配置文件（tsconfig.json）解析","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/TypeScript/配置文件详解.md","filePath":"FrontEnd/TypeScript/配置文件详解.md"}'),l={name:"FrontEnd/TypeScript/配置文件详解.md"},p=o(`<h1 id="typescript-配置文件-tsconfig-json-解析" tabindex="-1">Typescript 配置文件（tsconfig.json）解析 <a class="header-anchor" href="#typescript-配置文件-tsconfig-json-解析" aria-label="Permalink to &quot;Typescript 配置文件（tsconfig.json）解析&quot;">​</a></h1><p>TypeScript带来的类型系统以及强大的IDE支持，让前端开发也变得严谨而流畅。但TypeScript不是原生的Javascript代码，需要进行编译才能转换为Javascript代码。</p><p>tsconfig.json是编译TypeScript的配置文件，对书写TypeScript代码十分重要。因为有些选项如果你没配置，则需要严格按照TypeScript的规则来书写，对初期使用TypeScript的同学而言，稍不留神就会书写出不符合规则的代码，从而导致编译报错，打击自信心。其实早期可以通过关闭一些规则设置，从而更愉快的从js转为ts开发。笔者根据项目实战经历来解释一些常用的编译选项，文末也会附上笔者整理的所有tsconfig.json选项的解释。</p><h2 id="_1-experimentaldecorators" tabindex="-1">1. experimentalDecorators <a class="header-anchor" href="#_1-experimentaldecorators" aria-label="Permalink to &quot;1. experimentalDecorators&quot;">​</a></h2><p><code>是否启用实验性的ES装饰器</code>。boolean类型，默认值：false。<a href="https://www.typescriptlang.org/docs/handbook/decorators.html" target="_blank" rel="noreferrer">官方解释(opens new window)</a></p><p>TypeScript和ES6中引入了Class的概念，同时在<a href="https://github.com/tc39/proposal-decorators" target="_blank" rel="noreferrer">stage 2 proposal (opens new window)</a>提出了Java等服务器端语言早就有的装饰器模式。通过引入装饰器模式，能极大简化书写代码，把一些通用逻辑封装到装饰器中。很多库都有用到该特性，比如vue-class-component 及 vuex-class等库。<strong>当你使用这些库时，必须开启experimentalDecorators</strong>。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">f</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f(): evaluated</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">target</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">propertyKey</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">descriptor</span><span style="color:#666666;">: </span><span style="color:#5DA994;">PropertyDescriptor</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f(): called</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">C</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">@</span><span style="color:#80A665;">f</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">method</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">f</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f(): evaluated</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">target</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">propertyKey</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">descriptor</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">PropertyDescriptor</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f(): called</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">C</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">@</span><span style="color:#59873A;">f</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">method</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>启用 vuex-class同时需要设置<code>strictFunctionTypes</code>选项为false</p></blockquote><h2 id="_2-strictpropertyinitialization" tabindex="-1">2. strictPropertyInitialization <a class="header-anchor" href="#_2-strictpropertyinitialization" aria-label="Permalink to &quot;2. strictPropertyInitialization&quot;">​</a></h2><p><code>是否类的非undefined属性已经在构造函数里初始化</code>。 boolean类型，默认值：false</p><p>直白点，就是所有的属性值，都需要赋有初始值。<strong>建议把strictPropertyInitialization设置为false</strong>，这样就不需要定义一个变量就必须赋有初始值。对使用vuex-class库的同学，建议请把这个值设为false，绝对能省很多事。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Home</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">extend</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Vue</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">jobId</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;"> </span><span style="color:#758575DD;">// 如果开启strictPropertyInitialization，则这里会报错，因为没有赋值默认值</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">method1</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">:</span><span style="color:#5DA994;">void</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">jobId</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Home</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">extend</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Vue</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">jobId</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;"> </span><span style="color:#A0ADA0;">// 如果开启strictPropertyInitialization，则这里会报错，因为没有赋值默认值</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">method1</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">:</span><span style="color:#2E8F82;">void</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">jobId</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>如果设置该选项为true，需要同时启用--strictNullChecks或启用--strict</p></blockquote><h2 id="_3-noimplicitany" tabindex="-1">3. noImplicitAny <a class="header-anchor" href="#_3-noimplicitany" aria-label="Permalink to &quot;3. noImplicitAny&quot;">​</a></h2><p><code>有隐含的 any类型时是否报错</code>。boolean值，默认值：false</p><p>ts是有默认推导的，同时还有any类型，所以不是每个变量或参数定义需要明确告知类型是什么。如果开启该值，当有隐含any类型时，会报错。<strong>建议初次上手TypeScript，把该选项设置为false。</strong></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 当开启noImplicitAny时，需要隐含当any需要明确指出</span></span>
+<span class="line"><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// error</span></span>
+<span class="line"><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">: </span><span style="color:#5DA994;">any</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// ok</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 当开启noImplicitAny时，需要隐含当any需要明确指出</span></span>
+<span class="line"><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// error</span></span>
+<span class="line"><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">any</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// ok</span></span></code></pre></div><h2 id="_4-target" tabindex="-1">4. target <a class="header-anchor" href="#_4-target" aria-label="Permalink to &quot;4. target&quot;">​</a></h2><p><code>指定编译的ECMAScript目标版本</code>。枚举值：&quot;ES3&quot;， &quot;ES5&quot;， &quot;ES6&quot;/ &quot;ES2015&quot;， &quot;ES2016&quot;， &quot;ES2017&quot;，&quot;ESNext&quot;。默认值： “ES3”</p><p>TypeScript是ES6的超集，所以你可以使用ES6来编写ts代码（通常我们也的确这么做）。然而，当编译ts代码时，可以把ts转为ES5或更早的js代码。所以需要选择一个编译的目标版本。vue-cli3的typescript模板，设置为“ESNext”，因为现代大部分应用项目都会使用Webpack（Parcel也很棒）进行打包，Webpack会把你的代码转换成在所有浏览器中可运行的代码。</p><blockquote><p>target: &quot;ESNext&quot; 是指tc39最新的<a href="https://github.com/tc39/proposals" target="_blank" rel="noreferrer">ES proposed features(opens new window)</a></p></blockquote><h2 id="_5-module" tabindex="-1">5. module <a class="header-anchor" href="#_5-module" aria-label="Permalink to &quot;5. module&quot;">​</a></h2><p><code>指定生成哪个模块系统代码</code>。枚举值：&quot;None&quot;， &quot;CommonJS&quot;， &quot;AMD&quot;， &quot;System&quot;， &quot;UMD&quot;， &quot;ES6&quot;， &quot;ES2015&quot;，&quot;ESNext&quot;。默认值根据--target选项不同而不同，当target设置为ES6时，默认module为“ES6”，否则为“commonjs”</p><p>通常使用ES6的模块来写ts代码，然而2016年1月以前，基本上没有浏览器原生支持ES6的模块系统，所以需要转换为不同的模块系统，如：CommonJS、AMD、SystemJS等，而module选项就是指定编译使用对应的模块系统。</p><h2 id="_6-lib" tabindex="-1">6. lib <a class="header-anchor" href="#_6-lib" aria-label="Permalink to &quot;6. lib&quot;">​</a></h2><p><code>编译过程中需要引入的库文件的列表</code>。string[]类型，可选的值有很多，常用的有ES5，ES6，ESNext，DOM，DOM.Iterable、WebWorker、ScriptHost等。该值默认值是根据--target选项不同而不同。当target为ES5时，默认值为[&#39;DOM &#39;, &#39;ES5&#39;, &#39;ScriptHost&#39;];当target为ES6时，默认值为[&#39;DOM&#39;, &#39;ES6&#39;, &#39;DOM.Iterable&#39;, &#39;ScriptHost&#39;]</p><p>为了在ts代码中使用ES6中的类，比如Array.form、Set、Reflect等，需要设置lib选项，在编译过程中把这些标准库引入。这样在编译过程中，如果遇到属于这些标准库的class或api时，ts编译器不会报错。</p><h2 id="_7-moduleresolution" tabindex="-1">7. moduleResolution <a class="header-anchor" href="#_7-moduleresolution" aria-label="Permalink to &quot;7. moduleResolution&quot;">​</a></h2><p><code>决定如何处理模块</code>。string类型，“node”或者“classic”，默认值：“classic”。<a href="https://www.typescriptlang.org/docs/handbook/module-resolution.html" target="_blank" rel="noreferrer">官方解释(opens new window)</a></p><p>说直白点，也就是遇到import { AAA } from &#39;./aaa&#39;该如何去找对应文件模块解析。对于工程项目，笔者<strong>建议大家使用node</strong>（vue-cli3 ts模板默认设置为node策略），因为这个更符合平时我们的书写习惯以及认知（平时都是webpack打包，webpack又基于node之上）。</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#dbd7caee;">// 在源文件/root/src/A.ts中import { b } from &quot;./moduleB&quot;</span></span>
+<span class="line"><span style="color:#dbd7caee;">// 两种解析方式查找文件方式不同</span></span>
+<span class="line"><span style="color:#dbd7caee;"></span></span>
+<span class="line"><span style="color:#dbd7caee;">// classic模块解析方式</span></span>
+<span class="line"><span style="color:#dbd7caee;">1. /root/src/moduleB.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;">2. /root/src/moduleB.d.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;"></span></span>
+<span class="line"><span style="color:#dbd7caee;">// node模块解析方式</span></span>
+<span class="line"><span style="color:#dbd7caee;">1. /root/src/moduleB.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;">2. /root/src/moduleB.tsx</span></span>
+<span class="line"><span style="color:#dbd7caee;">3. /root/src/moduleB.d.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;">4. /root/src/moduleB/package.json (if it specifies a &quot;types&quot; property)</span></span>
+<span class="line"><span style="color:#dbd7caee;">5. /root/src/moduleB/index.ts</span></span>
+<span class="line"><span style="color:#dbd7caee;">6. /root/src/moduleB/index.tsx</span></span>
+<span class="line"><span style="color:#dbd7caee;">7. /root/src/moduleB/index.d.ts</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393a34;">// 在源文件/root/src/A.ts中import { b } from &quot;./moduleB&quot;</span></span>
+<span class="line"><span style="color:#393a34;">// 两种解析方式查找文件方式不同</span></span>
+<span class="line"><span style="color:#393a34;"></span></span>
+<span class="line"><span style="color:#393a34;">// classic模块解析方式</span></span>
+<span class="line"><span style="color:#393a34;">1. /root/src/moduleB.ts</span></span>
+<span class="line"><span style="color:#393a34;">2. /root/src/moduleB.d.ts</span></span>
+<span class="line"><span style="color:#393a34;"></span></span>
+<span class="line"><span style="color:#393a34;">// node模块解析方式</span></span>
+<span class="line"><span style="color:#393a34;">1. /root/src/moduleB.ts</span></span>
+<span class="line"><span style="color:#393a34;">2. /root/src/moduleB.tsx</span></span>
+<span class="line"><span style="color:#393a34;">3. /root/src/moduleB.d.ts</span></span>
+<span class="line"><span style="color:#393a34;">4. /root/src/moduleB/package.json (if it specifies a &quot;types&quot; property)</span></span>
+<span class="line"><span style="color:#393a34;">5. /root/src/moduleB/index.ts</span></span>
+<span class="line"><span style="color:#393a34;">6. /root/src/moduleB/index.tsx</span></span>
+<span class="line"><span style="color:#393a34;">7. /root/src/moduleB/index.d.ts</span></span></code></pre></div><h2 id="_8-paths" tabindex="-1">8. paths <a class="header-anchor" href="#_8-paths" aria-label="Permalink to &quot;8. paths&quot;">​</a></h2><p><code>模块名或路径映射的列表</code>。Object值</p><p>这是一个非常有用的选项，比如我们经常使用&#39;@/util/help&#39;来代替&#39;./src/util/help&#39;，省的每次在不同层级文件import模块时,都纠结于是&#39;./&#39;还是&#39;../&#39;。该选项告诉编译器遇到匹配的值时，去映射的路径下加载模块。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">baseUrl</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 注意：baseUrl不可少</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">paths</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;"> {</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">// 映射列表</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@/*</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: [</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">      ],</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">moduleA</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">: [</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src/libs/moduleA</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">      ]</span></span>
+<span class="line"><span style="color:#666666;">    }</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// in ts code</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Setting</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">@/components/Setting.vue</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 模块实际位置: src/components/Setting.vue</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">TestModule</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">moduleA/index.js</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 模块实际位置: src/libs/moduleA/index.js</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">baseUrl</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 注意：baseUrl不可少</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">paths</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">:</span><span style="color:#999999;"> {</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">// 映射列表</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@/*</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: [</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">      ],</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">moduleA</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">: [</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src/libs/moduleA</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">      ]</span></span>
+<span class="line"><span style="color:#999999;">    }</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// in ts code</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Setting</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">@/components/Setting.vue</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 模块实际位置: src/components/Setting.vue</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">TestModule</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">moduleA/index.js</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 模块实际位置: src/libs/moduleA/index.js</span></span></code></pre></div><h2 id="_9-strictnullchecks" tabindex="-1">9. strictNullChecks <a class="header-anchor" href="#_9-strictnullchecks" aria-label="Permalink to &quot;9. strictNullChecks&quot;">​</a></h2><p><code>是否启用严格的 null检查模式</code>。boolean值，默认值：false</p><p>未处理的null和undefined经常会导致BUG的产生，所以TypeScript包含了strictNullChecks选项来帮助我们减少对这种情况的担忧。当启用了strictNullChecks，null和undefined获得了它们自己各自的类型null和undefined。开启该模式有助于发现并处理可能为undefined的赋值。<strong>如果是正式项目，笔者建议开启该选项；如果只是练手TypeScirpt，可以关闭该选项</strong>，不然所有可能为null/undefined的赋值，都需要写联合类型。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 未开启strictNullChecks，number类型包含了null和undefined类型</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">foo</span><span style="color:#666666;">: </span><span style="color:#5DA994;">number</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">123</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">foo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// Okay</span></span>
+<span class="line"><span style="color:#BD976A;">foo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// Okay</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 开启strictNullChecks</span></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">foo</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">[] | </span><span style="color:#CB7676;">undefined</span><span style="color:#666666;"> =</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">find</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">key</span><span style="color:#CB7676;"> === </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">test</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">// foo.push(&#39;1&#39;) // error - &#39;foo&#39; is possibly &#39;undefined&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">foo</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">foo</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// okay</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 未开启strictNullChecks，number类型包含了null和undefined类型</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">foo</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">number</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">123</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">foo</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// Okay</span></span>
+<span class="line"><span style="color:#B07D48;">foo</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// Okay</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 开启strictNullChecks</span></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">foo</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">[] | </span><span style="color:#AB5959;">undefined</span><span style="color:#999999;"> =</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">find</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">key</span><span style="color:#AB5959;"> === </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">test</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">// foo.push(&#39;1&#39;) // error - &#39;foo&#39; is possibly &#39;undefined&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">foo</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">foo</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// okay</span></span></code></pre></div><blockquote><p>注意：启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictNullChecks, --strictFunctionTypes和--strictPropertyInitialization</p></blockquote><h2 id="_10-nounusedlocals" tabindex="-1">10. noUnusedLocals <a class="header-anchor" href="#_10-nounusedlocals" aria-label="Permalink to &quot;10. noUnusedLocals&quot;">​</a></h2><p><code>有未使用的变量时，是否抛出错误</code>。boolean值，默认值： false</p><p>顾名思义，当发现变量定义但没有使用时，编译不报错。eslint的rule中也有该条，<strong>建议正式项目将该选项开启，设置为true</strong>，使得代码干净整洁。</p><h2 id="_11-nounusedparameters" tabindex="-1">11. noUnusedParameters <a class="header-anchor" href="#_11-nounusedparameters" aria-label="Permalink to &quot;11. noUnusedParameters&quot;">​</a></h2><p><code>有未使用的参数时，是否抛出错误</code>。boolean值，默认值： false</p><p><strong>建议正式项目开启该选项，设置为true</strong>，理由同上。</p><h2 id="_12-allowjs" tabindex="-1">12. allowJs <a class="header-anchor" href="#_12-allowjs" aria-label="Permalink to &quot;12. allowJs&quot;">​</a></h2><p><code>是否允许编译javascript文件</code>。boolean值，默认值：false</p><p>如果设置为true，js后缀的文件也会被typescript进行编译。</p><h2 id="_13-typeroots和types" tabindex="-1">13. typeRoots和types <a class="header-anchor" href="#_13-typeroots和types" aria-label="Permalink to &quot;13. typeRoots和types&quot;">​</a></h2><p>默认所有可见的&quot;@types&quot;包会在编译过程中被包含进来。如果指定了typeRoots，只有typeRoots下面的包才会被包含进来。如果指定了types，只有被列出来的npm包才会被包含进来。<a href="https://www.tslang.cn/docs/handbook/tsconfig-json.html#types-typeroots-and-types" target="_blank" rel="noreferrer">详细内容可看此处(opens new window)</a></p><blockquote><p>可以指定&quot;types&quot;: []来禁用自动引入@types包</p></blockquote><h2 id="_14-files、include和exclude" tabindex="-1">14. files、include和exclude <a class="header-anchor" href="#_14-files、include和exclude" aria-label="Permalink to &quot;14. files、include和exclude&quot;">​</a></h2><p><code>编译文件包含哪些文件以及排除哪些文件</code>。</p><p>未设置include时，编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx）。如果allowJs被设置成true，JS文件（.js和.jsx）也被包含进来。exclude排除那些不需要编译的文件或文件夹。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">compilerOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">:</span><span style="color:#666666;"> {},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">include</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src/**/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">exclude</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">node_modules</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">**/*.spec.ts</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">compilerOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">:</span><span style="color:#999999;"> {},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">include</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src/**/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">exclude</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">node_modules</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">**/*.spec.ts</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="tsconfig-json全解析" tabindex="-1">tsconfig.json全解析 <a class="header-anchor" href="#tsconfig-json全解析" aria-label="Permalink to &quot;tsconfig.json全解析&quot;">​</a></h2><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">compilerOptions</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 基本选项 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">target</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">es5</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 指定 ECMAScript 目标版本: &#39;ES3&#39; (default), &#39;ES5&#39;, &#39;ES2015&#39;, &#39;ES2016&#39;, &#39;ES2017&#39;, or &#39;ESNEXT&#39;（&quot;ESNext&quot;表示最新的ES语法，包括还处在stage X阶段）</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">module</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">commonjs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                  </span><span style="color:#758575DD;">// 指定使用模块: &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39; or &#39;es2015&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">lib</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span><span style="color:#DBD7CAEE;">                             </span><span style="color:#758575DD;">// 指定要包含在编译中的库文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">allowJs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 允许编译 javascript 文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">checkJs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 报告 javascript 文件中的错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">jsx</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">preserve</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                     </span><span style="color:#758575DD;">// 指定 jsx 代码的生成: &#39;preserve&#39;, &#39;react-native&#39;, or &#39;react&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">declaration</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                   </span><span style="color:#758575DD;">// 生成相应的 &#39;.d.ts&#39; 文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">sourceMap</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                     </span><span style="color:#758575DD;">// 生成相应的 &#39;.map&#39; 文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">outFile</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 将输出文件合并为一个文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">outDir</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                        </span><span style="color:#758575DD;">// 指定输出目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">rootDir</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 用来控制输出目录结构 --outDir.</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">removeComments</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                </span><span style="color:#758575DD;">// 删除编译后的所有的注释</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noEmit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                        </span><span style="color:#758575DD;">// 不生成输出文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">importHelpers</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                 </span><span style="color:#758575DD;">// 从 tslib 导入辅助工具函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">isolatedModules</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">               </span><span style="color:#758575DD;">// 将每个文件做为单独的模块 （与 &#39;ts.transpileModule&#39; 类似）.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 严格的类型检查选项 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">strict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                        </span><span style="color:#758575DD;">// 启用所有严格类型检查选项</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noImplicitAny</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                 </span><span style="color:#758575DD;">// 在表达式和声明上有隐含的 any类型时报错</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">strictNullChecks</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">              </span><span style="color:#758575DD;">// 启用严格的 null 检查</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noImplicitThis</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                </span><span style="color:#758575DD;">// 当 this 表达式值为 any 类型的时候，生成一个错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">alwaysStrict</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                  </span><span style="color:#758575DD;">// 以严格模式检查每个模块，并在每个文件里加入 &#39;use strict&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 额外的检查 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noUnusedLocals</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                </span><span style="color:#758575DD;">// 有未使用的变量时，抛出错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noUnusedParameters</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">            </span><span style="color:#758575DD;">// 有未使用的参数时，抛出错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noImplicitReturns</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">             </span><span style="color:#758575DD;">// 并不是所有函数里的代码都有返回值时，抛出错误</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">noFallthroughCasesInSwitch</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">// 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 模块解析选项 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">moduleResolution</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">node</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">            </span><span style="color:#758575DD;">// 选择模块解析策略： &#39;node&#39; (Node.js) or &#39;classic&#39; (TypeScript pre-1.6)。默认是classic</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">baseUrl</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 用于解析非相对模块名称的基目录</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">paths</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span><span style="color:#DBD7CAEE;">                           </span><span style="color:#758575DD;">// 模块名到基于 baseUrl 的路径映射的列表</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">rootDirs</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span><span style="color:#DBD7CAEE;">                        </span><span style="color:#758575DD;">// 根文件夹列表，其组合内容表示项目运行时的结构内容</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">typeRoots</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 包含类型声明的文件列表</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">types</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[],</span><span style="color:#DBD7CAEE;">                           </span><span style="color:#758575DD;">// 需要包含的类型声明文件名列表</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">allowSyntheticDefaultImports</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 允许从没有设置默认导出的模块中默认导入。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* Source Map Options */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">sourceRoot</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                    </span><span style="color:#758575DD;">// 指定调试器应该找到 TypeScript 文件而不是源文件的位置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">mapRoot</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                       </span><span style="color:#758575DD;">// 指定调试器应该找到映射文件而不是生成文件的位置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">inlineSourceMap</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">               </span><span style="color:#758575DD;">// 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">inlineSources</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">                 </span><span style="color:#758575DD;">// 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#758575DD;">/* 其他选项 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">experimentalDecorators</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">// 启用装饰器</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">emitDecoratorMetadata</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">         </span><span style="color:#758575DD;">// 为装饰器提供元数据的支持</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">strictFunctionTypes</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">           </span><span style="color:#758575DD;">// 禁用函数参数双向协变检查。</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 指定编译文件或排除指定编译文件 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">include</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src/**/*</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">exclude</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">node_modules</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">**/*.spec.ts</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">files</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">core.ts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">sys.ts</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 从另一个配置文件里继承配置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">extends</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">./config/base</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 让IDE在保存文件的时候根据tsconfig.json重新生成文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">compileOnSave</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">compilerOptions</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 基本选项 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">target</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">es5</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 指定 ECMAScript 目标版本: &#39;ES3&#39; (default), &#39;ES5&#39;, &#39;ES2015&#39;, &#39;ES2016&#39;, &#39;ES2017&#39;, or &#39;ESNEXT&#39;（&quot;ESNext&quot;表示最新的ES语法，包括还处在stage X阶段）</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">module</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">commonjs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                  </span><span style="color:#A0ADA0;">// 指定使用模块: &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39; or &#39;es2015&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">lib</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span><span style="color:#393A34;">                             </span><span style="color:#A0ADA0;">// 指定要包含在编译中的库文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">allowJs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 允许编译 javascript 文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">checkJs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 报告 javascript 文件中的错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">jsx</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">preserve</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                     </span><span style="color:#A0ADA0;">// 指定 jsx 代码的生成: &#39;preserve&#39;, &#39;react-native&#39;, or &#39;react&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">declaration</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                   </span><span style="color:#A0ADA0;">// 生成相应的 &#39;.d.ts&#39; 文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">sourceMap</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                     </span><span style="color:#A0ADA0;">// 生成相应的 &#39;.map&#39; 文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">outFile</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 将输出文件合并为一个文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">outDir</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                        </span><span style="color:#A0ADA0;">// 指定输出目录</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">rootDir</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 用来控制输出目录结构 --outDir.</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">removeComments</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                </span><span style="color:#A0ADA0;">// 删除编译后的所有的注释</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noEmit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                        </span><span style="color:#A0ADA0;">// 不生成输出文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">importHelpers</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                 </span><span style="color:#A0ADA0;">// 从 tslib 导入辅助工具函数</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">isolatedModules</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">               </span><span style="color:#A0ADA0;">// 将每个文件做为单独的模块 （与 &#39;ts.transpileModule&#39; 类似）.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 严格的类型检查选项 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">strict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                        </span><span style="color:#A0ADA0;">// 启用所有严格类型检查选项</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noImplicitAny</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                 </span><span style="color:#A0ADA0;">// 在表达式和声明上有隐含的 any类型时报错</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">strictNullChecks</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">              </span><span style="color:#A0ADA0;">// 启用严格的 null 检查</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noImplicitThis</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                </span><span style="color:#A0ADA0;">// 当 this 表达式值为 any 类型的时候，生成一个错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">alwaysStrict</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                  </span><span style="color:#A0ADA0;">// 以严格模式检查每个模块，并在每个文件里加入 &#39;use strict&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 额外的检查 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noUnusedLocals</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                </span><span style="color:#A0ADA0;">// 有未使用的变量时，抛出错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noUnusedParameters</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">            </span><span style="color:#A0ADA0;">// 有未使用的参数时，抛出错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noImplicitReturns</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">             </span><span style="color:#A0ADA0;">// 并不是所有函数里的代码都有返回值时，抛出错误</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">noFallthroughCasesInSwitch</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">// 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 模块解析选项 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">moduleResolution</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">node</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">            </span><span style="color:#A0ADA0;">// 选择模块解析策略： &#39;node&#39; (Node.js) or &#39;classic&#39; (TypeScript pre-1.6)。默认是classic</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">baseUrl</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 用于解析非相对模块名称的基目录</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">paths</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span><span style="color:#393A34;">                           </span><span style="color:#A0ADA0;">// 模块名到基于 baseUrl 的路径映射的列表</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">rootDirs</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span><span style="color:#393A34;">                        </span><span style="color:#A0ADA0;">// 根文件夹列表，其组合内容表示项目运行时的结构内容</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">typeRoots</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 包含类型声明的文件列表</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">types</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[],</span><span style="color:#393A34;">                           </span><span style="color:#A0ADA0;">// 需要包含的类型声明文件名列表</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">allowSyntheticDefaultImports</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 允许从没有设置默认导出的模块中默认导入。</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* Source Map Options */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">sourceRoot</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                    </span><span style="color:#A0ADA0;">// 指定调试器应该找到 TypeScript 文件而不是源文件的位置</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">mapRoot</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">                       </span><span style="color:#A0ADA0;">// 指定调试器应该找到映射文件而不是生成文件的位置</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">inlineSourceMap</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">               </span><span style="color:#A0ADA0;">// 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">inlineSources</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">                 </span><span style="color:#A0ADA0;">// 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A0ADA0;">/* 其他选项 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">experimentalDecorators</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">// 启用装饰器</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">emitDecoratorMetadata</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">         </span><span style="color:#A0ADA0;">// 为装饰器提供元数据的支持</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">strictFunctionTypes</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">           </span><span style="color:#A0ADA0;">// 禁用函数参数双向协变检查。</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 指定编译文件或排除指定编译文件 */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">include</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src/**/*</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">exclude</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">node_modules</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">**/*.spec.ts</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">files</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">core.ts</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">sys.ts</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 从另一个配置文件里继承配置</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">extends</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">./config/base</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 让IDE在保存文件的时候根据tsconfig.json重新生成文件</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">compileOnSave</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,58),e=[p];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const E=s(l,[["render",t]]);export{B as __pageData,E as default};
diff --git "a/assets/FrontEnd_TypeScript_\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md.7a55465d.lean.js" "b/assets/FrontEnd_TypeScript_\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md.7a55465d.lean.js"
new file mode 100644
index 00000000..b8f2b59f
--- /dev/null
+++ "b/assets/FrontEnd_TypeScript_\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.md.7a55465d.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as o}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"Typescript 配置文件（tsconfig.json）解析","description":"","frontmatter":{},"headers":[],"relativePath":"FrontEnd/TypeScript/配置文件详解.md","filePath":"FrontEnd/TypeScript/配置文件详解.md"}'),l={name:"FrontEnd/TypeScript/配置文件详解.md"},p=o("",58),e=[p];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const E=s(l,[["render",t]]);export{B as __pageData,E as default};
diff --git a/assets/GoodTool_index.md.2cde5d0e.js b/assets/GoodTool_index.md.2cde5d0e.js
new file mode 100644
index 00000000..5875ec2d
--- /dev/null
+++ b/assets/GoodTool_index.md.2cde5d0e.js
@@ -0,0 +1 @@
+import{_ as m,o as n,c as s,p as x,m as y,k as e,d as f,h as k,g as j,a4 as h,a9 as g,H as w,t as b,F as _,D as v,l as T,b as $,a as I}from"./chunks/framework.c53372a0.js";const z={},r=t=>(x("data-v-4fdc7ada"),t=t(),y(),t),S={class:"loader"},C=r(()=>e("div",null,null,-1)),D=r(()=>e("div",null,null,-1)),G=r(()=>e("div",null,null,-1)),L=r(()=>e("div",null,null,-1)),N=[C,D,G,L];function P(t,i){return n(),s("div",S,N)}const V=m(z,[["render",P],["__scopeId","data-v-4fdc7ada"]]),O=["href"],B=["alt","src"],F={class:"tool-name"},A=f({__name:"ToolItem",props:{tool:{type:Object,required:!0}},setup(t){const{tool:i}=t,a=k(!1),u=j(()=>{let{icon:o,iconType:c,url:p}=i;return o||p+"favicon."+(c||"ico")}),d=o=>{o.target.src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302062047848.svg"},l=o=>{a.value=!0,o.target.onerror=null,o.target.onload=null};return(o,c)=>{const p=V;return n(),s("a",{class:"tool-item",href:t.tool.url,target:"blank"},[h(w(p,{class:"tool-icon"},null,512),[[g,!a.value]]),h(e("img",{class:"tool-icon",alt:t.tool.name,src:u.value,onload:l,onError:d},null,40,B),[[g,a.value]]),e("p",F,b(t.tool.name),1)],8,O)}}});const E=m(A,[["__scopeId","data-v-2525f4e1"]]),H={在线编程工具:[{name:"Lightly",iconType:"svg",url:"https://lightly.teamcode.com/"},{name:"码上掘金",icon:"https://juejin.cn/favicon.ico",url:"https://code.juejin.cn"},{name:"Glitch",url:"https://glitch.com/"},{name:"CodePen",url:"https://codepen.io/"},{name:"CodeSandbox",url:"https://codesandbox.io/"},{name:"Stackblitz",url:"https://stackblitz.com/",icon:"https://c.staticblitz.com/assets/favicon-editor-675989317f34707a17fe9d649da3609d70f6f8abc9546445389238ddd570a1d4.png"}],前端组件库:[{name:"Element-UI",url:"https://element.eleme.cn/"},{name:"Ant Design",icon:"https://ng.ant.design/assets/img/logo.svg",url:"https://ant.design/index-cn/"},{name:"Arco Design",icon:"https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico",url:"https://arco.design/vue/docs/start"},{name:"Vant",icon:"https://fastly.jsdelivr.net/npm/@vant/assets/logo.png",url:"https://vant-contrib.gitee.io/vant/#/zh-CN"},{name:"Motion Vueuse",url:"https://motion.vueuse.org/"}],作图工具:[{name:"Figma",url:"www.figma.com/",icon:"https://static.figma.com/app/icon/1/favicon.ico"},{name:"ProcessOn",url:"https://www.processon.com/"},{name:"知犀思维导图",url:"https://www.zhixi.com/"},{name:"ioDraw",icon:"https://www.iodraw.com/static/img/common/iodraw.svg",url:"https://www.iodraw.com"},{name:"jsoncrack",url:"https://jsoncrack.com/"},{name:"JSON Viewer",icon:"https://fxzer.gitee.io/json-viewer/jvlogo.svg",url:"https://fxzer.gitee.io/json-viewer/"}],调色板:[{name:"FlatuiColors",icon:"https://flatuicolors.com/static/favicon.ico",url:"https://flatuicolors.com/"},{name:"Color Hunt",icon:"https://www.colorhunt.co/img/colorhunt-favicon.svg?2",url:"https://www.colorhunt.co/"},{name:"Arco Palette",icon:"https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico",url:"https://arco.design/palette/list"},{name:"ioDraw",icon:"https://webkul.github.io/coolhue/images/coolhue-logo.png",url:"https://webkul.github.io/coolhue/"},{name:"中国传统色",url:"http://zhongguose.com/"},{name:"GradientHunt",icon:"https://gradienthunt.com/img/gradienthunt.png",url:"https://gradienthunt.com/"},{name:"uigradients",icon:"https://uigradients.com/static/images/favicon-32x32.png",url:"https://uigradients.com/"},{name:"Coolors",icon:"https://coolors.co/assets/img/favicon.png",url:"https://coolors.co/"},{name:"MyColor",icon:"https://mycolor.space/img/color-space-logo.png",url:"https://mycolor.space/"}]},W={class:"tool-wrap"},J={class:"tool-group-title"},M={class:"tool-group"},q=f({__name:"ToolWrap",setup(t){return(i,a)=>{const u=E;return n(),s("div",W,[(n(!0),s(_,null,v(T(H),(d,l)=>(n(),s(_,{key:l},[e("div",J,b(l),1),e("div",M,[(n(!0),s(_,null,v(d,(o,c)=>(n(),$(u,{key:c,tool:o},null,8,["tool"]))),128))])],64))),128))])}}});const U=m(q,[["__scopeId","data-v-a04e210c"]]),K=e("h1",{id:"实用工具集锦",tabindex:"-1"},[I("实用工具集锦 "),e("a",{class:"header-anchor",href:"#实用工具集锦","aria-label":'Permalink to "实用工具集锦"'},"​")],-1),X=JSON.parse('{"title":"实用工具集锦","description":"","frontmatter":{},"headers":[],"relativePath":"GoodTool/index.md","filePath":"GoodTool/index.md"}'),Q={name:"GoodTool/index.md"},Y=Object.assign(Q,{setup(t){return(i,a)=>(n(),s("div",null,[K,w(U)]))}});export{X as __pageData,Y as default};
diff --git a/assets/GoodTool_index.md.2cde5d0e.lean.js b/assets/GoodTool_index.md.2cde5d0e.lean.js
new file mode 100644
index 00000000..5875ec2d
--- /dev/null
+++ b/assets/GoodTool_index.md.2cde5d0e.lean.js
@@ -0,0 +1 @@
+import{_ as m,o as n,c as s,p as x,m as y,k as e,d as f,h as k,g as j,a4 as h,a9 as g,H as w,t as b,F as _,D as v,l as T,b as $,a as I}from"./chunks/framework.c53372a0.js";const z={},r=t=>(x("data-v-4fdc7ada"),t=t(),y(),t),S={class:"loader"},C=r(()=>e("div",null,null,-1)),D=r(()=>e("div",null,null,-1)),G=r(()=>e("div",null,null,-1)),L=r(()=>e("div",null,null,-1)),N=[C,D,G,L];function P(t,i){return n(),s("div",S,N)}const V=m(z,[["render",P],["__scopeId","data-v-4fdc7ada"]]),O=["href"],B=["alt","src"],F={class:"tool-name"},A=f({__name:"ToolItem",props:{tool:{type:Object,required:!0}},setup(t){const{tool:i}=t,a=k(!1),u=j(()=>{let{icon:o,iconType:c,url:p}=i;return o||p+"favicon."+(c||"ico")}),d=o=>{o.target.src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302062047848.svg"},l=o=>{a.value=!0,o.target.onerror=null,o.target.onload=null};return(o,c)=>{const p=V;return n(),s("a",{class:"tool-item",href:t.tool.url,target:"blank"},[h(w(p,{class:"tool-icon"},null,512),[[g,!a.value]]),h(e("img",{class:"tool-icon",alt:t.tool.name,src:u.value,onload:l,onError:d},null,40,B),[[g,a.value]]),e("p",F,b(t.tool.name),1)],8,O)}}});const E=m(A,[["__scopeId","data-v-2525f4e1"]]),H={在线编程工具:[{name:"Lightly",iconType:"svg",url:"https://lightly.teamcode.com/"},{name:"码上掘金",icon:"https://juejin.cn/favicon.ico",url:"https://code.juejin.cn"},{name:"Glitch",url:"https://glitch.com/"},{name:"CodePen",url:"https://codepen.io/"},{name:"CodeSandbox",url:"https://codesandbox.io/"},{name:"Stackblitz",url:"https://stackblitz.com/",icon:"https://c.staticblitz.com/assets/favicon-editor-675989317f34707a17fe9d649da3609d70f6f8abc9546445389238ddd570a1d4.png"}],前端组件库:[{name:"Element-UI",url:"https://element.eleme.cn/"},{name:"Ant Design",icon:"https://ng.ant.design/assets/img/logo.svg",url:"https://ant.design/index-cn/"},{name:"Arco Design",icon:"https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico",url:"https://arco.design/vue/docs/start"},{name:"Vant",icon:"https://fastly.jsdelivr.net/npm/@vant/assets/logo.png",url:"https://vant-contrib.gitee.io/vant/#/zh-CN"},{name:"Motion Vueuse",url:"https://motion.vueuse.org/"}],作图工具:[{name:"Figma",url:"www.figma.com/",icon:"https://static.figma.com/app/icon/1/favicon.ico"},{name:"ProcessOn",url:"https://www.processon.com/"},{name:"知犀思维导图",url:"https://www.zhixi.com/"},{name:"ioDraw",icon:"https://www.iodraw.com/static/img/common/iodraw.svg",url:"https://www.iodraw.com"},{name:"jsoncrack",url:"https://jsoncrack.com/"},{name:"JSON Viewer",icon:"https://fxzer.gitee.io/json-viewer/jvlogo.svg",url:"https://fxzer.gitee.io/json-viewer/"}],调色板:[{name:"FlatuiColors",icon:"https://flatuicolors.com/static/favicon.ico",url:"https://flatuicolors.com/"},{name:"Color Hunt",icon:"https://www.colorhunt.co/img/colorhunt-favicon.svg?2",url:"https://www.colorhunt.co/"},{name:"Arco Palette",icon:"https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico",url:"https://arco.design/palette/list"},{name:"ioDraw",icon:"https://webkul.github.io/coolhue/images/coolhue-logo.png",url:"https://webkul.github.io/coolhue/"},{name:"中国传统色",url:"http://zhongguose.com/"},{name:"GradientHunt",icon:"https://gradienthunt.com/img/gradienthunt.png",url:"https://gradienthunt.com/"},{name:"uigradients",icon:"https://uigradients.com/static/images/favicon-32x32.png",url:"https://uigradients.com/"},{name:"Coolors",icon:"https://coolors.co/assets/img/favicon.png",url:"https://coolors.co/"},{name:"MyColor",icon:"https://mycolor.space/img/color-space-logo.png",url:"https://mycolor.space/"}]},W={class:"tool-wrap"},J={class:"tool-group-title"},M={class:"tool-group"},q=f({__name:"ToolWrap",setup(t){return(i,a)=>{const u=E;return n(),s("div",W,[(n(!0),s(_,null,v(T(H),(d,l)=>(n(),s(_,{key:l},[e("div",J,b(l),1),e("div",M,[(n(!0),s(_,null,v(d,(o,c)=>(n(),$(u,{key:c,tool:o},null,8,["tool"]))),128))])],64))),128))])}}});const U=m(q,[["__scopeId","data-v-a04e210c"]]),K=e("h1",{id:"实用工具集锦",tabindex:"-1"},[I("实用工具集锦 "),e("a",{class:"header-anchor",href:"#实用工具集锦","aria-label":'Permalink to "实用工具集锦"'},"​")],-1),X=JSON.parse('{"title":"实用工具集锦","description":"","frontmatter":{},"headers":[],"relativePath":"GoodTool/index.md","filePath":"GoodTool/index.md"}'),Q={name:"GoodTool/index.md"},Y=Object.assign(Q,{setup(t){return(i,a)=>(n(),s("div",null,[K,w(U)]))}});export{X as __pageData,Y as default};
diff --git "a/assets/Interview_Brower_\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md.9f053692.js" "b/assets/Interview_Brower_\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md.9f053692.js"
new file mode 100644
index 00000000..077735e5
--- /dev/null
+++ "b/assets/Interview_Brower_\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md.9f053692.js"
@@ -0,0 +1 @@
+import{_ as a,o as l,c as o,Q as t}from"./chunks/framework.c53372a0.js";const _=JSON.parse('{"title":"事件循环机制","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Brower/事件循环机制.md","filePath":"Interview/Brower/事件循环机制.md"}'),i={name:"Interview/Brower/事件循环机制.md"},e=t('<h1 id="事件循环机制" tabindex="-1">事件循环机制 <a class="header-anchor" href="#事件循环机制" aria-label="Permalink to &quot;事件循环机制&quot;">​</a></h1><h2 id="进程与线程" tabindex="-1">进程与线程 <a class="header-anchor" href="#进程与线程" aria-label="Permalink to &quot;进程与线程&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">描述</p><p>进程是操作系统<strong>分配资源</strong>的基本单位，线程是操作<strong>系统调度</strong>的基本单位，线程可以看做轻量级的进程。</p></div><ol><li><p>一个进程中至少包含一个线程，线程不能包含进程，不能单独存在，必须由进程启动和管理</p></li><li><p>多个进程间不能共享资源，都有自己私有的程序计数器（记录执行指令地址）,线程可以共享同一个进程间的资源</p></li><li><p>上下文切换：进程慢，线程快（从一个切换到另一个）</p></li><li><p>操纵者不同：进程操纵者是操作系统，线程操纵者一般为程序员</p></li></ol><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302231653903.png" alt="image-20230223165307358"></p><h2 id="浏览器的线程与进程" tabindex="-1">浏览器的线程与进程 <a class="header-anchor" href="#浏览器的线程与进程" aria-label="Permalink to &quot;浏览器的线程与进程&quot;">​</a></h2><blockquote><p>浏览器是一个<strong>多进程多线程</strong>的应用程序</p></blockquote><ol><li>浏览器进程：负责浏览器界面展示、用户交互、子进程管理等；浏览器进程内部会启动多个线程处理不同的任务。</li><li>网络进程：负责加载网络资源，网络进程内部会启动多个线程来处理不同的网络任务。</li><li>渲染进程：渲染进程启动后，会启动一个渲染<strong>主进程</strong>，主进程负责执行 HTML、CSS、JS 代码。</li></ol><blockquote><p>默认每个标签页开启一个新进程，以保证标签页之间不互相影响。</p></blockquote><h2 id="渲染进程任务" tabindex="-1">渲染进程任务 <a class="header-anchor" href="#渲染进程任务" aria-label="Permalink to &quot;渲染进程任务&quot;">​</a></h2><ol><li>解析 HTML</li><li>解析 CSS</li><li>计算 样式</li><li>页面布局</li><li>处理图层</li><li>每秒把页面渲染 60 次</li><li>执行全局 JS 代码</li><li>执行事件处理函数</li><li>执行定时器的回调函数</li></ol><h2 id="事件循环" tabindex="-1">事件循环 <a class="header-anchor" href="#事件循环" aria-label="Permalink to &quot;事件循环&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-21-01-25.png" alt="2023-03-05-21-01-25"></p><details class="details custom-block"><summary>事件循环解释</summary><ol><li><p>在最开始的时候，渲染主线程会进入一个无限循环</p></li><li><p>每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。</p></li><li><p>其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的未尾。在添加新任务时，“如果主线程是休眠状态，则会将其唤醒以绁续循环拿取任务；如此循环往复，持续进行。</p></li></ol></details><div class="tip custom-block"><p class="custom-block-title">异步与事件循环理解</p><p>单线程是异步产生的原因，事件循环是异步的实现方式。</p></div><h2 id="如何理解异步" tabindex="-1">如何理解异步 <a class="header-anchor" href="#如何理解异步" aria-label="Permalink to &quot;如何理解异步&quot;">​</a></h2><blockquote><p>Js是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。</p><p>而渲染主线程承担渲染页面、执行 JS 等诸多的任务。</p><p>如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。</p><p>这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。</p><p>所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理;</p><p>自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的未尾排队，等待主线程调度执行。</p><p>在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。使用异步的方式，<strong>渲染主线程永不阻塞</strong>。</p></blockquote><h2 id="消息队列" tabindex="-1">消息队列 <a class="header-anchor" href="#消息队列" aria-label="Permalink to &quot;消息队列&quot;">​</a></h2><blockquote><p>任务没有优先级，在消息队列中先进先出。但是 <strong>消息队列有优先级</strong>。</p><p>每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。</p><p>在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。</p><p>浏览器必须准备好一个微队列，微队列中的任务<strong>优先</strong>所有其他任务执行。</p></blockquote><details class="details custom-block"><summary>JS 中的计时器能做到精确计时吗</summary><p>不行，因为有操作系统计时函数偏差、事件循环机制的损耗：</p><p>1．计算机硬件没有原子钟，无法做到精确计时</p><p>2．操作系统的计时函数本身就有少量偏差！ 由于 JS 的计时器最终调用的是操作系统的函数，也就携带了此偏养</p><p>3．按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，间隔时间少于 4 毫秒，则会增加到 4 毫秒 这又带来了偏差</p><p>4． 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差。</p></details><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-21-56-25.png" alt="2023-03-05-21-56-25"></p>',21),s=[e];function r(p,c,n,h,d,u){return l(),o("div",null,s)}const b=a(i,[["render",r]]);export{_ as __pageData,b as default};
diff --git "a/assets/Interview_Brower_\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md.9f053692.lean.js" "b/assets/Interview_Brower_\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md.9f053692.lean.js"
new file mode 100644
index 00000000..5a58eb84
--- /dev/null
+++ "b/assets/Interview_Brower_\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.md.9f053692.lean.js"
@@ -0,0 +1 @@
+import{_ as a,o as l,c as o,Q as t}from"./chunks/framework.c53372a0.js";const _=JSON.parse('{"title":"事件循环机制","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Brower/事件循环机制.md","filePath":"Interview/Brower/事件循环机制.md"}'),i={name:"Interview/Brower/事件循环机制.md"},e=t("",21),s=[e];function r(p,c,n,h,d,u){return l(),o("div",null,s)}const b=a(i,[["render",r]]);export{_ as __pageData,b as default};
diff --git "a/assets/Interview_Brower_\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md.1acb73dd.js" "b/assets/Interview_Brower_\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md.1acb73dd.js"
new file mode 100644
index 00000000..5ab83674
--- /dev/null
+++ "b/assets/Interview_Brower_\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md.1acb73dd.js"
@@ -0,0 +1 @@
+import{_ as a,o as e,c as t,Q as o}from"./chunks/framework.c53372a0.js";const b=JSON.parse('{"title":"浏览器网页请求过程","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Brower/浏览器网页请求过程.md","filePath":"Interview/Brower/浏览器网页请求过程.md"}'),l={name:"Interview/Brower/浏览器网页请求过程.md"},i=o('<h1 id="浏览器网页请求过程" tabindex="-1">浏览器网页请求过程 <a class="header-anchor" href="#浏览器网页请求过程" aria-label="Permalink to &quot;浏览器网页请求过程&quot;">​</a></h1><ol><li>网络：请求资源</li><li>渲染：处理渲染</li></ol><div class="tip custom-block"><p class="custom-block-title">完整的 HTTP 请求过程</p><p>域名解析 ==&gt; 与服务器建立连接 ==&gt; 发起 HTTP 请求 ==&gt; 服务器响应 HTTP 请求，浏览器得到 html 代码 ==&gt; 浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片） ==&gt; 浏览器对页面进行渲染呈现给用户</p></div><h2 id="一、域名解析" tabindex="-1">一、域名解析 <a class="header-anchor" href="#一、域名解析" aria-label="Permalink to &quot;一、域名解析&quot;">​</a></h2><ol><li>Chrome 浏览器 会首先搜索浏览器自身的 DNS 缓存，有且没有过期则解析到此结束。</li><li>如果浏览器自身的缓存里面没有找到对应的条目，会搜索操作系统自身的 DNS 缓存，有且没有过期则停止搜索解析到此结束</li></ol><blockquote><p>Windows 系统：<code>ipconfig/displaydns</code> 命令查看</p></blockquote><ol start="3"><li>如果在 Windows 系统的 DNS 缓存也没有找到，则读取 hosts 文件</li></ol><blockquote><p>hosts 位于 <code>‪C:\\Windows\\System32\\drivers\\etc\\hosts</code></p></blockquote><ol start="4"><li><p>hosts 文件中也没有找到对应的条目，浏览器就会发起一个 DNS 的系统调用，就会向本地配置的首选 DNS 服务器发起域名解析请求</p><p>并返回给 Windows 系统内核，内核又把结果返回给浏览器。（这是递归的请求，也就是运营商的 DNS 服务器必须得提供并返回该域名的 IP 地址）</p></li><li><p>经过以上的 4 个步骤，还没有解析成功</p></li></ol><blockquote><p>注：一般会进行以下几步</p><p>操作系统就会查找 NetBIOS name Cache == &gt; WINS 服务器 ==&gt; 客户端就要进行广播查找 ==&gt; 客户端就读取 LMHOSTS 文件</p></blockquote><p>如果还没有解析成功，那么就宣告这次解析失败，那就无法跟目标计算机进行通信。只要其中有一步可以解析成功，那就可以成功和目标计算机进行通信。</p><h2 id="二、与服务器建立连接" tabindex="-1">二、与服务器建立连接 <a class="header-anchor" href="#二、与服务器建立连接" aria-label="Permalink to &quot;二、与服务器建立连接&quot;">​</a></h2><ol><li>TCP 连接的建立</li></ol><p>客户端的请求到达服务器，首先就是三次握手建立 TCP 连接</p><blockquote><p>三次握手的目的：试探一下对方是否遵循 TCP/IP 协议，为了在不可靠的信道上建立起可靠的连接</p></blockquote><blockquote><p><strong>为什么要进行第三次握手</strong>：为了防止服务器端开启一些无用的连接，增加服务器开销；</p><p>以及防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。</p></blockquote><p><img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="img"></p><h2 id="三、发起-http-请求" tabindex="-1">三、发起 HTTP 请求 <a class="header-anchor" href="#三、发起-http-请求" aria-label="Permalink to &quot;三、发起 HTTP 请求&quot;">​</a></h2><p>http 协议：计算机通过网络进行通信的规则，是一个基于请求与响应，无状态的，应用层的协议，常基于 TCP/IP 协议传输数据。</p><h3 id="请求报文结构" tabindex="-1">请求报文结构 <a class="header-anchor" href="#请求报文结构" aria-label="Permalink to &quot;请求报文结构&quot;">​</a></h3><p>请求报文包括四个部分：请求行，请求头，空行，请求体。</p><p><img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="img"></p><h2 id="四、服务器端响应-http-请求-浏览器得到-html-代码" tabindex="-1">四、服务器端响应 HTTP 请求，浏览器得到 HTML 代码 <a class="header-anchor" href="#四、服务器端响应-http-请求-浏览器得到-html-代码" aria-label="Permalink to &quot;四、服务器端响应 HTTP 请求，浏览器得到 HTML 代码&quot;">​</a></h2><p>HTTP 的响应报文也由四部分组成：响应行、响应头、空行、响应体</p><p><img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="img"></p><p><a href="https://blog.csdn.net/lyn_00/article/details/84953763" target="_blank" rel="noreferrer">报文结构参考</a></p><h2 id="五、浏览器渲染过程" tabindex="-1">五、浏览器渲染过程 <a class="header-anchor" href="#五、浏览器渲染过程" aria-label="Permalink to &quot;五、浏览器渲染过程&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-05-19.png" alt="2023-03-05-22-05-19"></p><ol><li>解析 html 结构，形成 Dom 树</li><li>解析 CSS，生成 cssom</li><li>将 CSSOM 和 DOM 合并形成 render 树</li><li>计算 layout 布局</li><li>将布局渲染到屏幕上</li></ol><p>整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画</p><h3 id="一、解析-html" tabindex="-1">一、解析 HTML <a class="header-anchor" href="#一、解析-html" aria-label="Permalink to &quot;一、解析 HTML&quot;">​</a></h3><p>解析过程中遇到 CSS 解析 CSS，遇到 JS执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和外部的JS 文件。</p><p>如果主线程解析到 link 位置，此时外部的CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 css 的工作是在预解析线程中进行的。这就是csS 不会阻塞 HTML 解析的根本原因。</p><p>如果主线程解析到 script 位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 Js 代码的执行过程可能会修改当前的DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阳塞 HTML 解析的根本原因。</p><p>第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。 <img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-07-54.png" alt="2023-03-05-22-07-54"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-29-15.png" alt="2023-03-05-22-29-15"></p><blockquote><p>解析成对象，提供 JS 可操作的能力</p></blockquote><h3 id="二、解析-css" tabindex="-1">二、解析 CSS <a class="header-anchor" href="#二、解析-css" aria-label="Permalink to &quot;二、解析 CSS&quot;">​</a></h3><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-10-48.png" alt="2023-03-05-22-10-48"></p><blockquote><p><code>document.styleSheets、document.styleSheets[0].addRule(&#39;div&#39;:&#39;border :2px solid red&#39;)</code> 可查看、操作浏览器样式表</p></blockquote><h3 id="三、样式计算" tabindex="-1">三、样式计算 <a class="header-anchor" href="#三、样式计算" aria-label="Permalink to &quot;三、样式计算&quot;">​</a></h3><p>主线程会遍历得到的DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 <code>Computed Style</code>。</p><p>在这一过程中，很多预设值会变成绝对值，比如 red 会变成 rgb；相对单位会变成绝对单位，比如 em 会变成 px</p><p>这一步完成后，会得到一棵带有样式的DOM 树</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-31-23.png" alt="2023-03-05-22-31-23"></p><h3 id="四、布局layout" tabindex="-1">四、布局Layout <a class="header-anchor" href="#四、布局layout" aria-label="Permalink to &quot;四、布局Layout&quot;">​</a></h3><p>DOM树和 Layout 不一定是一一对应的，比如<code>head</code>默认样式<code>display:none</code>,<code>::before</code>在 Layout 树阶段，布局完成后形成布局树。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-05-22-38-44.png" alt="2023-03-05-22-38-44"></p><h3 id="五、分层layer" tabindex="-1">五、分层Layer <a class="header-anchor" href="#五、分层layer" aria-label="Permalink to &quot;五、分层Layer&quot;">​</a></h3><p>主线程使用复杂的策略对布局树进行分层。</p><h3 id="六、绘制paint" tabindex="-1">六、绘制Paint <a class="header-anchor" href="#六、绘制paint" aria-label="Permalink to &quot;六、绘制Paint&quot;">​</a></h3><p>为每个层生成绘制指令</p><h3 id="七、分块tiling" tabindex="-1">七、分块Tiling <a class="header-anchor" href="#七、分块tiling" aria-label="Permalink to &quot;七、分块Tiling&quot;">​</a></h3><p>分块工作交给多个线程同时进行</p><h3 id="八、光栅化raster" tabindex="-1">八、光栅化Raster <a class="header-anchor" href="#八、光栅化raster" aria-label="Permalink to &quot;八、光栅化Raster&quot;">​</a></h3><p>合成线程将信息交给 GPU 进程，将每个快变成位图，优先处理靠近视口的块，此过程会用到 GPU 加速，提升运算速率。</p><h3 id="九、画draw" tabindex="-1">九、画Draw <a class="header-anchor" href="#九、画draw" aria-label="Permalink to &quot;九、画Draw&quot;">​</a></h3><p>合成线程计算出每个位图在屏幕上的位置，交给 GPU 进行呈现。变形（旋转，缩放，倾斜）等发生在合成线程，与渲染主线程无关，这是 <code>transform</code> 效率高的本质原因。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-06-21-54-14.png" alt="2023-03-06-21-54-14"></p><h3 id="回流reflow" tabindex="-1">回流reflow <a class="header-anchor" href="#回流reflow" aria-label="Permalink to &quot;回流reflow&quot;">​</a></h3><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-06-21-56-10.png" alt="2023-03-06-21-56-10"></p><p>reflow 的本质就是重新计算 layout 树。</p><p>当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。</p><p>为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 ref1ow 是异步完成的。</p><p>也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息浏览器在反复权衡下，最终决定获取属性立即 ref1ow。</p><div class="tip custom-block"><p class="custom-block-title">引起回流属性和方法：任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。</p><ol><li>页面首次渲染</li><li>添加或者删除可见的DOM元素</li><li>元素尺寸或位置发生改变</li><li>元素字体大小变化</li><li>浏览器窗口大小发生改变</li><li>激活CSS伪类（例如：:hover）</li><li>查询某些属性或调用某些方法</li></ol></div><h3 id="重绘repaint" tabindex="-1">重绘repaint <a class="header-anchor" href="#重绘repaint" aria-label="Permalink to &quot;重绘repaint&quot;">​</a></h3><p>repaint 的本质就是重新根据分层信息计算了绘制指令。</p><p>当改动了可见样式后，就需要重新计算，会引发 repaint。</p><p>由于元素的布局信息也属于可见样式，所以reflow 一定会引起 repaint。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-06-22-20-02.png" alt="2023-03-06-22-20-02"></p><details class="details custom-block"><summary>为什么 transform 的效率高?</summary><p>因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」 阶段由于 draw 阶段在合成线程中；</p><p>所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌．也不会影响 transform 的变化。</p></details><blockquote><p>需要更新属性，只是影响元素的外观、风格，不影响布局。改变 <code>​color​​​,​ ​background-color​​​, ​​visibility</code> 等属性</p></blockquote><p><a href="https://blog.51cto.com/u_15499114/4971560" target="_blank" rel="noreferrer">参考链接</a></p><h2 id="六、浏览器对页面进行渲染呈现给用户-关闭连接" tabindex="-1">六、浏览器对页面进行渲染呈现给用户，关闭连接 <a class="header-anchor" href="#六、浏览器对页面进行渲染呈现给用户-关闭连接" aria-label="Permalink to &quot;六、浏览器对页面进行渲染呈现给用户，关闭连接&quot;">​</a></h2><h3 id="四次挥手" tabindex="-1">四次挥手 <a class="header-anchor" href="#四次挥手" aria-label="Permalink to &quot;四次挥手&quot;">​</a></h3><p><img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="img"></p><p>问题一：</p><p>为什么连接的时候是三次握手，关闭的时候却是四次握手？</p><blockquote><p>为了保障数据发送完再断开连接</p></blockquote><p>问题二：</p><p>为什么要等待一段时间在关闭连接？</p><blockquote><p>因为客户端发送完 ack 包后中途可能丢失，此时服务端未收到 ack 包会重发 fin 包，客户端在发送 ack 包刷新等待时间，</p><p>确保服务端关闭再 关闭客户端</p></blockquote><p><a href="https://www.bilibili.com/video/BV1kV411j7hA?from=search&amp;seid=11094337157520488587" target="_blank" rel="noreferrer">参考视频 1</a></p><p><a href="https://www.bilibili.com/video/BV1BV411a72M?from=search&amp;seid=4937986881420888725" target="_blank" rel="noreferrer">参考视频 2</a></p>',84),r=[i];function s(p,c,h,n,d,m){return e(),t("div",null,r)}const A=a(l,[["render",s]]);export{b as __pageData,A as default};
diff --git "a/assets/Interview_Brower_\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md.1acb73dd.lean.js" "b/assets/Interview_Brower_\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md.1acb73dd.lean.js"
new file mode 100644
index 00000000..d6b03b11
--- /dev/null
+++ "b/assets/Interview_Brower_\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.md.1acb73dd.lean.js"
@@ -0,0 +1 @@
+import{_ as a,o as e,c as t,Q as o}from"./chunks/framework.c53372a0.js";const b=JSON.parse('{"title":"浏览器网页请求过程","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Brower/浏览器网页请求过程.md","filePath":"Interview/Brower/浏览器网页请求过程.md"}'),l={name:"Interview/Brower/浏览器网页请求过程.md"},i=o("",84),r=[i];function s(p,c,h,n,d,m){return e(),t("div",null,r)}const A=a(l,[["render",s]]);export{b as __pageData,A as default};
diff --git "a/assets/Interview_Brower_\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md.73c84072.js" "b/assets/Interview_Brower_\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md.73c84072.js"
new file mode 100644
index 00000000..a83c9f81
--- /dev/null
+++ "b/assets/Interview_Brower_\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md.73c84072.js"
@@ -0,0 +1 @@
+import{_ as t,o as e,c as a,Q as o}from"./chunks/framework.c53372a0.js";const q=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Brower/计算机网络.md","filePath":"Interview/Brower/计算机网络.md"}'),r={name:"Interview/Brower/计算机网络.md"},s=o('<h2 id="http与https区别" tabindex="-1">http与https区别 <a class="header-anchor" href="#http与https区别" aria-label="Permalink to &quot;http与https区别&quot;">​</a></h2><p>http：超文本传输协议，明文传输，信息不安全。用的是80端口</p><p>https：具有安全性的ssl加密传输协议，信息安全。用的443端口</p><h2 id="前端缓存" tabindex="-1">前端缓存 <a class="header-anchor" href="#前端缓存" aria-label="Permalink to &quot;前端缓存&quot;">​</a></h2><h3 id="http缓存" tabindex="-1">HTTP缓存 <a class="header-anchor" href="#http缓存" aria-label="Permalink to &quot;HTTP缓存&quot;">​</a></h3><p>在服务器代码上设置</p><ol><li>强缓存：使用Expires、Cache-Control（优先级高</li></ol><blockquote><p><strong>判断过程</strong>： 请求再次发起 -&gt; 浏览器根据 expires 和 cache-control 判断目标资源是否命中&quot;强缓存&quot; -&gt; 若命中，直接从缓存获取资源，不再与服务器发生通讯。</p></blockquote><ol><li>协商缓存：协商缓存主要有四个头字段，它们两两组合配合使用,当命中协商缓存的时候，服务器会返回HTTP状态码304，让客户端直接 从本地缓存里面读取文件。</li></ol><h3 id="浏览器缓存" tabindex="-1">浏览器缓存 <a class="header-anchor" href="#浏览器缓存" aria-label="Permalink to &quot;浏览器缓存&quot;">​</a></h3><blockquote><p>localStorage、sessionStorage、cookie</p></blockquote>',11),l=[s];function h(i,n,c,p,_,d){return e(),a("div",null,l)}const m=t(r,[["render",h]]);export{q as __pageData,m as default};
diff --git "a/assets/Interview_Brower_\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md.73c84072.lean.js" "b/assets/Interview_Brower_\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md.73c84072.lean.js"
new file mode 100644
index 00000000..78df3f6d
--- /dev/null
+++ "b/assets/Interview_Brower_\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.md.73c84072.lean.js"
@@ -0,0 +1 @@
+import{_ as t,o as e,c as a,Q as o}from"./chunks/framework.c53372a0.js";const q=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Brower/计算机网络.md","filePath":"Interview/Brower/计算机网络.md"}'),r={name:"Interview/Brower/计算机网络.md"},s=o("",11),l=[s];function h(i,n,c,p,_,d){return e(),a("div",null,l)}const m=t(r,[["render",h]]);export{q as __pageData,m as default};
diff --git "a/assets/Interview_CSS_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.b72bdb12.js" "b/assets/Interview_CSS_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.b72bdb12.js"
new file mode 100644
index 00000000..e7938679
--- /dev/null
+++ "b/assets/Interview_CSS_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.b72bdb12.js"
@@ -0,0 +1,155 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"CSS基础面试题","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/CSS/基础面试题.md","filePath":"Interview/CSS/基础面试题.md"}'),p={name:"Interview/CSS/基础面试题.md"},o=l(`<h1 id="css基础面试题" tabindex="-1">CSS基础面试题 <a class="header-anchor" href="#css基础面试题" aria-label="Permalink to &quot;CSS基础面试题&quot;">​</a></h1><h2 id="伪类与伪元素" tabindex="-1"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements" target="_blank" rel="noreferrer">伪类与伪元素</a> <a class="header-anchor" href="#伪类与伪元素" aria-label="Permalink to &quot;[伪类与伪元素](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">解释</p><p>都不需要添加额外的HTML元素的情况下为文档添加样式和效果。</p><p><strong>伪类</strong>：开头为单冒号<code>:</code>，伪类是选择器的一种，用于给元素某种状态（滑动、点击等）添加对应的样式，在原本元素上修改</p><p><strong>伪元素</strong>：开头为双冒号<code>::</code>，用于创建一些不在文档树中的又可以通过 CSS 控制样式的虚拟元素，向元素添加额外的内容或样式。</p></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302271122474.png" alt="image-20230227112239445"></p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302271122320.png" alt="image-20230227112221284"></p><div class="tip custom-block"><p class="custom-block-title"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child" target="_blank" rel="noreferrer"><code>:nth-child()</code></a> 与<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type" target="_blank" rel="noreferrer"><code>:nth-of-type()</code></a></p><p><code>:nth-child(n) </code>：匹配到第 n 个兄弟</p><p><code>:nth-of-type(n)</code>：匹配到同类型的第 n 个兄弟元素</p></div><h2 id="水平垂直居中" tabindex="-1">水平垂直居中 <a class="header-anchor" href="#水平垂直居中" aria-label="Permalink to &quot;水平垂直居中&quot;">​</a></h2><ol><li>行内元素：<code>text-align 与 line-height</code> 块级元素：</li><li>flex + margin:auto、grid + margin:auto</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* grid */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#C99076;">auto</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* grid */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">auto</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="2"><li>flex布局</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-items</span><span style="color:#666666;">:</span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-items</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="3"><li>grid布局</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-items</span><span style="color:#666666;">:</span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/* 网格内项目垂直居中 */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">/* 或 */</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">box</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">grid</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span><span style="color:#758575DD;">/* 容器内网格垂直居中 */</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-items</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/* 网格内项目垂直居中 */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">/* 或 */</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">box</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">grid</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span><span style="color:#A0ADA0;">/* 容器内网格垂直居中 */</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="4"><li>绝对定位 + transform</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">translate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">-50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">-50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">   </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">translate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">-50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">,</span><span style="color:#2F798A;">-50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">);</span><span style="color:#393A34;">   </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><ol start="5"><li>绝对定位 + margin</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">bottom</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#C99076;">auto</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">bottom</span><span style="color:#999999;">:</span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#A65E2B;">auto</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="盒模型的理解" tabindex="-1">盒模型的理解 <a class="header-anchor" href="#盒模型的理解" aria-label="Permalink to &quot;盒模型的理解&quot;">​</a></h2><p>当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准，把每个元素表示为一个矩形的盒子。</p><p>盒模型从内到外由 content(内容) + padding(内边距) + border(边框) + margin(外边距) 组成。</p><p>默认为W3C 标准盒模型 <code>content-box</code>，<code>box-sizing:content-box</code>: height = content 。</p><p>可以通过<code>box-sizing</code>改变其计算方式，通常改为怪异盒模型<code>box-sizing:border-box</code>: height = content + padding + border 。</p><p>这样能够更精确地控制元素的尺寸和定位，元素的宽度和高度可以直接指定为内容区域的尺寸，而无需考虑内边距和边框。</p><h2 id="bfc-及其应用" tabindex="-1"><em><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts" target="_blank" rel="noreferrer">BFC</a></em> 及其应用 <a class="header-anchor" href="#bfc-及其应用" aria-label="Permalink to &quot;*[BFC](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts)* 及其应用&quot;">​</a></h2><p>所谓 <em>BFC</em>（<strong>块格式化上下文</strong>），指的是一个独立的布局环境，<em>BFC</em> 内部的元素布局与外部互不影响。</p><ul><li>浮动元素(<code>float</code> 值不为 <code>none</code>)</li><li>块级元素的 overflow 属性不为 <code>visible,clip</code></li><li>绝对定位的元素 包含 <code>position: fixed</code> 或<code>position: absolute</code></li><li><code>display: inline-block</code>，<code>display: table-cell</code>，<code>flex，grid</code></li></ul><p><strong>应用</strong></p><ol><li>解决相邻元素外边距塌陷</li><li>清除浮动解决父元素高度塌陷</li></ol><h2 id="css-选择器" tabindex="-1">CSS 选择器 <a class="header-anchor" href="#css-选择器" aria-label="Permalink to &quot;CSS 选择器&quot;">​</a></h2><p><code>!important</code>权重最高</p><p><strong>权重</strong>：</p><p>1000：内联样式</p><p>100： id选择器</p><p>10：类、伪类、属性选择器</p><p>1：标签、伪元素选择器</p><p>0：子元素、后代、通配符、相邻选择器</p><p>多个可进行累加，相同属性后定义覆盖先定义。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-03-18-23-39-34.png" alt="2023-03-18-23-39-34"></p><h2 id="如何实现动画" tabindex="-1">如何实现动画 <a class="header-anchor" href="#如何实现动画" aria-label="Permalink to &quot;如何实现动画&quot;">​</a></h2><ol><li>用 CSS <code>@keyframes</code>关键帧</li><li>使用 JS 的 <code>setInterval</code> 或 <code>requestAnimationFrame</code>，手动控制元素的位置和样式来实现动画效果</li></ol><h2 id="实现渐变背景" tabindex="-1">实现渐变背景 <a class="header-anchor" href="#实现渐变背景" aria-label="Permalink to &quot;实现渐变背景&quot;">​</a></h2><ol><li><p>使用 CSS3 渐变，通过 <code>linear-gradient</code> 或 <code>radial-gradient</code> 属性来实现， <code>background: linear-gradient(to right, #ff00cc, #333399)</code></p></li><li><p>使用 SVG 渐变，通过定义一个 <code>&lt;linearGradient&gt;</code> 或 <code>&lt;radialGradient&gt;</code> 元素来实现</p></li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">svg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">linearGradient</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">gradient</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x1</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y1</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x2</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y2</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">stop</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">offset</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stop-color</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#f00</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">stop</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">offset</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stop-color</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#00f</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">linearGradient</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">rect</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">0</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">100%</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fill</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">url(#gradient)</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">svg</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">svg</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">linearGradient</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">gradient</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x1</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y1</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x2</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y2</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0%</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">stop</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">offset</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stop-color</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#f00</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">stop</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">offset</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stop-color</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#00f</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">linearGradient</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">rect</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">0</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">100%</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fill</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">url(#gradient)</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">svg</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="定位position" tabindex="-1">定位position <a class="header-anchor" href="#定位position" aria-label="Permalink to &quot;定位position&quot;">​</a></h2><p><strong>静态定位</strong><code>static</code>：默认值，此时 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 和 <code>z-index</code> 属性无效</p><p><strong>相对定位</strong><code>relative</code>：保留原来位置进行定位，定位时相对于原来位置进行定位</p><p><strong>绝对定位</strong><code>absolute</code>：元素会被移出正常文档流，并不为元素预留空间，相对于<em>最近的非 static 定位祖先元素</em>的偏移，直到 body</p><p><strong>固定定位</strong><code>fixed</code>：相对于浏览器视口进行定位，当元素祖先的 <code>transform</code>、<code>perspective</code>、<code>filter</code> 或 <code>backdrop-filter</code> 属性非 <code>none</code> 时，容器由视口改为该祖先。</p><p><strong>黏性定位</strong><code>sticky</code>：相对于<em>最近滚动祖先</em>定位，滚动到元素top小于设定值(top:20px;)则转为固定定位。（relative+fixed）</p><h2 id="隐藏元素的方式" tabindex="-1">隐藏元素的方式 <a class="header-anchor" href="#隐藏元素的方式" aria-label="Permalink to &quot;隐藏元素的方式&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302211729743.png" alt="image-20230221172950214"></p><h2 id="用css3实现饼图" tabindex="-1">用css3实现饼图 <a class="header-anchor" href="#用css3实现饼图" aria-label="Permalink to &quot;用css3实现饼图&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">pie</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">50</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 画饼图 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">conic-gradient</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">red</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">orange</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">6</span><span style="color:#CB7676;">deg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">yellow</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#CB7676;">deg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">45</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">green</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">45</span><span style="color:#CB7676;">deg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">110</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">blue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">110</span><span style="color:#CB7676;">deg</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">deg</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">purple</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">deg</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">pie</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">50</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 画饼图 */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">conic-gradient</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">red</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">orange</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">6</span><span style="color:#AB5959;">deg</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">yellow</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#AB5959;">deg</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">45</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">green</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">45</span><span style="color:#AB5959;">deg</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">110</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">blue</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">110</span><span style="color:#AB5959;">deg</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">deg</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">purple</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">deg</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="margin和padding适用场景" tabindex="-1">margin和padding适用场景 <a class="header-anchor" href="#margin和padding适用场景" aria-label="Permalink to &quot;margin和padding适用场景&quot;">​</a></h2><table><thead><tr><th>margin</th><th>Padding</th></tr></thead><tbody><tr><td>需要在边框<strong>外</strong>留白</td><td>需要在边框<strong>内</strong>留白</td></tr><tr><td>留白处<strong>不需要</strong>背景色时</td><td>留白处<strong>需要</strong>背景色时</td></tr><tr><td>上下相连的元素，会相互<strong>抵消</strong>15px+20px的margin，得到20px的空白</td><td>上下相连的元素，会<strong>累加</strong>15px+20px的padding，得到35px的空白</td></tr></tbody></table><p><strong>清除margin塌陷</strong> 兄弟相邻元素：overflow: hidden、flex 布局</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">container</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">1</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#758575DD;">&lt;!--&lt;div class=&quot;wrap&quot;&gt;  1.额外包一层并加上 overflow: hidden;--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">item</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">2</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#758575DD;">&lt;!--&lt;/div&gt;--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">container</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">1</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A0ADA0;">&lt;!--&lt;div class=&quot;wrap&quot;&gt;  1.额外包一层并加上 overflow: hidden;--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">item</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">2</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A0ADA0;">&lt;!--&lt;/div&gt;--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">container</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">ccc</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* 2.形成 BFC: display: flex; */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">wrap</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">#</span><span style="color:#C99076;">ccc</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">container</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">ccc</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* 2.形成 BFC: display: flex; */</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">wrap</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#999999;">#</span><span style="color:#A65E2B;">ccc</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>父子相邻 margin 重叠</p><p>（1）给父元素添加透明边框</p><p>（2）给父元素添加overflow: hidden;</p><p>（3）给父元素添加position: fixed;</p><p>（4）给父元素添加display: table/flex/grid;</p><p>（5）将子元素都margin改为父元素的padding</p><h2 id="可替换元素" tabindex="-1">可替换元素 <a class="header-anchor" href="#可替换元素" aria-label="Permalink to &quot;可替换元素&quot;">​</a></h2><p>在 HTML 中， 是指其内容不受文档流影响，而是由外部资源定义的元素。</p><p>这些元素的内容可以通过 CSS 样式或者 JavaScript 来修改，但是本身的标签和属性并不能直接控制其显示效果。</p><p>常见的可替换元素包括 img、input、textarea、select、video、audio</p><h2 id="canvas和svg区别" tabindex="-1">Canvas和SVG区别 <a class="header-anchor" href="#canvas和svg区别" aria-label="Permalink to &quot;Canvas和SVG区别&quot;">​</a></h2><p>Canvas和SVG都是用于创建图形的HTML5元素，但它们有着不同的工作原理和适用场景。</p><p>Canvas是一种基于位图的绘图技术，它使用JavaScript在HTML5画布中创建像素级别的图形，可以制作出非常复杂的动态效果。Canvas要求开发者掌握像素级别的操作，需要自己编写代码来实现各种绘图功能，因此相对较难掌握。</p><p>而SVG是基于矢量图形的绘图技术，它利用XML描述二维图形，并通过浏览器解析渲染出来。由于SVG是基于矢量图形的绘图技术，所以它具有无限放大和缩小不失真的优势。另外，SVG也具有更好的可访问性和SEO性能。</p><p>总的来说，如果需要制作交互式和复杂的图形应用程序，Canvas是更好的选择；而如果需要制作高质量的静态图形、图表或图标等，则SVG更适合。</p><div class="tip custom-block"><p class="custom-block-title">矢量图形</p><p>矢量图形是由数学方程描述的二维图形，通常使用直线、曲线、多边形和文本等基本几何形状来创建。相比于位图图像（如JPEG、PNG等），矢量图形不会失真或模糊，无论放大或缩小都保持清晰度，因为它们是基于数学公式创建的，并且可以被无限放大或缩小而不会失去精度。此外，矢量图形还可以编辑和修改，使得它们在设计、制作标志、海报、传单、名片、网站等方面的应用非常广泛。</p></div><h2 id="使用base64编码的图片具有以下优点" tabindex="-1">使用Base64编码的图片具有以下优点： <a class="header-anchor" href="#使用base64编码的图片具有以下优点" aria-label="Permalink to &quot;使用Base64编码的图片具有以下优点：&quot;">​</a></h2><ol><li><p>减少HTTP请求：将多个小图片合并为一个Base64编码字符串，可以减少浏览器与服务器之间的HTTP请求次数，提高页面加载速度。</p></li><li><p>更好的页面性能：由于Base64编码后的图片是直接嵌入在HTML或CSS中的，而不需要额外的文件下载，因此可以更快地加载页面，提高页面性能。</p></li><li><p>简单易用：使用Base64编码的图片无需考虑图片路径等问题，只需要将编码后的字符串嵌入到HTML或CSS代码中即可。</p></li><li><p>可减少服务器负载：由于使用Base64编码的图片无需额外的文件下载，减少了服务器的负载。这对于高流量网站来说非常重要。</p></li></ol><p><strong>缺点：</strong></p><ol><li><p>图片大小增大：由于Base64编码会将图片转换成文本形式，因此会使得图片的大小增加约1/3左右。</p></li><li><p>编码和解码需要计算资源：由于编码和解码都需要进行大量的计算，因此可能会影响页面加载速度。</p></li><li><p>不适合大型图片：对于较大的图片（尤其是超过几百KB的图片），使用Base64编码会导致HTML或CSS文件变得非常大，影响页面加载速度。</p></li></ol><h2 id="优化大量图片的加载方法-提高用户体验" tabindex="-1">优化大量图片的加载方法，提高用户体验： <a class="header-anchor" href="#优化大量图片的加载方法-提高用户体验" aria-label="Permalink to &quot;优化大量图片的加载方法，提高用户体验：&quot;">​</a></h2><ol><li><p>压缩图片：使用图片压缩工具，将图片大小进行压缩，可以减少图片文件的大小，从而加快加载速度。</p></li><li><p>使用图片CDN：将图片存储在专门的CDN（内容分发网络）服务器上，可以使得图片加载更快，同时也减轻了原始服务器的负载。</p></li><li><p>延迟加载：将页面上非关键图片设置为延迟加载，当用户滚动到页面的对应位置时再加载图片，可以减少初始加载时的负担，提高页面的加载速度和响应性。</p></li><li><p>使用矢量图形代替位图：对于一些简单的图标和装饰性元素，可以使用矢量图形代替位图。矢量图形在放大或缩小时不会失真，并且通常比位图更小。</p></li><li><p>利用浏览器缓存：将图片缓存在用户的浏览器中，可以减少重复加载同一张图片的次数，提高页面加载速度。</p></li><li><p>懒加载：懒加载可以避免在页面中加载不必要的图片，只有用户需要查看某张图片时才会被加载。这种方式可以大幅减少初始页面加载时间，提高用户体验。</p></li><li><p>合并多个小图片成一张大图：将多张小图片合并到一张大图中，通过CSS定位显示指定位置的小图片，可以减少请求次数，提高页面加载速度。</p></li></ol><h2 id="优雅降级和渐进增强" tabindex="-1">优雅降级和渐进增强 <a class="header-anchor" href="#优雅降级和渐进增强" aria-label="Permalink to &quot;优雅降级和渐进增强&quot;">​</a></h2><p>优雅降级：在编写项目时，直接针对最高级、最稳定的版本进行开发。然后在后续对低版本进行兼容。 渐进增强：在编写项目时，针对自己想个兼容的最低版本进行开发。然后在后续对高版本的新特性开发，或者更好的体验</p><h2 id="新项目css架构设计入手方向" tabindex="-1">新项目css架构设计入手方向 <a class="header-anchor" href="#新项目css架构设计入手方向" aria-label="Permalink to &quot;新项目css架构设计入手方向&quot;">​</a></h2><ol><li>公共变量（主题色/主要空隙/主要字号字体等）</li><li>编译器（scss/less/postcss/stylus）</li><li>自适应方案（栅格/rem/vw/pt）</li><li>目录约定（mixin/common/theme/module/response）</li><li>私有化方案（scoped/css module/css in js）</li></ol><h2 id="tailwindcss断点对应设备" tabindex="-1">Tailwindcss断点对应设备 <a class="header-anchor" href="#tailwindcss断点对应设备" aria-label="Permalink to &quot;Tailwindcss断点对应设备&quot;">​</a></h2><table><thead><tr><th>Breakpoint prefix</th><th>Minimum width</th><th>CSS</th><th>代表设备</th></tr></thead><tbody><tr><td>不写</td><td>-</td><td>-</td><td>手机</td></tr><tr><td><code>sm</code></td><td>640px</td><td><code>@media (min-width: 640px) { ... }</code></td><td>大屏手机</td></tr><tr><td><code>md</code></td><td>768px</td><td><code>@media (min-width: 768px) { ... }</code></td><td>768-1024代表 Ipad（Ipad Mini = 768）</td></tr><tr><td><code>lg</code></td><td>1024px</td><td><code>@media (min-width: 1024px) { ... }</code></td><td>iPad Pro</td></tr><tr><td><code>xl</code></td><td>1280px</td><td><code>@media (min-width: 1280px) { ... }</code></td><td>小型笔记本</td></tr><tr><td><code>2xl</code></td><td>1536px</td><td><code>@media (min-width: 1536px) { ... }</code></td><td>电脑显示器</td></tr></tbody></table>`,86),e=[o];function t(c,r,y,i,d,A){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{B as __pageData,C as default};
diff --git "a/assets/Interview_CSS_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.b72bdb12.lean.js" "b/assets/Interview_CSS_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.b72bdb12.lean.js"
new file mode 100644
index 00000000..e1cd185d
--- /dev/null
+++ "b/assets/Interview_CSS_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.b72bdb12.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"CSS基础面试题","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/CSS/基础面试题.md","filePath":"Interview/CSS/基础面试题.md"}'),p={name:"Interview/CSS/基础面试题.md"},o=l("",86),e=[o];function t(c,r,y,i,d,A){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{B as __pageData,C as default};
diff --git "a/assets/Interview_CSS_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.6b9b42f1.js" "b/assets/Interview_CSS_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.6b9b42f1.js"
new file mode 100644
index 00000000..2dff97f3
--- /dev/null
+++ "b/assets/Interview_CSS_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.6b9b42f1.js"
@@ -0,0 +1,141 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/CSS/进阶面试题.md","filePath":"Interview/CSS/进阶面试题.md"}'),p={name:"Interview/CSS/进阶面试题.md"},o=l(`<h2 id="实现一个元素的宽高比" tabindex="-1">实现一个元素的宽高比 <a class="header-anchor" href="#实现一个元素的宽高比" aria-label="Permalink to &quot;实现一个元素的宽高比&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">wrapper</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">padding-top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">56.25</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">/* 16:9 宽高比 */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">relative</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">content</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">position</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">absolute</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">top</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">left</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">bottom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">right</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">wrapper</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">padding-top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">56.25</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">/* 16:9 宽高比 */</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">relative</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">content</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">position</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">absolute</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">top</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">left</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">bottom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">right</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>维持正方形</strong>: 宽度发生改变时，利用伪元素撑开高度，从而保持正方形。</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">square</span><span style="color:#666666;">::</span><span style="color:#BD976A;">after</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">block</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding-bottom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">square</span><span style="color:#999999;">::</span><span style="color:#B07D48;">after</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">block</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding-bottom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="sass-中-mixin-与-extend的区别" tabindex="-1">Sass 中@mixin 与@extend的区别 <a class="header-anchor" href="#sass-中-mixin-与-extend的区别" aria-label="Permalink to &quot;Sass 中@mixin 与@extend的区别&quot;">​</a></h2><details class="details custom-block"><summary>主要区别在于代码生成的方式</summary><p>@mixin会直接将@mixin中的样式复制到@include处，而@extend则会生成一个新的选择器，并继承被@extend的选择器的样式。 因此，@mixin适用于将一组样式应用于多个选择器，而@extend适用于继承现有样式并生成新的选择器。</p></details><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#758575DD;">/* @extend：在现有样式加上加上新类名 */</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-style</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-primary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">extend</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">.</span><span style="color:#BD976A;">button-style</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-secondary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">extend</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">.</span><span style="color:#BD976A;">button-style</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">/* @mixin：把样式复制到指定类名 */</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">mixin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">button-style</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-primary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">include</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">button-style</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-secondary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">include</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">button-style</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">/* @extend：在现有样式加上加上新类名 */</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-style</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-primary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">extend</span><span style="color:#393A34;"> </span><span style="color:#999999;">.</span><span style="color:#B07D48;">button-style</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-secondary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">extend</span><span style="color:#393A34;"> </span><span style="color:#999999;">.</span><span style="color:#B07D48;">button-style</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">/* @mixin：把样式复制到指定类名 */</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">mixin</span><span style="color:#393A34;"> </span><span style="color:#59873A;">button-style</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-primary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">include</span><span style="color:#393A34;"> </span><span style="color:#59873A;">button-style</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-secondary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">include</span><span style="color:#393A34;"> </span><span style="color:#59873A;">button-style</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>转化结果：</strong></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">charset</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">UTF-8</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">/* @extend：在现有样式加上加上新类名 */</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-style</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">.</span><span style="color:#BD976A;">button-secondary</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">.</span><span style="color:#BD976A;">button-primary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">/* @mixin：把样式复制到指定类名 */</span></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-primary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">button-secondary</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">blue</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">white</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">charset</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">UTF-8</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">/* @extend：在现有样式加上加上新类名 */</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-style</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">.</span><span style="color:#B07D48;">button-secondary</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">.</span><span style="color:#B07D48;">button-primary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">/* @mixin：把样式复制到指定类名 */</span></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-primary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">button-secondary</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">blue</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">white</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,9),e=[o];function c(t,r,y,A,i,D){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{B as __pageData,d as default};
diff --git "a/assets/Interview_CSS_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.6b9b42f1.lean.js" "b/assets/Interview_CSS_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.6b9b42f1.lean.js"
new file mode 100644
index 00000000..233f08e6
--- /dev/null
+++ "b/assets/Interview_CSS_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.6b9b42f1.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/CSS/进阶面试题.md","filePath":"Interview/CSS/进阶面试题.md"}'),p={name:"Interview/CSS/进阶面试题.md"},o=l("",9),e=[o];function c(t,r,y,A,i,D){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{B as __pageData,d as default};
diff --git "a/assets/Interview_CSS_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.63a54546.js" "b/assets/Interview_CSS_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.63a54546.js"
new file mode 100644
index 00000000..b3c6c8be
--- /dev/null
+++ "b/assets/Interview_CSS_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.63a54546.js"
@@ -0,0 +1 @@
+import{_ as e,o as t,c as r}from"./chunks/framework.c53372a0.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/CSS/高级面试题.md","filePath":"Interview/CSS/高级面试题.md"}'),a={name:"Interview/CSS/高级面试题.md"};function n(o,s,_,c,i,p){return t(),r("div")}const f=e(a,[["render",n]]);export{m as __pageData,f as default};
diff --git "a/assets/Interview_CSS_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.63a54546.lean.js" "b/assets/Interview_CSS_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.63a54546.lean.js"
new file mode 100644
index 00000000..b3c6c8be
--- /dev/null
+++ "b/assets/Interview_CSS_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.63a54546.lean.js"
@@ -0,0 +1 @@
+import{_ as e,o as t,c as r}from"./chunks/framework.c53372a0.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/CSS/高级面试题.md","filePath":"Interview/CSS/高级面试题.md"}'),a={name:"Interview/CSS/高级面试题.md"};function n(o,s,_,c,i,p){return t(),r("div")}const f=e(a,[["render",n]]);export{m as __pageData,f as default};
diff --git "a/assets/Interview_JavaScript_Promise\347\233\270\345\205\263.md.1015a7af.js" "b/assets/Interview_JavaScript_Promise\347\233\270\345\205\263.md.1015a7af.js"
new file mode 100644
index 00000000..b598203f
--- /dev/null
+++ "b/assets/Interview_JavaScript_Promise\347\233\270\345\205\263.md.1015a7af.js"
@@ -0,0 +1,275 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/Promise相关.md","filePath":"Interview/JavaScript/Promise相关.md"}'),p={name:"Interview/JavaScript/Promise相关.md"},o=l(`<h2 id="前端如何做到并发请求" tabindex="-1">前端如何做到并发请求 <a class="header-anchor" href="#前端如何做到并发请求" aria-label="Permalink to &quot;前端如何做到并发请求&quot;">​</a></h2><ol><li>使用AJAX及其各种高级封装的异步技术，如jQuery的$.ajax()、axios等；</li><li>使用Promise(ES6)异步编程，如使用axios.all()或者Promise.all()多个请求并发发出；</li><li>使用Web Workers技术，将任务并发分发到多个Web Worker中执行；</li><li>使用WebSocket技术，可单个持久链接上进行多次请求；</li><li>使用Stream API技术，浏览器可以同时消费多个数据流，实现多个请求的并发；</li><li>使用定时器setInterval()及setTimeout()，可定时发出多个需要并发请求；</li></ol><h3 id="方法一-封装队列" tabindex="-1">方法一:封装队列 <a class="header-anchor" href="#方法一-封装队列" aria-label="Permalink to &quot;方法一:封装队列&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">taskQueue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">queue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">error</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">max</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">run</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">addTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">task</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">task</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">run</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">min</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">min</span><span style="color:#666666;">(</span><span style="color:#BD976A;">length</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">max</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">min</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">max</span><span style="color:#CB7676;">--</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//开始占用任务空间</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">task</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">shift</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">task</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[ res ]-131</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">result</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">error</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">finally</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">max</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//释放占用空间</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">run</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//测试</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">✅</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// delay % 3 ? resolve(&quot;✅&quot; + delay) : reject(&quot;❌&quot; + delay);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">task</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">taskQueue</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">100</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2600</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">400</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">300</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">600</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">900</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">700</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">times</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">task</span><span style="color:#666666;">.</span><span style="color:#80A665;">addTask</span><span style="color:#666666;">(</span><span style="color:#80A665;">createTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">taskQueue</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">queue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">error</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">max</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">run</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">addTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">task</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">task</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#59873A;">run</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">min</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">min</span><span style="color:#999999;">(</span><span style="color:#B07D48;">length</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">max</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">min</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">max</span><span style="color:#AB5959;">--</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//开始占用任务空间</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">task</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">shift</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">task</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[ res ]-131</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">result</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">error</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">finally</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">max</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//释放占用空间</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">run</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//测试</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">✅</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// delay % 3 ? resolve(&quot;✅&quot; + delay) : reject(&quot;❌&quot; + delay);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">task</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">taskQueue</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">100</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2600</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">400</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">300</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">600</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">900</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">700</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1000</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">times</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">task</span><span style="color:#999999;">.</span><span style="color:#59873A;">addTask</span><span style="color:#999999;">(</span><span style="color:#59873A;">createTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span></code></pre></div><h3 id="方法二-函数封装" tabindex="-1">方法二:函数封装 <a class="header-anchor" href="#方法二-函数封装" aria-label="Permalink to &quot;方法二:函数封装&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 并发请求函数</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">concurrencyRequest</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">maxNum</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">([]);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">results</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 下一个请求的下标</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">count</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 当前请求完成的数量</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// 发送请求</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">request</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 保存序号，使result和tasks相对应</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">index</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">try</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resp</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[ resp ]-29</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resp</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">results</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">resp</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">catch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">err</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">results</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">err</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">finally</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">count</span><span style="color:#CB7676;">++</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">// 判断是否所有的请求都已完成</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">count</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">完成了</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">results</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">request</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">min</span><span style="color:#666666;">(</span><span style="color:#BD976A;">maxNum</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">request</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//测试代码</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">✅</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// delay % 3 ? resolve(&quot;✅&quot; + delay) : reject(&quot;❌&quot; + delay);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">100</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2600</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">400</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">300</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">600</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">900</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">800</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">700</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">times</span><span style="color:#666666;">.</span><span style="color:#80A665;">map</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">createTask</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">));</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[ tasks ]-141</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">concurrencyRequest</span><span style="color:#666666;">(</span><span style="color:#BD976A;">tasks</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">).</span><span style="color:#80A665;">then</span><span style="color:#666666;">((</span><span style="color:#BD976A;">res</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">[ res ]-143</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 并发请求函数</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">concurrencyRequest</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">maxNum</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">([]);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">results</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 下一个请求的下标</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">count</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 当前请求完成的数量</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// 发送请求</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">request</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 保存序号，使result和tasks相对应</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">index</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">try</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resp</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]();</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[ resp ]-29</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resp</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">results</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">resp</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">catch</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">err</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">results</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">err</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">finally</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">count</span><span style="color:#AB5959;">++</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">// 判断是否所有的请求都已完成</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">count</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">完成了</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">results</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">request</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">min</span><span style="color:#999999;">(</span><span style="color:#B07D48;">maxNum</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">request</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//测试代码</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">✅</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// delay % 3 ? resolve(&quot;✅&quot; + delay) : reject(&quot;❌&quot; + delay);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">100</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2600</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">400</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">300</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">600</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">900</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">800</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">700</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1000</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">times</span><span style="color:#999999;">.</span><span style="color:#59873A;">map</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">createTask</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">));</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[ tasks ]-141</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">concurrencyRequest</span><span style="color:#999999;">(</span><span style="color:#B07D48;">tasks</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">).</span><span style="color:#59873A;">then</span><span style="color:#999999;">((</span><span style="color:#B07D48;">res</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">[ res ]-143</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span></code></pre></div><h2 id="web-worker" tabindex="-1">Web Worker <a class="header-anchor" href="#web-worker" aria-label="Permalink to &quot;Web Worker&quot;">​</a></h2><p>可以创建一个独立线程, 因为不会阻塞主线程运行,可以将比较耗费资源操作放在里面执行,比如耗时计算,可以通过 <code>postMessage</code> 进行线程间通信</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 主线程</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">worker</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Worker</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">worker.js</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">worker</span><span style="color:#666666;">.</span><span style="color:#80A665;">postMessage</span><span style="color:#666666;">([</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">24</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#BD976A;">worker</span><span style="color:#666666;">.</span><span style="color:#80A665;">onmessage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// Worker 线程</span></span>
+<span class="line"><span style="color:#80A665;">onmessage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">postMessage</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 主线程</span></span>
+<span class="line"><span style="color:#BD976A;">worker</span><span style="color:#666666;">.</span><span style="color:#80A665;">terminate</span><span style="color:#666666;">()</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 主线程</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">worker</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Worker</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">worker.js</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">worker</span><span style="color:#999999;">.</span><span style="color:#59873A;">postMessage</span><span style="color:#999999;">([</span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">24</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#B07D48;">worker</span><span style="color:#999999;">.</span><span style="color:#59873A;">onmessage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// Worker 线程</span></span>
+<span class="line"><span style="color:#59873A;">onmessage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">postMessage</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 主线程</span></span>
+<span class="line"><span style="color:#B07D48;">worker</span><span style="color:#999999;">.</span><span style="color:#59873A;">terminate</span><span style="color:#999999;">()</span></span></code></pre></div><p>在 Worker 线程中，self 和 this 都代表子线程的全局对象。对于监听 message 事件，以下的四种写法:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 写法 1</span></span>
+<span class="line"><span style="color:#BD976A;">self</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">message</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ...</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 写法 2</span></span>
+<span class="line"><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">message</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ...</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 写法 3</span></span>
+<span class="line"><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">message</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ...</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 写法 4</span></span>
+<span class="line"><span style="color:#80A665;">onmessage</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// ...</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 写法 1</span></span>
+<span class="line"><span style="color:#B07D48;">self</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">message</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ...</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 写法 2</span></span>
+<span class="line"><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">message</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ...</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 写法 3</span></span>
+<span class="line"><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">message</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ...</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 写法 4</span></span>
+<span class="line"><span style="color:#59873A;">onmessage</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// ...</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="service-worker" tabindex="-1">Service Worker <a class="header-anchor" href="#service-worker" aria-label="Permalink to &quot;Service Worker&quot;">​</a></h2><p>服务器与浏览器之间的中间人，如果网站中注册了<strong>Service Worker</strong>那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器,我们在<strong>Service Worker</strong> 中可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等先关操作，其中最重要且广泛的的作用就是离线资源缓存。</p><h2 id="特性" tabindex="-1">特性 <a class="header-anchor" href="#特性" aria-label="Permalink to &quot;特性&quot;">​</a></h2><ol><li>基于web worker（JavaScript主线程的独立线程，如果执行消耗大量资源的操作也不会堵塞主线程）</li><li>在web worker的基础上增加了离线缓存的能力</li><li>本质上充当Web应用程序（服务器）与浏览器之间的代理服务器</li><li>创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）</li><li>由事件驱动的,具有生命周期</li><li>可以访问cache和indexDB</li><li>支持消息推送</li><li>并且可以让开发者自己控制管理缓存的内容以及版本</li><li>可以通过 postMessage 接口把数据传递给其他JS 文件</li><li>更多无限可能</li></ol><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>不能访问 DOM、不能同步操作</p></div>`,16),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{i as __pageData,C as default};
diff --git "a/assets/Interview_JavaScript_Promise\347\233\270\345\205\263.md.1015a7af.lean.js" "b/assets/Interview_JavaScript_Promise\347\233\270\345\205\263.md.1015a7af.lean.js"
new file mode 100644
index 00000000..0f80eb9e
--- /dev/null
+++ "b/assets/Interview_JavaScript_Promise\347\233\270\345\205\263.md.1015a7af.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/Promise相关.md","filePath":"Interview/JavaScript/Promise相关.md"}'),p={name:"Interview/JavaScript/Promise相关.md"},o=l("",16),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{i as __pageData,C as default};
diff --git "a/assets/Interview_JavaScript_\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md.4ad216b5.js" "b/assets/Interview_JavaScript_\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md.4ad216b5.js"
new file mode 100644
index 00000000..a661a6c1
--- /dev/null
+++ "b/assets/Interview_JavaScript_\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md.4ad216b5.js"
@@ -0,0 +1,91 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/原型与原型链.md","filePath":"Interview/JavaScript/原型与原型链.md"}'),p={name:"Interview/JavaScript/原型与原型链.md"},o=l(`<h2 id="new-对象的执行过程" tabindex="-1">new 对象的执行过程 <a class="header-anchor" href="#new-对象的执行过程" aria-label="Permalink to &quot;new 对象的执行过程&quot;">​</a></h2><ol><li><p>创建一个新对象：new操作符会创建一个新对象，该对象会继承自构造函数的原型对象。</p></li><li><p>设置对象的原型：新对象的<code>__proto__</code>属性会被设置为构造函数的原型对象<code>prototype</code>。</p></li><li><p>执行构造函数：构造函数会被执行，<code>this</code> 指向新创建的对象。在构造函数内部，可以通过<code>this</code>关键字来添加属性和方法到新对象中。</p></li><li><p>对构造函数有返回值的处理判断：</p><ol><li>如果构造函数没有显式地返回对象，返回新创建的对象；(基本类型忽略)</li><li>如果构造函数返回了一个对象，则返回该对象。(引用类型返回)</li></ol></li></ol><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">age</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">person</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Person</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">Alice</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">person</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// { name: &#39;Alice&#39;, age: 18 }</span></span>
+<span class="line"><span style="color:#758575DD;">//new Person(&#39;Alice&#39;, 18)会创建一个新的对象，并执行Person函数，将this关键字指向新对象。最后返回新对象，赋值给变量person。</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">age</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">person</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Person</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">Alice</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">person</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// { name: &#39;Alice&#39;, age: 18 }</span></span>
+<span class="line"><span style="color:#A0ADA0;">//new Person(&#39;Alice&#39;, 18)会创建一个新的对象，并执行Person函数，将this关键字指向新对象。最后返回新对象，赋值给变量person。</span></span></code></pre></div><h2 id="原型和原型链" tabindex="-1">原型和原型链 <a class="header-anchor" href="#原型和原型链" aria-label="Permalink to &quot;原型和原型链&quot;">​</a></h2><p>作用：解决构造函数浪费内存问题，实现对象属性和方法的共享。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Star</span><span style="color:#666666;">(){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">star1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Star</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">star1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">__proto__</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">star1</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Star</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Start</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Object</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#B8A965;">__proto__</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Function</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">//Object顶级对象是 顶级构造器 Fcuntion 的实例</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Star</span><span style="color:#999999;">(){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">star1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Star</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">star1</span><span style="color:#999999;">.</span><span style="color:#998418;">__proto__</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">star1</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">Star</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#998418;">Start</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#998418;">Object</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#998418;">__proto__</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//null</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Function</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">//Object顶级对象是 顶级构造器 Fcuntion 的实例</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-14-31-08.png" alt="2023-03-03-14-31-08"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-14-55-44.png" alt="2023-03-03-14-55-44"><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-03-16-50-56.png" alt="2023-03-03-16-50-56"></p><h3 id="函数的隐式原型对象" tabindex="-1">函数的隐式原型对象 <a class="header-anchor" href="#函数的隐式原型对象" aria-label="Permalink to &quot;函数的隐式原型对象&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">test</span><span style="color:#666666;">(){}</span></span>
+<span class="line"><span style="color:#BD976A;">test</span><span style="color:#666666;">.</span><span style="color:#B8A965;">__proto__</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Function</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">//ture</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">test</span><span style="color:#999999;">(){}</span></span>
+<span class="line"><span style="color:#B07D48;">test</span><span style="color:#999999;">.</span><span style="color:#998418;">__proto__</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#998418;">Function</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">//ture</span></span></code></pre></div><p>本身 ---&gt; 构造函数.prototype(本身<code>.__proto__</code>) ---&gt; 构造函数原型对象的原型<code>.prototype.__proto__</code>...---&gt;Object.prototype ---&gt; null</p><h2 id="js继承有哪些方式" tabindex="-1">JS继承有哪些方式 <a class="header-anchor" href="#js继承有哪些方式" aria-label="Permalink to &quot;JS继承有哪些方式&quot;">​</a></h2><h3 id="方式一-es6" tabindex="-1">方式一：ES6 <a class="header-anchor" href="#方式一-es6" aria-label="Permalink to &quot;方式一：ES6&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">18</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">class</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">extends</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Parent</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">constructor</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">super</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">张三</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">o1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Child</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">o1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">o1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">o1</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">18</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">class</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Child</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">extends</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Parent</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">constructor</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">super</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">张三</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">o1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Child</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">o1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">o1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">o1</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">);</span></span></code></pre></div><h3 id="方式二-原型链继承" tabindex="-1">方式二：原型链继承 <a class="header-anchor" href="#方式二-原型链继承" aria-label="Permalink to &quot;方式二：原型链继承&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Parent</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Child</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">张三</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//子构造函数原型对象指向父构造函数实例</span></span>
+<span class="line"><span style="color:#B8A965;">Child</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Parent</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">o2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Child</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">o2</span><span style="color:#666666;">,</span><span style="color:#BD976A;">o2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#BD976A;">o2</span><span style="color:#666666;">.</span><span style="color:#BD976A;">age</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">);</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Parent</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Child</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">张三</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//子构造函数原型对象指向父构造函数实例</span></span>
+<span class="line"><span style="color:#998418;">Child</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Parent</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">o2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Child</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">o2</span><span style="color:#999999;">,</span><span style="color:#B07D48;">o2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#B07D48;">o2</span><span style="color:#999999;">.</span><span style="color:#B07D48;">age</span><span style="color:#393A34;"> </span><span style="color:#999999;">);</span></span></code></pre></div><h3 id="方式三-借用构造函数继承" tabindex="-1">方式三：借用构造函数继承 <a class="header-anchor" href="#方式三-借用构造函数继承" aria-label="Permalink to &quot;方式三：借用构造函数继承&quot;">​</a></h3><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#dbd7caee;">function Parent(){</span></span>
+<span class="line"><span style="color:#dbd7caee;">	this.age = 22;</span></span>
+<span class="line"><span style="color:#dbd7caee;">}</span></span>
+<span class="line"><span style="color:#dbd7caee;">function Child(){</span></span>
+<span class="line"><span style="color:#dbd7caee;">	this.name = &#39;张三&#39;</span></span>
+<span class="line"><span style="color:#dbd7caee;">	Parent.call(this);</span></span>
+<span class="line"><span style="color:#dbd7caee;">}</span></span>
+<span class="line"><span style="color:#dbd7caee;">let o3 = new Child();</span></span>
+<span class="line"><span style="color:#dbd7caee;">console.log( o3,o3.name,o3.age );</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393a34;">function Parent(){</span></span>
+<span class="line"><span style="color:#393a34;">	this.age = 22;</span></span>
+<span class="line"><span style="color:#393a34;">}</span></span>
+<span class="line"><span style="color:#393a34;">function Child(){</span></span>
+<span class="line"><span style="color:#393a34;">	this.name = &#39;张三&#39;</span></span>
+<span class="line"><span style="color:#393a34;">	Parent.call(this);</span></span>
+<span class="line"><span style="color:#393a34;">}</span></span>
+<span class="line"><span style="color:#393a34;">let o3 = new Child();</span></span>
+<span class="line"><span style="color:#393a34;">console.log( o3,o3.name,o3.age );</span></span></code></pre></div>`,17),e=[o];function t(c,r,y,i,A,D){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{E as __pageData,d as default};
diff --git "a/assets/Interview_JavaScript_\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md.4ad216b5.lean.js" "b/assets/Interview_JavaScript_\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md.4ad216b5.lean.js"
new file mode 100644
index 00000000..20374fc8
--- /dev/null
+++ "b/assets/Interview_JavaScript_\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.md.4ad216b5.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/原型与原型链.md","filePath":"Interview/JavaScript/原型与原型链.md"}'),p={name:"Interview/JavaScript/原型与原型链.md"},o=l("",17),e=[o];function t(c,r,y,i,A,D){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{E as __pageData,d as default};
diff --git "a/assets/Interview_JavaScript_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.0df982a7.js" "b/assets/Interview_JavaScript_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.0df982a7.js"
new file mode 100644
index 00000000..4f91413c
--- /dev/null
+++ "b/assets/Interview_JavaScript_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.0df982a7.js"
@@ -0,0 +1,377 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"常见基础面试题","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/基础面试题.md","filePath":"Interview/JavaScript/基础面试题.md"}'),p={name:"Interview/JavaScript/基础面试题.md"},o=l(`<h1 id="常见基础面试题" tabindex="-1">常见基础面试题 <a class="header-anchor" href="#常见基础面试题" aria-label="Permalink to &quot;常见基础面试题&quot;">​</a></h1><h2 id="数据类型" tabindex="-1">数据类型 <a class="header-anchor" href="#数据类型" aria-label="Permalink to &quot;数据类型&quot;">​</a></h2><p>原始类型：<code>number,string,boolean,null,undefined,bigint,symbol</code></p><p>引用类型：Object</p><ul><li>标准普通对象：<code>Object</code></li><li>标准准特殊对象：<code>Array,Date,Math,Error,RegExp</code></li><li>非标准特殊对象（包装类型）：<code>Number,String,Boolean</code></li><li>可执行对象：<code>Function</code></li></ul><div class="tip custom-block"><p class="custom-block-title">Symbol应用</p><ol><li>对象<strong>唯一值</strong>属性</li><li>唯一标识统一管理（pinia 中的 storeId）</li><li>iterator底层实现机制</li></ol></div><h3 id="类型检测方式" tabindex="-1">类型检测方式 <a class="header-anchor" href="#类型检测方式" aria-label="Permalink to &quot;类型检测方式&quot;">​</a></h3><ol><li>typeof：所有数据类型，在计算机底层都是按照‘64 位二进制’进行存储的， typeof是按照二进制值进行检测类型的<details class="details custom-block"><summary>详细转换机制</summary></details></li><li>若二进制前三位是‘0’,并且实现了 <code>call</code> 方法，则返回 <code>function</code>，没有实现则返回 <code>object</code></li><li>null是 64 个 ‘0’，<code>typeof null</code> ---&gt; &#39;object&#39;(局限性)</li><li>检测未被声明的变量，返回 <code>undefined</code> :::</li></ol><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">object</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">option</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">object</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">option</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><h2 id="数据类型转换" tabindex="-1">数据类型转换 <a class="header-anchor" href="#数据类型转换" aria-label="Permalink to &quot;数据类型转换&quot;">​</a></h2><h3 id="其他类型转为数字类型" tabindex="-1">其他类型转为数字类型 <a class="header-anchor" href="#其他类型转为数字类型" aria-label="Permalink to &quot;其他类型转为数字类型&quot;">​</a></h3><p>规则：</p><ol><li><p><strong>宇符串转换为数宇</strong>：空宇符串变为0，如果出现任何非有效数宇宇符，结果都是NaN</p></li><li><p><strong>把布尔转换为数宇</strong>：<code>true-&gt;1 ; false-&gt;0</code></p></li><li><p><code>null-&gt;0 ; undefined-&gt;NaN</code></p></li><li><p><strong>Symbol无法转换为数宇</strong>，会报错：<code>Uncaught TypeError</code></p></li><li><p><strong>BigInt转为数字</strong>，会去除“n”（超过安全数宇的，会按照科学计数法处理）</p></li><li><p><strong>把对象转换为数字</strong>：</p></li></ol><ul><li>先调用对線的 <code>Symbol.toPrimitive</code> 这个方法，如果不存在这个方法</li><li>再调用对泉的 <code>valueof</code> 获取原始值，如果获取的值不是原始值，比如数组</li><li>再调用对線的 <code>toString</code> 把其变为字符串</li><li>最后再把宇符串基于Number方法转换为数字</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">,</span><span style="color:#BD976A;">radix</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">parseFloat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">和</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">parseInt</span><span style="color:#666666;">(</span><span style="color:#CB7676;">undefined</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">NaN</span></span>
+<span class="line"><span style="color:#758575DD;">/*  规则：val 必须是字符串，不是则自动转为字符串；</span></span>
+<span class="line"><span style="color:#758575DD;">      然后再 从左往右 找符合 radix（进制）有效数字，一个没找到则返回 NaN，</span></span>
+<span class="line"><span style="color:#758575DD;">      遇到一个非有效数字字符，则停止查找，并 parseInt(之前符合的字符串)  parseInt(&#39;12px&#39;) -&gt; 12</span></span>
+<span class="line"><span style="color:#758575DD;">*/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">,</span><span style="color:#B07D48;">radix</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">parseFloat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">和</span><span style="color:#393A34;"> </span><span style="color:#59873A;">parseInt</span><span style="color:#999999;">(</span><span style="color:#AB5959;">undefined</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">NaN</span></span>
+<span class="line"><span style="color:#A0ADA0;">/*  规则：val 必须是字符串，不是则自动转为字符串；</span></span>
+<span class="line"><span style="color:#A0ADA0;">      然后再 从左往右 找符合 radix（进制）有效数字，一个没找到则返回 NaN，</span></span>
+<span class="line"><span style="color:#A0ADA0;">      遇到一个非有效数字字符，则停止查找，并 parseInt(之前符合的字符串)  parseInt(&#39;12px&#39;) -&gt; 12</span></span>
+<span class="line"><span style="color:#A0ADA0;">*/</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-04-22-31-38.png" alt="2023-03-04-22-31-38"></p><h3 id="其他类型转为字符串" tabindex="-1">其他类型转为字符串 <a class="header-anchor" href="#其他类型转为字符串" aria-label="Permalink to &quot;其他类型转为字符串&quot;">​</a></h3><p>隐式转换：<code>String(val)</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">10</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">n</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#CB7676;">++</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 10（数字）  ++a / a++ 一定是数字运算</span></span>
+<span class="line"><span style="color:#758575DD;">//+出现在左边，转换为数字    +&#39;10&#39;-&gt;10</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">10</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">n</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#AB5959;">++</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 10（数字）  ++a / a++ 一定是数字运算</span></span>
+<span class="line"><span style="color:#A0ADA0;">//+出现在左边，转换为数字    +&#39;10&#39;-&gt;10</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-04-22-57-17.png" alt="2023-03-04-22-57-17"></p><h3 id="其他类型转为布尔类型" tabindex="-1">其他类型转为布尔类型 <a class="header-anchor" href="#其他类型转为布尔类型" aria-label="Permalink to &quot;其他类型转为布尔类型&quot;">​</a></h3><p>除了falsy值： <code>0、-0、NaN、null、undefined、空串</code>，其余都是 <code>true</code></p><h2 id="相等与全等区别" tabindex="-1">相等与全等区别 <a class="header-anchor" href="#相等与全等区别" aria-label="Permalink to &quot;相等与全等区别&quot;">​</a></h2><blockquote><p>相等(==)：两边数据类型不同，会先进行类型转换，再进行比较</p></blockquote><ol><li><strong>对象与字符串</strong>：对象转字符串 <code>Symbol.toPrimitive -&gt; valueOf -&gt; toString</code>，再比较</li><li><code>null == undefined --&gt; true </code> ；null/undefined 与其他任何值都不相等</li><li><strong>对象与对象</strong>，比较的是内存地址是否相同</li><li><strong>NaN 与其他</strong>，NaN 不与任何值相等，<code>NaN == NaN --&gt; false</code></li><li><strong>除了以上情况</strong>，只要两边类型不一致，剩下的都是转为数字，再进行比较</li></ol><blockquote><p>全等(===)：两个操作数类型相同，值也需相同才返回 true</p></blockquote><p><strong>可用==的情况</strong>：使用时相当于 <code>obj.a === null || obj.a === undefined</code></p><ol><li>判断对象的属性是否存在 <code>obj.a == null</code></li><li>判断函数的参数是否存在 <code>arg == null</code></li></ol><details class="details custom-block"><summary>面试题</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//题1：</span></span>
+<span class="line"><span style="color:#666666;">[]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#CB7676;">!</span><span style="color:#666666;">[]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">-</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//题2：</span></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;">;</span></span>
+<span class="line"><span style="color:#80A665;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  console.log(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">OK</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#B8A965;">)</span></span>
+<span class="line"><span style="color:#B8A965;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//解法一：利用==会进行类型转换，对象转为数字会经历:</span></span>
+<span class="line"><span style="color:#758575DD;">//Symbol.toPrimitive -&gt; valueOf -&gt; toString</span></span>
+<span class="line"><span style="color:#B8A965;">var a = {</span></span>
+<span class="line"><span style="color:#B8A965;">  i</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#BD976A;">Symbol</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toPrimitive</span><span style="color:#666666;">](){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">++</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">i</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//解法二：重写 toString</span></span>
+<span class="line"><span style="color:#BD976A;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toString</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#666666;">.</span><span style="color:#BD976A;">shift</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//解法三： 数据劫持</span></span>
+<span class="line"><span style="color:#BD976A;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">defineProperty</span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">a</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">get</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">++</span><span style="color:#BD976A;">i</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//题1：</span></span>
+<span class="line"><span style="color:#999999;">[]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">   </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;">   </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#AB5959;">!</span><span style="color:#999999;">[]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">   </span><span style="color:#AB5959;">-</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//题2：</span></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;">;</span></span>
+<span class="line"><span style="color:#59873A;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">==</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  console.log(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">OK</span><span style="color:#B5695999;">&#39;</span><span style="color:#998418;">)</span></span>
+<span class="line"><span style="color:#998418;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//解法一：利用==会进行类型转换，对象转为数字会经历:</span></span>
+<span class="line"><span style="color:#A0ADA0;">//Symbol.toPrimitive -&gt; valueOf -&gt; toString</span></span>
+<span class="line"><span style="color:#998418;">var a = {</span></span>
+<span class="line"><span style="color:#998418;">  i</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#B07D48;">Symbol</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toPrimitive</span><span style="color:#999999;">](){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">++</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">i</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//解法二：重写 toString</span></span>
+<span class="line"><span style="color:#B07D48;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toString</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#999999;">.</span><span style="color:#B07D48;">shift</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//解法三： 数据劫持</span></span>
+<span class="line"><span style="color:#B07D48;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">defineProperty</span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">a</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">get</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">++</span><span style="color:#B07D48;">i</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div></details><h2 id="怎么解决精度问题" tabindex="-1">怎么解决精度问题 <a class="header-anchor" href="#怎么解决精度问题" aria-label="Permalink to &quot;怎么解决精度问题&quot;">​</a></h2><blockquote><p><strong>根本原因</strong>：所有数据类型在计算机底层都是以<em>64位</em>二进制存储的，可能出现无限循环，超过 64 位部分被丢弃</p></blockquote><ol><li>将数字转为整数【扩大系数法】</li><li>第三方库：Math.js, decimal.js, big.js</li></ol><h2 id="var-let-const-区别" tabindex="-1">var/let/const 区别 <a class="header-anchor" href="#var-let-const-区别" aria-label="Permalink to &quot;var/let/const 区别&quot;">​</a></h2><table><thead><tr><th></th><th>var</th><th>let</th><th>const</th></tr></thead><tbody><tr><td>变量提升</td><td>支持</td><td>不支持</td><td>不支持</td></tr><tr><td>块级作用域</td><td>没有</td><td>有</td><td>有</td></tr><tr><td>暂存性死区</td><td>没有</td><td>存在</td><td>存在</td></tr><tr><td>能否修改</td><td></td><td></td><td>变量的值不能修改</td></tr><tr><td>变量的值不能修改</td><td>允许</td><td>不允许</td><td>不允许</td></tr></tbody></table><blockquote><p>函数声明会覆盖其他的同名的变量声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。</p></blockquote><h3 id="const" tabindex="-1">const <a class="header-anchor" href="#const" aria-label="Permalink to &quot;const&quot;">​</a></h3><ol><li><p>声明必须初始化</p></li><li><p>只读常量，变量的值不能修改</p><ul><li><p>简单类型 ：值就保存在变量指向的那个内存地址，等同于常量。</p></li><li><p>引用类型：变量指向的内存地址，保存的只是一个指向实际数据的指针；</p><p>const 只能保证指针固定，不能控制指向的数据结构。</p></li></ul></li></ol><h3 id="暂存性死区" tabindex="-1">暂存性死区 <a class="header-anchor" href="#暂存性死区" aria-label="Permalink to &quot;暂存性死区&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">暂存性死区</p><p>暂存性死区：使用 <code>let / const </code> 定义该变量之前的区域，</p><p>不能在声明前访问，作用域内被声明，不受外部影响</p><p>基于 let/const 变量声明，在词法解析阶段就已经明确了未来上下文中必定会有相关变量声明;</p><p>如果在声明前使用，则报错 <code>Uncaught ReferenceError</code></p></div><h2 id="this指向" tabindex="-1">this指向 <a class="header-anchor" href="#this指向" aria-label="Permalink to &quot;this指向&quot;">​</a></h2><ol><li>全局作用域中或者普通函数中指向全局对象window</li><li>立即执行函数必定指向window</li><li>构造函数中指向对象实例</li><li>事件绑定指向事件源对象</li><li>方法中谁调用就指向谁</li><li>定时器回调为普通函数指向window，箭头函数指向声明时所在外部作用域</li><li>forEach等回调函数默认指向<code>window</code>，指定第二个参数存在则指向第二个参数</li><li>严格模式指向<code>window</code>的变为<code>undefined</code></li></ol><h2 id="防抖与节流" tabindex="-1">防抖与节流 <a class="header-anchor" href="#防抖与节流" aria-label="Permalink to &quot;防抖与节流&quot;">​</a></h2><p>防抖：频繁触发某个事件时，在设定的时间内再次触发，会重新清除上一次定时器，重新开启定时器开始计时。</p><p>节流：频繁触发某个事件时，保证设定的时间内只会执行一次，只有等执行完才会打开节流阀执行下一个事件。</p><h3 id="防抖" tabindex="-1">防抖 <a class="header-anchor" href="#防抖" aria-label="Permalink to &quot;防抖&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//实现原理：每次触发事件时，取消之前的定时器，重新计时</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">debounce</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#666666;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">clearTimeout</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//清除上一次</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//实现原理：每次触发事件时，取消之前的定时器，重新计时</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">debounce</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#999999;">){</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">clearTimeout</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//清除上一次</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><details class="details custom-block"><summary>防抖拓展写法</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">debounce</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#DBD7CAEE;">，</span><span style="color:#BD976A;">immediate</span><span style="color:#666666;">=</span><span style="color:#4D9375;">false</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//参数判断处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">func</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">function</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">TypeError</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">func is not a funciton</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//debounce(func,true)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">boolean</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">immediate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">undefined</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">isNaN</span><span style="color:#666666;">(</span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">500</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//若不是数字则默认 500</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">immediate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">boolean</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">immediate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//第一次自执行完，timer 已经有值，</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">now</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">immediate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">clearTimeout</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//清除上一次</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//结束边界触发</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">immediate</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//清除最后一个定时器</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">clearTimeout</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//若为立即执行，则第一次，开启边界触发</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">now</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">debounce</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#393A34;">，</span><span style="color:#B07D48;">immediate</span><span style="color:#999999;">=</span><span style="color:#1E754F;">false</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//参数判断处理</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">func</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">function</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">TypeError</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">func is not a funciton</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//debounce(func,true)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">boolean</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">immediate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">undefined</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">isNaN</span><span style="color:#999999;">(</span><span style="color:#B07D48;">delay</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">500</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//若不是数字则默认 500</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">immediate</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">boolean</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">immediate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//第一次自执行完，timer 已经有值，</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">now</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">immediate</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">clearTimeout</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//清除上一次</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//结束边界触发</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">immediate</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//清除最后一个定时器</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">clearTimeout</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//若为立即执行，则第一次，开启边界触发</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">now</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h3 id="节流" tabindex="-1">节流 <a class="header-anchor" href="#节流" aria-label="Permalink to &quot;节流&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//实现原理：每次触发事件时，判断当前是否存在等待执行的延时函数</span></span>
+<span class="line"><span style="color:#758575DD;">//方法一:定时器存在则什么都不做</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">throttle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">timer</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">timer</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//方法二:</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">throttle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">flag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//节流阀：开启状态</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">flag</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">flag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//已经在处理：关闭</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">flag</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//处理完：重新打开</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//实现三：当前时间-上次执行时间 &gt; 设定时间，才执行</span></span>
+<span class="line"><span style="color:#BD976A;">funtion</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">throttle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">func</span><span style="color:#666666;">,</span><span style="color:#BD976A;">delay</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">now</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Data</span><span style="color:#666666;">.</span><span style="color:#80A665;">now</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">now</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">delay</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#BD976A;">func</span><span style="color:#666666;">.</span><span style="color:#80A665;">apply</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">,</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   		 </span><span style="color:#BD976A;">start</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">now</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//实现原理：每次触发事件时，判断当前是否存在等待执行的延时函数</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法一:定时器存在则什么都不做</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">throttle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">timer</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">timer</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二:</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">throttle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">flag</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//节流阀：开启状态</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">flag</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">flag</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//已经在处理：关闭</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">flag</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//处理完：重新打开</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//实现三：当前时间-上次执行时间 &gt; 设定时间，才执行</span></span>
+<span class="line"><span style="color:#B07D48;">funtion</span><span style="color:#393A34;"> </span><span style="color:#59873A;">throttle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">func</span><span style="color:#999999;">,</span><span style="color:#B07D48;">delay</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">start</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">now</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Data</span><span style="color:#999999;">.</span><span style="color:#59873A;">now</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">now</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">start</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">delay</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#B07D48;">func</span><span style="color:#999999;">.</span><span style="color:#59873A;">apply</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">,</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">   		 </span><span style="color:#B07D48;">start</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">now</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">应用</p><p>​ 防抖：输入框搜索、编辑框实时保存，（手机息屏策略，王者荣耀回城操作）</p><p>​ 节流：滚动到底部加载更多、图标跟随鼠标（地铁发车时间，王者荣耀技能冷却）</p></div><h2 id="前端本地存储方式" tabindex="-1">前端本地存储方式 <a class="header-anchor" href="#前端本地存储方式" aria-label="Permalink to &quot;前端本地存储方式&quot;">​</a></h2><h4 id="区别" tabindex="-1">区别 <a class="header-anchor" href="#区别" aria-label="Permalink to &quot;区别&quot;">​</a></h4><table><thead><tr><th></th><th>存储大小</th><th>存储时间</th><th>同源策略</th><th>在同一浏览器的相同域名、不同端口号下</th></tr></thead><tbody><tr><td><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage" target="_blank" rel="noreferrer">localStorage</a></td><td>5M</td><td>键值对以字符串形式存储，数据长期保留，不主动删除一直存在</td><td>受限制</td><td>不可以共享</td></tr><tr><td><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage" target="_blank" rel="noreferrer">sessionStorage</a></td><td>5M</td><td>会话结束自动清除（浏览器窗口关闭时）</td><td>协议隔离</td><td>跳转的页面可以共享</td></tr><tr><td><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie" target="_blank" rel="noreferrer">cookie</a></td><td>4kb</td><td>设置到期时间，过期清除</td><td>受限制</td><td>可以共享</td></tr></tbody></table><h3 id="用法" tabindex="-1">用法 <a class="header-anchor" href="#用法" aria-label="Permalink to &quot;用法&quot;">​</a></h3><p><strong>localStorage</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">localStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">setItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">//添加数据</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">localStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">getItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//读取数据</span></span>
+<span class="line"><span style="color:#BD976A;">localStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">removeItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">         </span><span style="color:#758575DD;">//移除单个</span></span>
+<span class="line"><span style="color:#BD976A;">localStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">clear</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;">                   </span><span style="color:#758575DD;">//移除所有</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">localStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">setItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">//添加数据</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">localStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">getItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//读取数据</span></span>
+<span class="line"><span style="color:#B07D48;">localStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">removeItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">         </span><span style="color:#A0ADA0;">//移除单个</span></span>
+<span class="line"><span style="color:#B07D48;">localStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">clear</span><span style="color:#999999;">();</span><span style="color:#393A34;">                   </span><span style="color:#A0ADA0;">//移除所有</span></span></code></pre></div><p><strong>sessionStorage</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">sessionStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">setItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">value</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">// 保存数据到 sessionStorage</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sessionStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">getItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//获取数据</span></span>
+<span class="line"><span style="color:#BD976A;">sessionStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">removeItem</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">//删除</span></span>
+<span class="line"><span style="color:#BD976A;">sessionStorage</span><span style="color:#666666;">.</span><span style="color:#80A665;">clear</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;">                  </span><span style="color:#758575DD;">//删除所有</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">sessionStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">setItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">value</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">// 保存数据到 sessionStorage</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sessionStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">getItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//获取数据</span></span>
+<span class="line"><span style="color:#B07D48;">sessionStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">removeItem</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">//删除</span></span>
+<span class="line"><span style="color:#B07D48;">sessionStorage</span><span style="color:#999999;">.</span><span style="color:#59873A;">clear</span><span style="color:#999999;">();</span><span style="color:#393A34;">                  </span><span style="color:#A0ADA0;">//删除所有</span></span></code></pre></div><p><strong>cookie</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cookies</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cookie</span><span style="color:#DBD7CAEE;">           </span><span style="color:#758575DD;">//同源下获取所有cookie</span></span>
+<span class="line"><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cookie</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">key=value</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">           </span><span style="color:#758575DD;">//添加</span></span>
+<span class="line"><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">cookie</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">key=; expires=xxx</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> 	</span><span style="color:#758575DD;">//设定到期时间自动清除</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cookies</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cookie</span><span style="color:#393A34;">           </span><span style="color:#A0ADA0;">//同源下获取所有cookie</span></span>
+<span class="line"><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cookie</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">key=value</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">           </span><span style="color:#A0ADA0;">//添加</span></span>
+<span class="line"><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">cookie</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">key=; expires=xxx</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span><span style="color:#393A34;"> 	</span><span style="color:#A0ADA0;">//设定到期时间自动清除</span></span></code></pre></div><p><a href="https://zhuanlan.zhihu.com/p/95076534" target="_blank" rel="noreferrer"><strong>IndexedDB</strong></a></p><h2 id="generator" tabindex="-1">Generator <a class="header-anchor" href="#generator" aria-label="Permalink to &quot;Generator&quot;">​</a></h2><p>一是，<code>function</code>关键字与函数名之间有一个星号；</p><p>二是，函数体内部使用<code>yield</code>表达式，定义不同的内部状态。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">helloWorldGenerator</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">yield</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">hello</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//123</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">yield</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">world</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//undefined</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ending</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">hw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">helloWorldGenerator</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#BD976A;">hw</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">hw</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">123</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//a = 123</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> </span><span style="color:#59873A;">helloWorldGenerator</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">yield</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">hello</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//123</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">yield</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">world</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//undefined</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ending</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">hw</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">helloWorldGenerator</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#B07D48;">hw</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">hw</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">(</span><span style="color:#2F798A;">123</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//a = 123</span></span></code></pre></div><p><code>nex()</code>传参会赋值给上一次<code>yield</code>的的返回值</p><h3 id="异步流程同步化" tabindex="-1">异步流程同步化 <a class="header-anchor" href="#异步流程同步化" aria-label="Permalink to &quot;异步流程同步化&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#4D9375;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">test</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">yield</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">第一秒执行</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">res1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//第一秒执行</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">yield</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">第二秒执行</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">generatorRunner</span><span style="color:#666666;">(</span><span style="color:#BD976A;">fn</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">generator</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">step</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">generator</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//定义递归函数</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">loop</span><span style="color:#666666;">(</span><span style="color:#BD976A;">stepArg</span><span style="color:#666666;">,</span><span style="color:#BD976A;">generator</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//获取本次 yield 右侧的结果</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stepArg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">instanceof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#5DA994;">Promise</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//如果是 Promise 对象就在 then 函数的回调中获取本次程序结果</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//并且等待回调执行的时候进入下一次递归</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">value</span><span style="color:#666666;">.</span><span style="color:#80A665;">then</span><span style="color:#666666;">((</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promiseValue</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">stepArg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">done</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">loop</span><span style="color:#666666;">(</span><span style="color:#BD976A;">generator</span><span style="color:#666666;">.</span><span style="color:#80A665;">next</span><span style="color:#666666;">(</span><span style="color:#BD976A;">promiseValue</span><span style="color:#666666;">),</span><span style="color:#BD976A;">generator</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    }</span><span style="color:#BD976A;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">//判断程序没有执行完就将本次结果传入下一步进入下一次递归</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  		</span><span style="color:#80A665;">if</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">!stepArg.done</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">loop</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;">generator.next(stepArg.value</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;">generator)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> 	</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  }</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">loop</span><span style="color:#666666;">(</span><span style="color:#BD976A;">step</span><span style="color:#666666;">,</span><span style="color:#BD976A;">generator</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#1E754F;">*</span><span style="color:#393A34;"> </span><span style="color:#59873A;">test</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">yield</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">第一秒执行</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#2F798A;">1000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">res1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//第一秒执行</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">yield</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">第二秒执行</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#2F798A;">1000</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">generatorRunner</span><span style="color:#999999;">(</span><span style="color:#B07D48;">fn</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">generator</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">step</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">generator</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//定义递归函数</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">loop</span><span style="color:#999999;">(</span><span style="color:#B07D48;">stepArg</span><span style="color:#999999;">,</span><span style="color:#B07D48;">generator</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//获取本次 yield 右侧的结果</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stepArg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">instanceof</span><span style="color:#393A34;"> </span><span style="color:#2E8F82;">Promise</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//如果是 Promise 对象就在 then 函数的回调中获取本次程序结果</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//并且等待回调执行的时候进入下一次递归</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">value</span><span style="color:#999999;">.</span><span style="color:#59873A;">then</span><span style="color:#999999;">((</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promiseValue</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">stepArg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">done</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">loop</span><span style="color:#999999;">(</span><span style="color:#B07D48;">generator</span><span style="color:#999999;">.</span><span style="color:#59873A;">next</span><span style="color:#999999;">(</span><span style="color:#B07D48;">promiseValue</span><span style="color:#999999;">),</span><span style="color:#B07D48;">generator</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    }</span><span style="color:#B07D48;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">//判断程序没有执行完就将本次结果传入下一步进入下一次递归</span></span>
+<span class="line"><span style="color:#393A34;">  		</span><span style="color:#59873A;">if</span><span style="color:#999999;">(</span><span style="color:#393A34;">!stepArg.done</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#59873A;">loop</span><span style="color:#999999;">(</span><span style="color:#393A34;">generator.next(stepArg.value</span><span style="color:#999999;">),</span><span style="color:#393A34;">generator)</span></span>
+<span class="line"><span style="color:#393A34;"> 	</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  }</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">loop</span><span style="color:#999999;">(</span><span style="color:#B07D48;">step</span><span style="color:#999999;">,</span><span style="color:#B07D48;">generator</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><h2 id="requestanimationframe" tabindex="-1">requestAnimationFrame <a class="header-anchor" href="#requestanimationframe" aria-label="Permalink to &quot;requestAnimationFrame&quot;">​</a></h2><p>60HZ/1000ms = 16.67ms(显示屏每毫秒刷新频率)</p><p><strong>起因</strong>：setTimeout/setInterval是异步 API，设置的时间间隔没办法保证。</p><p><strong>解决</strong>：为了设置更精确动画时间间隔、达到平滑动画效果。用法类似 <code>setTimeout</code> API， 本质采用的是系统时间间隔，而不是 JS 执行时间间隔。</p><p>希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。</p><p><strong>用法</strong>： <img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/2023-03-02-15-53-32.png" alt="2023-03-02-15-53-32"></p><h2 id="浅拷贝和深拷贝" tabindex="-1">浅拷贝和深拷贝 <a class="header-anchor" href="#浅拷贝和深拷贝" aria-label="Permalink to &quot;浅拷贝和深拷贝&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">解释</p><p>浅拷贝：只拷贝一层，属性为对象时只复制值，不复制对象本身，指向同一对象 深拷贝：完全拷贝一份新的，新对象更改不会影响到旧对象</p></div><p>浅拷贝</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">({},</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//只拷贝对象自身的可枚举的属性</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//数组</span></span>
+<span class="line"><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#B8A965;">Array</span><span style="color:#666666;">.</span><span style="color:#B8A965;">prototype</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhan</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">age</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">23</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4C9A91;">123</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4C9A91;">456</span></span>
+<span class="line"><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newArr2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#758575DD;">//改变内部的引用类型两者都会有影响</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">({},</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//只拷贝对象自身的可枚举的属性</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//数组</span></span>
+<span class="line"><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#998418;">Array</span><span style="color:#999999;">.</span><span style="color:#998418;">prototype</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">()</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhan</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">age</span><span style="color:#999999;">:</span><span style="color:#2F798A;">23</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#2F798A;">123</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#2F798A;">456</span></span>
+<span class="line"><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newArr2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#A0ADA0;">//改变内部的引用类型两者都会有影响</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方式一：</span></span>
+<span class="line"><span style="color:#758575DD;">//会忽略undefined,function，RegExp,Date</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">parse</span><span style="color:#666666;">(</span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">stringify</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方式二：</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">typeof</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">object</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Date</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#B8A965;">constructor</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">RegExp</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">RegExp</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Array</span><span style="color:#666666;">.</span><span style="color:#80A665;">isArray</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">key</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">obj</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">.</span><span style="color:#80A665;">hasOwnProperty</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">deepClone</span><span style="color:#666666;">(</span><span style="color:#BD976A;">obj</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">newObj</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方式一：</span></span>
+<span class="line"><span style="color:#A0ADA0;">//会忽略undefined,function，RegExp,Date</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">parse</span><span style="color:#999999;">(</span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">stringify</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方式二：</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">typeof</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">object</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Date</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#998418;">constructor</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">RegExp</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">RegExp</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Array</span><span style="color:#999999;">.</span><span style="color:#59873A;">isArray</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">key</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">obj</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">.</span><span style="color:#59873A;">hasOwnProperty</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#59873A;">deepClone</span><span style="color:#999999;">(</span><span style="color:#B07D48;">obj</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">newObj</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="事件捕获和冒泡机制" tabindex="-1">事件捕获和冒泡机制 <a class="header-anchor" href="#事件捕获和冒泡机制" aria-label="Permalink to &quot;事件捕获和冒泡机制&quot;">​</a></h2><p><strong>事件传播过程</strong>：事件捕获 ---&gt; 目标阶段---&gt; 事件冒泡</p><p><strong>事件捕获</strong>：从根元素(html)向内传播，直到目标元素，途中会触发绑定事件捕获元素的回调。<code>element.addEventListener(event, function, true)</code>。</p><p><strong>事件冒泡</strong>：从目标元素向外传播，直到根元素，途中会触发绑定事件冒泡元素的回调。<code>onclick</code>、<code>addEventListener</code>默认绑定冒泡阶段。</p><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202303191147836.png" alt=""></p><p>阻止冒泡：<code>event.stopPropagation()</code></p><p>阻止默认行为：<code>event.preventDefault()</code>,例如：a标签跳转，表单按钮数据提交至服务器。</p><p>阻止同一节点其他后绑定事件执行：<code>event.stopImmediatePropagation()</code></p><h2 id="promise链式调用" tabindex="-1">Promise链式调用 <a class="header-anchor" href="#promise链式调用" aria-label="Permalink to &quot;Promise链式调用&quot;">​</a></h2><p>是指在一个Promise对象上多次调用then方法，每个then方法都可以接收上一个Promise对象的返回值，</p><p>并返回一个新的Promise对象，从而形成一个Promise链 ，从而实现多个异步操作的顺序执行和数据传递。</p><p>如果then方法中抛出了异常，那么后续的then方法会被跳过，直接执行catch方法。</p><p>如果then方法中返回了一个Promise对象，那么后续的then方法会等待该Promise对象的状态发生改变后再执行。</p><p>可以避免回调地狱，使得代码更加清晰易读。</p>`,93),e=[o];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Interview_JavaScript_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.0df982a7.lean.js" "b/assets/Interview_JavaScript_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.0df982a7.lean.js"
new file mode 100644
index 00000000..8dcd882c
--- /dev/null
+++ "b/assets/Interview_JavaScript_\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.md.0df982a7.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"常见基础面试题","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/基础面试题.md","filePath":"Interview/JavaScript/基础面试题.md"}'),p={name:"Interview/JavaScript/基础面试题.md"},o=l("",93),e=[o];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Interview_JavaScript_\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md.4808f793.js" "b/assets/Interview_JavaScript_\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md.4808f793.js"
new file mode 100644
index 00000000..4c885c35
--- /dev/null
+++ "b/assets/Interview_JavaScript_\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md.4808f793.js"
@@ -0,0 +1,33 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/字符串常用方法.md","filePath":"Interview/JavaScript/字符串常用方法.md"}'),o={name:"Interview/JavaScript/字符串常用方法.md"},p=l(`<h2 id="字符串常用方法" tabindex="-1">字符串常用方法 <a class="header-anchor" href="#字符串常用方法" aria-label="Permalink to &quot;字符串常用方法&quot;">​</a></h2><p>​ <strong>都不会影响原字符串：因为字符串是不可变的！</strong></p><ol><li><p>增删改：<code>replace,replaceAll</code></p></li><li><p>增：<code>repeat,concat,padStart,padEnd</code></p></li><li><p>删：<code>substr,substring,slice,trim,trimStart,trimEnd</code></p></li><li><p>改：<code>split,toLowerCase,toUpperCase,toLocaleLowerCase,</code></p><p>​ <code>toLocaleUpperCase,</code> <code>String.fromCharCode()</code></p></li><li><p>查：<code>valueOf,at,charAt,charCodeAt,indexOf,lastIndexOf,</code></p><p>​ <code>search,includes,match,startsWith,endsWith</code></p></li></ol><h3 id="charcodeat与fromcharcode" tabindex="-1">charCodeAt与fromCharCode <a class="header-anchor" href="#charcodeat与fromcharcode" aria-label="Permalink to &quot;charCodeAt与fromCharCode&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">ABC</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">.</span><span style="color:#80A665;">charCodeAt</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//67 返回指定索引位的 ASCII 码</span></span>
+<span class="line"><span style="color:#BD976A;">String</span><span style="color:#666666;">.</span><span style="color:#80A665;">fromCharCode</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">65</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">66</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">67</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//&#39;ABC&#39; 返回 ASCII 码对应的字符</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">ABC</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">.</span><span style="color:#59873A;">charCodeAt</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//67 返回指定索引位的 ASCII 码</span></span>
+<span class="line"><span style="color:#B07D48;">String</span><span style="color:#999999;">.</span><span style="color:#59873A;">fromCharCode</span><span style="color:#999999;">(</span><span style="color:#2F798A;">65</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">66</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">67</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//&#39;ABC&#39; 返回 ASCII 码对应的字符</span></span></code></pre></div><h3 id="slice-与-substring区别" tabindex="-1">slice 与 substring区别 <a class="header-anchor" href="#slice-与-substring区别" aria-label="Permalink to &quot;slice 与 substring区别&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">slice 与 substring</p><p><strong>slice</strong> 结束索引<strong>大于等于</strong> 0 时且小于起始索引时，返回空；结束索引大于0从前面计数，小于0从后面计数的原则。</p><p><strong>substring</strong> 中如果结束索<strong>大于</strong>起始索引，则会自动将其调换后截取，当参数小于0 时按0处理。</p></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">www.map.baidu.com</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.bai</span></span>
+<span class="line highlighted"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//&#39;&#39;</span></span>
+<span class="line highlighted"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//.map.baidu</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//&#39;&#39;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.baidu.com</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">www.map.baidu.com</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.bai</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">11</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.bai</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//www</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//www</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">y</span><span style="color:#666666;">.</span><span style="color:#80A665;">substring</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">));</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//map.baidu.com</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">www.map.baidu.com</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">11</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.bai</span></span>
+<span class="line highlighted"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">11</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//&#39;&#39;</span></span>
+<span class="line highlighted"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//.map.baidu</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//&#39;&#39;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.baidu.com</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">www.map.baidu.com</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">,</span><span style="color:#2F798A;">11</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.bai</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">11</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.bai</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//www</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//www</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">y</span><span style="color:#999999;">.</span><span style="color:#59873A;">substring</span><span style="color:#999999;">(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">));</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//map.baidu.com</span></span></code></pre></div><h3 id="valueof-与-tostring-的异同" tabindex="-1">valueOf 与 toString 的异同 <a class="header-anchor" href="#valueof-与-tostring-的异同" aria-label="Permalink to &quot;valueOf 与 toString 的异同&quot;">​</a></h3><p><strong>共同点</strong></p><p>都是对象的方法，用于将对象转换成可操作的基本类型值。</p><table><thead><tr><th></th><th>valueOf</th><th>toString</th></tr></thead><tbody><tr><td>返回值</td><td>原始值或对象本身</td><td>对象转换成可阅读的字符串</td></tr><tr><td>能否接受参数转换基数</td><td>不可以</td><td>可以，返回不同进制的字符串形式的数值</td></tr><tr><td>Date类型返回</td><td>现在到1970年1月1日的毫秒数</td><td>时间的字符串</td></tr></tbody></table><p><code>undefined</code> 和 <code>null </code> 都没有<code>toString() </code>和 <code>valueOf()</code> 方法</p><p><code>Object.prototype.toString.toString()</code> 能够很好的判断数据的类型及内置对象</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">Number</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">).</span><span style="color:#80A665;">toString</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//&#39;1010&#39;</span></span>
+<span class="line"><span style="color:#80A665;">Number</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">).</span><span style="color:#80A665;">valueOf</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;">		</span><span style="color:#758575DD;">//10</span></span>
+<span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">().</span><span style="color:#80A665;">toString</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;">		</span><span style="color:#758575DD;">//&#39;Thu Mar 02 2023 11:39:56 GMT+0800 (中国标准时间)&#39;</span></span>
+<span class="line"><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Date</span><span style="color:#666666;">().</span><span style="color:#80A665;">valueOf</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> 		</span><span style="color:#758575DD;">//1677728421211</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">Number</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">).</span><span style="color:#59873A;">toString</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//&#39;1010&#39;</span></span>
+<span class="line"><span style="color:#59873A;">Number</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">).</span><span style="color:#59873A;">valueOf</span><span style="color:#999999;">(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span><span style="color:#393A34;">		</span><span style="color:#A0ADA0;">//10</span></span>
+<span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">().</span><span style="color:#59873A;">toString</span><span style="color:#999999;">()</span><span style="color:#393A34;">		</span><span style="color:#A0ADA0;">//&#39;Thu Mar 02 2023 11:39:56 GMT+0800 (中国标准时间)&#39;</span></span>
+<span class="line"><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Date</span><span style="color:#999999;">().</span><span style="color:#59873A;">valueOf</span><span style="color:#999999;">()</span><span style="color:#393A34;"> 		</span><span style="color:#A0ADA0;">//1677728421211</span></span></code></pre></div>`,15),e=[p];function t(c,r,y,A,i,D){return a(),n("div",null,e)}const B=s(o,[["render",t]]);export{C as __pageData,B as default};
diff --git "a/assets/Interview_JavaScript_\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md.4808f793.lean.js" "b/assets/Interview_JavaScript_\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md.4808f793.lean.js"
new file mode 100644
index 00000000..3c71c69c
--- /dev/null
+++ "b/assets/Interview_JavaScript_\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.md.4808f793.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/字符串常用方法.md","filePath":"Interview/JavaScript/字符串常用方法.md"}'),o={name:"Interview/JavaScript/字符串常用方法.md"},p=l("",15),e=[p];function t(c,r,y,A,i,D){return a(),n("div",null,e)}const B=s(o,[["render",t]]);export{C as __pageData,B as default};
diff --git "a/assets/Interview_JavaScript_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.c89e986d.js" "b/assets/Interview_JavaScript_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.c89e986d.js"
new file mode 100644
index 00000000..aabd530a
--- /dev/null
+++ "b/assets/Interview_JavaScript_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.c89e986d.js"
@@ -0,0 +1,399 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"常见进阶面试题","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/进阶面试题.md","filePath":"Interview/JavaScript/进阶面试题.md"}'),p={name:"Interview/JavaScript/进阶面试题.md"},o=l(`<h1 id="常见进阶面试题" tabindex="-1">常见进阶面试题 <a class="header-anchor" href="#常见进阶面试题" aria-label="Permalink to &quot;常见进阶面试题&quot;">​</a></h1><h2 id="模块化" tabindex="-1">模块化 <a class="header-anchor" href="#模块化" aria-label="Permalink to &quot;模块化&quot;">​</a></h2><table><thead><tr><th>JS运行的环境</th><th>全局对象</th><th></th></tr></thead><tbody><tr><td>浏览器</td><td>window</td><td>直接支持ES6Module，但是不支持CommonJS</td></tr><tr><td>Node</td><td>global</td><td>支持CommonJS，但是不支持ES6Module</td></tr><tr><td>Webpack</td><td></td><td>Common JS&amp;ES6Module都支持，支持相互之间的“混用</td></tr><tr><td>Vite</td><td></td><td>基于ES6Module规范，实现模块之间的相互引用</td></tr></tbody></table><h2 id="闭包" tabindex="-1">闭包 <a class="header-anchor" href="#闭包" aria-label="Permalink to &quot;闭包&quot;">​</a></h2><p>闭包：作用域的一种特殊应用，内层函数作用域用到了外层函数作用域的变量。由于被内层函数引用，导致外层函数执行完变量不会被释放，就形成了闭包。</p><details class="details custom-block"><summary>闭包案例</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">func</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fn</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">func</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span><span style="color:#758575DD;">//10</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">func</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fn</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">func</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span><span style="color:#A0ADA0;">//10</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">set</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#BD976A;">val</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">data</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">val</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">get</span><span style="color:#DBD7CAEE;">:</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">handle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fn</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#BD976A;">handle</span><span style="color:#666666;">.</span><span style="color:#80A665;">set</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zhangsan</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#BD976A;">handle</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">set</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#B07D48;">val</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">data</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">val</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">get</span><span style="color:#393A34;">:</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">handle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fn</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#B07D48;">handle</span><span style="color:#999999;">.</span><span style="color:#59873A;">set</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zhangsan</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#B07D48;">handle</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">btns</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">querySelectorAll</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.btn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//5个按钮</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">btns</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;">	</span><span style="color:#758575DD;">//改用 let 形成闭包</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#BD976A;">btns</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">].</span><span style="color:#80A665;">onclick</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//输出结果都是 5</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//==&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">for</span><span style="color:#666666;">(</span><span style="color:#BD976A;">val</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&lt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">btns</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">btns</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">].</span><span style="color:#80A665;">onclick</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//输出结果: 01234</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}})(</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">btns</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">querySelectorAll</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.btn</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//5个按钮</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">btns</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span><span style="color:#393A34;">	</span><span style="color:#A0ADA0;">//改用 let 形成闭包</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#B07D48;">btns</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">].</span><span style="color:#59873A;">onclick</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//输出结果都是 5</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//==&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">for</span><span style="color:#999999;">(</span><span style="color:#B07D48;">val</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&lt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">btns</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">btns</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">].</span><span style="color:#59873A;">onclick</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//输出结果: 01234</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}})(</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div></details><h3 id="应用" tabindex="-1">应用 <a class="header-anchor" href="#应用" aria-label="Permalink to &quot;应用&quot;">​</a></h3><ol><li>函数柯里化</li><li>变量私有化</li></ol><h3 id="弊端" tabindex="-1">弊端 <a class="header-anchor" href="#弊端" aria-label="Permalink to &quot;弊端&quot;">​</a></h3><p>过度使用闭包会造成内存占用过多，容易造成内存泄漏，手动清空可解决问题。</p><h2 id="函数柯里化" tabindex="-1">函数柯里化 <a class="header-anchor" href="#函数柯里化" aria-label="Permalink to &quot;函数柯里化&quot;">​</a></h2><details class="details custom-block"><summary>数组求和</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#758575DD;">//方法一：</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">,</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//方法二：</span></span>
+<span class="line"><span style="color:#80A665;">eval</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span><span style="color:#2F798A;">4</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法一：</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">,</span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//方法二：</span></span>
+<span class="line"><span style="color:#59873A;">eval</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">+</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span></code></pre></div></details><details class="details custom-block"><summary>实现 add(1,2)(3)</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">params</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// params:[1,2]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">){</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//args:[3]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">args</span><span style="color:#666666;">).</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//简化</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">params</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">args</span><span style="color:#666666;">).</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">params</span><span style="color:#999999;">){</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// params:[1,2]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">){</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//args:[3]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">args</span><span style="color:#999999;">).</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//简化</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">params</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">args</span><span style="color:#999999;">).</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span></span></code></pre></div></details><details class="details custom-block"><summary>实现 add(1)(2)(3)</summary><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">a</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">b</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">c</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//简化</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">a</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">b</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//柯里化：curring 函数</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">curring</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span><span style="color:#758575DD;">//利用闭包存储实参</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(...</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">params</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">args</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">add</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//在对象转数字过程中，进行求和处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">add</span><span style="color:#666666;">[</span><span style="color:#BD976A;">Symbol</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toPrimitive</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">params</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">add</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">add</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">curring</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sum</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">5</span><span style="color:#666666;">)(</span><span style="color:#4C9A91;">6</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">alert</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sum</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//21</span></span>
+<span class="line"><span style="color:#BD976A;">console</span><span style="color:#666666;">.</span><span style="color:#80A665;">log</span><span style="color:#666666;">(</span><span style="color:#CB7676;">+</span><span style="color:#BD976A;">sum</span><span style="color:#666666;">)</span><span style="color:#758575DD;">//21</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">a</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">b</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">c</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//简化</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">a</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">b</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#393A34;"> </span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//柯里化：curring 函数</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">curring</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span><span style="color:#A0ADA0;">//利用闭包存储实参</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(...</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">params</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">args</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">add</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//在对象转数字过程中，进行求和处理</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">add</span><span style="color:#999999;">[</span><span style="color:#B07D48;">Symbol</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toPrimitive</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">params</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">add</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">add</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">curring</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sum</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">2</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">3</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">4</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">5</span><span style="color:#999999;">)(</span><span style="color:#2F798A;">6</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">alert</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sum</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//21</span></span>
+<span class="line"><span style="color:#B07D48;">console</span><span style="color:#999999;">.</span><span style="color:#59873A;">log</span><span style="color:#999999;">(</span><span style="color:#AB5959;">+</span><span style="color:#B07D48;">sum</span><span style="color:#999999;">)</span><span style="color:#A0ADA0;">//21</span></span></code></pre></div></details><h3 id="compose" tabindex="-1">compose <a class="header-anchor" href="#compose" aria-label="Permalink to &quot;compose&quot;">​</a></h3><blockquote><p>思想：利用闭包预先存储，供其夏季上下文后期使用，可解决函数嵌套导致的可读性差问题。</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">add1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mul3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">div2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span></span>
+<span class="line"><span style="color:#758575DD;">//不使用柯里化：div2(mul3(add1(10)))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">compose</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">funcs</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//考虑不传函数，返回operate传的实参</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">funcs</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">len</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">funcs</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">operate</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">funcs</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduceRight</span><span style="color:#666666;">((</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span><span style="color:#BD976A;">func</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">func</span><span style="color:#666666;">(</span><span style="color:#BD976A;">x</span><span style="color:#666666;">),</span><span style="color:#BD976A;">x</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//不传函数</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">operate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">compose</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#80A665;">operate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//10</span></span>
+<span class="line"><span style="color:#758575DD;">//传一个</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">operate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">compose</span><span style="color:#666666;">(</span><span style="color:#BD976A;">add1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">operate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//11</span></span>
+<span class="line"><span style="color:#758575DD;">// 传多个</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">operate</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">compose</span><span style="color:#666666;">(</span><span style="color:#BD976A;">div2</span><span style="color:#666666;">,</span><span style="color:#BD976A;">mul3</span><span style="color:#666666;">,</span><span style="color:#BD976A;">add1</span><span style="color:#666666;">,</span><span style="color:#BD976A;">add1</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">operate</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">10</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//18</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">add1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">mul3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">div2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span></span>
+<span class="line"><span style="color:#A0ADA0;">//不使用柯里化：div2(mul3(add1(10)))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">compose</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">funcs</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//考虑不传函数，返回operate传的实参</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">funcs</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">len</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">funcs</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">operate</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">funcs</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduceRight</span><span style="color:#999999;">((</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span><span style="color:#B07D48;">func</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">func</span><span style="color:#999999;">(</span><span style="color:#B07D48;">x</span><span style="color:#999999;">),</span><span style="color:#B07D48;">x</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//不传函数</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">operate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">compose</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#59873A;">operate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//10</span></span>
+<span class="line"><span style="color:#A0ADA0;">//传一个</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">operate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">compose</span><span style="color:#999999;">(</span><span style="color:#B07D48;">add1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">operate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//11</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 传多个</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">operate</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">compose</span><span style="color:#999999;">(</span><span style="color:#B07D48;">div2</span><span style="color:#999999;">,</span><span style="color:#B07D48;">mul3</span><span style="color:#999999;">,</span><span style="color:#B07D48;">add1</span><span style="color:#999999;">,</span><span style="color:#B07D48;">add1</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">operate</span><span style="color:#999999;">(</span><span style="color:#2F798A;">10</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//18</span></span></code></pre></div><h3 id="闭包惰性思想" tabindex="-1">闭包惰性思想 <a class="header-anchor" href="#闭包惰性思想" aria-label="Permalink to &quot;闭包惰性思想&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//加载判断样式兼容问题，没有更换刷新浏览器每次都需要做多余的判断</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#BD976A;">getComputedStyle</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getComputedStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">)[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getCurrentStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">)[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//优化后</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//第一次运行，根据兼容情况，重构 getCss</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#BD976A;">getComputedStyle</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">getCss</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getComputedStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">)[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">getCss</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getCurrentStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">)[</span><span style="color:#BD976A;">attr</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ele</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">attr</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">body</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">width</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#80A665;">getCss</span><span style="color:#666666;">(</span><span style="color:#BD976A;">body</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">padding</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//加载判断样式兼容问题，没有更换刷新浏览器每次都需要做多余的判断</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#B07D48;">getComputedStyle</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getComputedStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">)[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getCurrentStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">)[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//优化后</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//第一次运行，根据兼容情况，重构 getCss</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#B07D48;">getComputedStyle</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">getCss</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getComputedStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">)[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">getCss</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getCurrentStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">)[</span><span style="color:#B07D48;">attr</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ele</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">attr</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">body</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">width</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#59873A;">getCss</span><span style="color:#999999;">(</span><span style="color:#B07D48;">body</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">padding</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span></code></pre></div><h2 id="深度优先和广度优先" tabindex="-1">深度优先和广度优先 <a class="header-anchor" href="#深度优先和广度优先" aria-label="Permalink to &quot;深度优先和广度优先&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//数据</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tree</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">children</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1-1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点1-1</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">1-2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点1-2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">children</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点2</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">children</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2-1</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">节点2-1</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//数据</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tree</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;">  </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">children</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1-1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点1-1</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">1-2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点1-2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">children</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点2</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">children</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2-1</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">节点2-1</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}]</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span></code></pre></div><h3 id="深度优先遍历-dfs" tabindex="-1">深度优先遍历(DFS) <a class="header-anchor" href="#深度优先遍历-dfs" aria-label="Permalink to &quot;深度优先遍历(DFS)&quot;">​</a></h3><p>深度优先遍历（DFS）是一种递归或栈的思想来遍历所有节点的算法。在 JavaScript 中，可以使用递归或栈来实现 DFS。具体步骤如下：</p><ol><li>访问根节点</li><li>对根节点的所有子节点，依次执行以下操作： <ul><li>访问该子节点</li><li>对该子节点的所有子节点，依次执行以上两步操作</li></ul></li></ol><p>JavaScript 中 DFS 的时间复杂度为 O(n)，其中 n 是节点数。空间复杂度为 O(h)，其中 h 是树的高度。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//递归方式</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">dfs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">dfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//递归方式</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">dfs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;">	</span><span style="color:#59873A;">dfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//非递归方式</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">dfs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">shift</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">children</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">children</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stack</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//非递归方式</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#59873A;">dfs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">shift</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">children</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">children</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stack</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">// 用非递归方式实现二叉树深度优先遍历</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">dfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#80A665;">dfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#666666;">)))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">// 用非递归方式实现二叉树深度优先遍历</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">dfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#59873A;">dfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#999999;">)))</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="广度优先遍历-bfs" tabindex="-1">广度优先遍历(BFS) <a class="header-anchor" href="#广度优先遍历-bfs" aria-label="Permalink to &quot;广度优先遍历(BFS)&quot;">​</a></h3><p>广度优先遍历（BFS）是一种逐层扫描节点的算法。在 JavaScript 中，可以使用队列来实现 BFS。具体步骤如下：</p><ol><li>将根节点入队</li><li>当队列非空时，执行以下操作： <ul><li>将队头节点出队，并访问该节点</li><li>将该节点的所有子节点入队</li></ul></li></ol><p>JavaScript 中 BFS 的时间复杂度为 O(n)，其中 n 是节点数。空间复杂度为 O(w)，其中 w 是树的宽度。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">root</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">shift</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">?.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">child</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//简化后</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">root</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">node</span><span style="color:#666666;">,</span><span style="color:#BD976A;">queue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">root</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">while</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">shift</span><span style="color:#666666;">()){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">queue</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">root</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">shift</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">?.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">child</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//简化后</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">root</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">node</span><span style="color:#999999;">,</span><span style="color:#B07D48;">queue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">root</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">while</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">shift</span><span style="color:#999999;">()){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">queue</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">bfs</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">while</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">node</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#CB7676;">++</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(...</span><span style="color:#BD976A;">node</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">nodes</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">bfs</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">while</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">node</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#AB5959;">++</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(...</span><span style="color:#B07D48;">node</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">nodes</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h3 id="两者的区别" tabindex="-1">两者的区别 <a class="header-anchor" href="#两者的区别" aria-label="Permalink to &quot;两者的区别&quot;">​</a></h3><ul><li>广度优先遍历需要使用队列逐层扫描节点，而深度优先遍历需要使用递归或栈来遍历节点。</li><li>广度优先遍历的空间复杂度比深度优先遍历高，因为广度优先遍历需要使用队列来存储节点，而深度优先遍历只需要使用递归或栈。</li></ul><h3 id="广度优先遍历的应用" tabindex="-1">广度优先遍历的应用 <a class="header-anchor" href="#广度优先遍历的应用" aria-label="Permalink to &quot;广度优先遍历的应用&quot;">​</a></h3><p>广度优先遍历可以用于许多问题，例如：</p><ul><li><strong>查找最短路径</strong>：遍历距离起点最近的节点。</li><li><strong>查找连通块</strong>：可以找到由相邻节点组成的连通块。</li><li><strong>查找图的最小生成树</strong></li></ul><h3 id="深度优先遍历的应用" tabindex="-1">深度优先遍历的应用 <a class="header-anchor" href="#深度优先遍历的应用" aria-label="Permalink to &quot;深度优先遍历的应用&quot;">​</a></h3><ul><li><strong>查找连通块</strong>：可以找到由相邻节点组成的连通块。</li><li><strong>查找拓扑排序</strong>：可以找到图的拓扑排序，即节点的一个线性序列，使得对于每个有向边 (u,v)，都有 u 在序列中排在 v 的前面。</li><li><strong>查找强联通分量</strong>：通过深度优先遍历，可以找到图的强联通分量，即任意两点之间都存在一条路径的最大子图。</li></ul><p><a href="https://juejin.cn/post/6844904127735005198#heading-5" target="_blank" rel="noreferrer">图文详解深度优先，广度优先遍历</a></p><h2 id="loader和plugin区别" tabindex="-1">loader和plugin区别 <a class="header-anchor" href="#loader和plugin区别" aria-label="Permalink to &quot;loader和plugin区别&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">Loader</p><p>是用来处理单个模块的转换，将各种类型的文件（如 js、css、sass、less、图片等）转换为 Webpack 可以处理的模块；</p><p>执行顺序是从后往前依次执行，每个 Loader 都会对文件进行处理，直到最后一个 Loader 将文件转换为模块。</p></div><div class="warning custom-block"><p class="custom-block-title">Plugin</p><p>是扩展 Webpack 功能的函数，可以在构建过程中执行一系列的任务，遍历所有的 Plugin，并执行它们的 apply 方法。</p><p>例如生成 HTML 文件（HtmlWebpackPlugin）、压缩代码（UglifyJsPlugin）、提取公共代码等。</p><p>Plugin 在 Loader 执行完成之后执行，可以访问 Webpack 的内部环境，并对其进行修改和优化。</p></div><h2 id="前端模块化规范" tabindex="-1">前端模块化规范 <a class="header-anchor" href="#前端模块化规范" aria-label="Permalink to &quot;前端模块化规范&quot;">​</a></h2><p>前端模块化规范是为了解决前端代码复杂度、可维护性和可扩展性等问题而产生的。目前常用的前端模块化规范有CommonJS、AMD、CMD和ES6 Module等，它们之间的区别如下：</p><p><strong>CommonJS规范</strong>：主要用于服务器端的JavaScript编程，Node.js采用了该规范。采用同步加载模块的方式，即在需要使用某个模块时，通过require函数同步加载该模块，然后才能执行后续代码。</p><p><strong>ES6 Module</strong>：是ECMAScript 6标准中新增的模块化规范。 采用静态加载模块的方式，即在编译时就确定模块之间的依赖关系，然后再执行代码。</p><p>与其他模块化规范不同的是，ES6 Module不需要使用特定的函数或语法来定义和导入模块，而是使用import和export关键字来实现。</p>`,50),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/Interview_JavaScript_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.c89e986d.lean.js" "b/assets/Interview_JavaScript_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.c89e986d.lean.js"
new file mode 100644
index 00000000..24dec29a
--- /dev/null
+++ "b/assets/Interview_JavaScript_\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.md.c89e986d.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"常见进阶面试题","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/进阶面试题.md","filePath":"Interview/JavaScript/进阶面试题.md"}'),p={name:"Interview/JavaScript/进阶面试题.md"},o=l("",50),e=[o];function c(t,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{E as __pageData,C as default};
diff --git "a/assets/Interview_JavaScript_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.0abc2056.js" "b/assets/Interview_JavaScript_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.0abc2056.js"
new file mode 100644
index 00000000..e9931629
--- /dev/null
+++ "b/assets/Interview_JavaScript_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.0abc2056.js"
@@ -0,0 +1,99 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"常见高级面试题","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/高级面试题.md","filePath":"Interview/JavaScript/高级面试题.md"}'),p={name:"Interview/JavaScript/高级面试题.md"},o=l(`<h1 id="常见高级面试题" tabindex="-1">常见高级面试题 <a class="header-anchor" href="#常见高级面试题" aria-label="Permalink to &quot;常见高级面试题&quot;">​</a></h1><h2 id="怎么禁止下载图片-midjourney实现" tabindex="-1">怎么禁止下载图片（midjourney实现） <a class="header-anchor" href="#怎么禁止下载图片-midjourney实现" aria-label="Permalink to &quot;怎么禁止下载图片（midjourney实现）&quot;">​</a></h2><p><strong>方案一：禁止右键</strong></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">image.png</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">oncontextmenu</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#4D9375;">return</span><span style="color:#C98A7D;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">image.png</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">oncontextmenu</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#1E754F;">return</span><span style="color:#B56959;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">oncontextmenu</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#666666;">(</span><span style="color:#BD976A;">event</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">event</span><span style="color:#666666;">.</span><span style="color:#BD976A;">returnValue</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">oncontextmenu</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#999999;">(</span><span style="color:#B07D48;">event</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">event</span><span style="color:#999999;">.</span><span style="color:#B07D48;">returnValue</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p><strong>方案二：禁止拖拽</strong></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">image.png</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ondragstart</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#4D9375;">return</span><span style="color:#C98A7D;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">/&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">image.png</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ondragstart</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#1E754F;">return</span><span style="color:#B56959;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">;</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#999999;">/&gt;</span></span></code></pre></div><p><strong>方案三：使用遮罩层</strong></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">position: relative; display: inline-block;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">src</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">image.png</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">alt</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;</span></span>
+<span class="line"><span style="color:#C98A7D;">                background: url(image.png) no-repeat center center / contain; opacity: 0.7;</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">position: relative; display: inline-block;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">img</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">src</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">image.png</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">alt</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;</span></span>
+<span class="line"><span style="color:#B56959;">                background: url(image.png) no-repeat center center / contain; opacity: 0.7;</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p><strong>方案四:转换为 canvas</strong></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">imageToCanvas</span><span style="color:#666666;">(</span><span style="color:#BD976A;">url</span><span style="color:#666666;">: </span><span style="color:#5DA994;">string</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">canvas</span><span style="color:#666666;">: </span><span style="color:#5DA994;">HTMLCanvasElement</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">Promise</span><span style="color:#666666;">((</span><span style="color:#BD976A;">resolve</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">reject</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//新建Image对象，引入当前目录下的图片</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Image</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">src</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">url</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">c</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">canvas</span><span style="color:#666666;">.</span><span style="color:#80A665;">getContext</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">2d</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#CB7676;">!</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//图片初始化完成后调用</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">onload</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//将canvas的宽高设置为图像的宽高</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">canvas</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">canvas</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//canvas画图片</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">c</span><span style="color:#666666;">.</span><span style="color:#80A665;">drawImage</span><span style="color:#666666;">(</span><span style="color:#BD976A;">img</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">img</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">error</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">reject</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">imageToCanvas</span><span style="color:#999999;">(</span><span style="color:#B07D48;">url</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">string</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">canvas</span><span style="color:#999999;">: </span><span style="color:#2E8F82;">HTMLCanvasElement</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#998418;">Promise</span><span style="color:#999999;">((</span><span style="color:#B07D48;">resolve</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">reject</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//新建Image对象，引入当前目录下的图片</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Image</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">src</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">url</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">c</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">canvas</span><span style="color:#999999;">.</span><span style="color:#59873A;">getContext</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">2d</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#AB5959;">!</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//图片初始化完成后调用</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">onload</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//将canvas的宽高设置为图像的宽高</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">canvas</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">canvas</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//canvas画图片</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">c</span><span style="color:#999999;">.</span><span style="color:#59873A;">drawImage</span><span style="color:#999999;">(</span><span style="color:#B07D48;">img</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">img</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">error</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">reject</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">throwFn</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">throw</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Error</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Uncaught DOMException: Failed to execute &#39;toDataURL&#39; on &#39;HTMLCanvasElement&#39;: Tainted canvases may not be exported.</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$canvasRef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">useRef</span><span style="color:#666666;">&lt;</span><span style="color:#5DA994;">HTMLCanvasElement</span><span style="color:#666666;">&gt;(</span><span style="color:#CB7676;">null</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">useEffect</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">;(</span><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">imageToCanvas</span><span style="color:#666666;">(</span><span style="color:#BD976A;">props</span><span style="color:#666666;">.</span><span style="color:#BD976A;">url</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$canvasRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">current</span><span style="color:#CB7676;">!</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">$canvasRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">current</span><span style="color:#CB7676;">!</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toBlob</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">throwFn</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">$canvasRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">current</span><span style="color:#CB7676;">!</span><span style="color:#666666;">.</span><span style="color:#BD976A;">toDataURL</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">throwFn</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">})()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">canvas</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">={</span><span style="color:#BD976A;">$canvasRef</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">onTouchStart</span><span style="color:#666666;">={</span><span style="color:#BD976A;">preventDefaultListener</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">onContextMenu</span><span style="color:#666666;">={</span><span style="color:#BD976A;">preventDefaultListener</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#666666;">/&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#59873A;">throwFn</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">throw</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Error</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Uncaught DOMException: Failed to execute &#39;toDataURL&#39; on &#39;HTMLCanvasElement&#39;: Tainted canvases may not be exported.</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$canvasRef</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">useRef</span><span style="color:#999999;">&lt;</span><span style="color:#2E8F82;">HTMLCanvasElement</span><span style="color:#999999;">&gt;(</span><span style="color:#AB5959;">null</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">useEffect</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">;(</span><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">imageToCanvas</span><span style="color:#999999;">(</span><span style="color:#B07D48;">props</span><span style="color:#999999;">.</span><span style="color:#B07D48;">url</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$canvasRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">current</span><span style="color:#AB5959;">!</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">$canvasRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">current</span><span style="color:#AB5959;">!</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toBlob</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">throwFn</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">$canvasRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">current</span><span style="color:#AB5959;">!</span><span style="color:#999999;">.</span><span style="color:#B07D48;">toDataURL</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">throwFn</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">})()</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">[])</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">canvas</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">={</span><span style="color:#B07D48;">$canvasRef</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">onTouchStart</span><span style="color:#999999;">={</span><span style="color:#B07D48;">preventDefaultListener</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">onContextMenu</span><span style="color:#999999;">={</span><span style="color:#B07D48;">preventDefaultListener</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#999999;">/&gt;</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span></code></pre></div>`,12),e=[o];function t(c,r,y,D,A,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Interview_JavaScript_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.0abc2056.lean.js" "b/assets/Interview_JavaScript_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.0abc2056.lean.js"
new file mode 100644
index 00000000..0ab0dd76
--- /dev/null
+++ "b/assets/Interview_JavaScript_\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.md.0abc2056.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"常见高级面试题","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/JavaScript/高级面试题.md","filePath":"Interview/JavaScript/高级面试题.md"}'),p={name:"Interview/JavaScript/高级面试题.md"},o=l("",12),e=[o];function t(c,r,y,D,A,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Interview_Vue_Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md.2eeac150.js" "b/assets/Interview_Vue_Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md.2eeac150.js"
new file mode 100644
index 00000000..4c08d80f
--- /dev/null
+++ "b/assets/Interview_Vue_Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md.2eeac150.js"
@@ -0,0 +1 @@
+import{_ as a,o as r,c as o,k as e,a as t}from"./chunks/framework.c53372a0.js";const V=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/Vue响应式原理.md","filePath":"Interview/Vue/Vue响应式原理.md"}'),n={name:"Interview/Vue/Vue响应式原理.md"},s=e("h2",{id:"数组劫持原理",tabindex:"-1"},[t("数组劫持原理 "),e("a",{class:"header-anchor",href:"#数组劫持原理","aria-label":'Permalink to "数组劫持原理"'},"​")],-1),c=e("ol",null,[e("li",null,[t("使用 "),e("code",null,"Object.create(Array.prototype)"),t(" 备份原型上的方法")]),e("li",null,"利用 AOP 思想，对 7 个变异方法进行重写，重写函数：先调用原来对应方法，再对新增的每一项进行数据劫持"),e("li")],-1),l=[s,c];function i(_,d,u,p,h,m){return r(),o("div",null,l)}const v=a(n,[["render",i]]);export{V as __pageData,v as default};
diff --git "a/assets/Interview_Vue_Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md.2eeac150.lean.js" "b/assets/Interview_Vue_Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md.2eeac150.lean.js"
new file mode 100644
index 00000000..4c08d80f
--- /dev/null
+++ "b/assets/Interview_Vue_Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.md.2eeac150.lean.js"
@@ -0,0 +1 @@
+import{_ as a,o as r,c as o,k as e,a as t}from"./chunks/framework.c53372a0.js";const V=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/Vue响应式原理.md","filePath":"Interview/Vue/Vue响应式原理.md"}'),n={name:"Interview/Vue/Vue响应式原理.md"},s=e("h2",{id:"数组劫持原理",tabindex:"-1"},[t("数组劫持原理 "),e("a",{class:"header-anchor",href:"#数组劫持原理","aria-label":'Permalink to "数组劫持原理"'},"​")],-1),c=e("ol",null,[e("li",null,[t("使用 "),e("code",null,"Object.create(Array.prototype)"),t(" 备份原型上的方法")]),e("li",null,"利用 AOP 思想，对 7 个变异方法进行重写，重写函数：先调用原来对应方法，再对新增的每一项进行数据劫持"),e("li")],-1),l=[s,c];function i(_,d,u,p,h,m){return r(),o("div",null,l)}const v=a(n,[["render",i]]);export{V as __pageData,v as default};
diff --git "a/assets/Interview_Vue_Vue\345\237\272\347\241\200\347\257\207.md.d7fd744f.js" "b/assets/Interview_Vue_Vue\345\237\272\347\241\200\347\257\207.md.d7fd744f.js"
new file mode 100644
index 00000000..ec49a5ac
--- /dev/null
+++ "b/assets/Interview_Vue_Vue\345\237\272\347\241\200\347\257\207.md.d7fd744f.js"
@@ -0,0 +1 @@
+import{_ as e,o as t,c as a,Q as o}from"./chunks/framework.c53372a0.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/Vue基础篇.md","filePath":"Interview/Vue/Vue基础篇.md"}'),r={name:"Interview/Vue/Vue基础篇.md"},n=o('<h2 id="对mvvm的理解" tabindex="-1">对MVVM的理解 <a class="header-anchor" href="#对mvvm的理解" aria-label="Permalink to &quot;对MVVM的理解&quot;">​</a></h2><p>MVVM 由 MVC 模型演变而来，M(Model)代表数据模型，V(View)代表用户操作的界面，VM(ViewModel)代表业务逻辑层，</p><p>充当数据模型与视图界面的桥梁，可以把数据绑定到页面，页面操作触发数据更新，数据修改自动触发视图更新。</p><h2 id="mixins的原理" tabindex="-1">Mixins的原理 <a class="header-anchor" href="#mixins的原理" aria-label="Permalink to &quot;Mixins的原理&quot;">​</a></h2><p>Vue 的 mixins混入 可以抽离封装Vue 组件选项达到复用的效果。</p><p><strong>data、provide</strong>：后者的值将对前者的值进行扩展，相同属性名（非对象）则以后者的属性值为准，如果两者的值是对象，但值不相等，则继续进行合并，</p><p><strong>生命周期钩子函数</strong>：将后者的生命周期钩子函数拼接到前者的生命周期钩子函数，调用时依次执行；</p><p><strong>components、filters、directives</strong>：对前者的属性进行拷贝扩展，属性相同则后者覆盖前者；</p><p>**watch：**与生命周期钩子函数类似，将后者的 watch拼接到前者的 watch后面；</p><p><strong>props、methods、inject、computed</strong>：定义一个对象 ret，遍历前者的属性或方法，对 ret进行扩展，再遍历后者的属性或方法，后者将覆盖前者的属性或方法；</p><p><strong>默认策略</strong>：策略中没有定义的策略，后者有则返回后者，否则返回前者；</p>',11),s=[n];function i(p,c,_,d,V,m){return t(),a("div",null,s)}const u=e(r,[["render",i]]);export{l as __pageData,u as default};
diff --git "a/assets/Interview_Vue_Vue\345\237\272\347\241\200\347\257\207.md.d7fd744f.lean.js" "b/assets/Interview_Vue_Vue\345\237\272\347\241\200\347\257\207.md.d7fd744f.lean.js"
new file mode 100644
index 00000000..0bf24b22
--- /dev/null
+++ "b/assets/Interview_Vue_Vue\345\237\272\347\241\200\347\257\207.md.d7fd744f.lean.js"
@@ -0,0 +1 @@
+import{_ as e,o as t,c as a,Q as o}from"./chunks/framework.c53372a0.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/Vue基础篇.md","filePath":"Interview/Vue/Vue基础篇.md"}'),r={name:"Interview/Vue/Vue基础篇.md"},n=o("",11),s=[n];function i(p,c,_,d,V,m){return t(),a("div",null,s)}const u=e(r,[["render",i]]);export{l as __pageData,u as default};
diff --git "a/assets/Interview_Vue_Vue\345\243\260\346\230\216\345\221\250\346\234\237.md.4220f397.js" "b/assets/Interview_Vue_Vue\345\243\260\346\230\216\345\221\250\346\234\237.md.4220f397.js"
new file mode 100644
index 00000000..c1d4e15e
--- /dev/null
+++ "b/assets/Interview_Vue_Vue\345\243\260\346\230\216\345\221\250\346\234\237.md.4220f397.js"
@@ -0,0 +1,59 @@
+import{_ as s,o as a,c as n,Q as e}from"./chunks/framework.c53372a0.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/Vue声明周期.md","filePath":"Interview/Vue/Vue声明周期.md"}'),l={name:"Interview/Vue/Vue声明周期.md"},p=e(`<h2 id="vue声明周期" tabindex="-1">Vue声明周期 <a class="header-anchor" href="#vue声明周期" aria-label="Permalink to &quot;Vue声明周期&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//自带 8 个</span></span>
+<span class="line"><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#BD976A;">mounted</span></span>
+<span class="line"><span style="color:#BD976A;">beforeUpdate</span></span>
+<span class="line"><span style="color:#BD976A;">updated</span></span>
+<span class="line"><span style="color:#BD976A;">beforeDestory</span></span>
+<span class="line"><span style="color:#BD976A;">destoryed</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//自带 8 个</span></span>
+<span class="line"><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#B07D48;">mounted</span></span>
+<span class="line"><span style="color:#B07D48;">beforeUpdate</span></span>
+<span class="line"><span style="color:#B07D48;">updated</span></span>
+<span class="line"><span style="color:#B07D48;">beforeDestory</span></span>
+<span class="line"><span style="color:#B07D48;">destoryed</span></span></code></pre></div><h3 id="嵌套组件组件执行顺序" tabindex="-1">嵌套组件组件执行顺序 <a class="header-anchor" href="#嵌套组件组件执行顺序" aria-label="Permalink to &quot;嵌套组件组件执行顺序&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//父组件</span></span>
+<span class="line"><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//子组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">mounted</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//孙子组件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">mounted</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//父组件</span></span>
+<span class="line"><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//子组件</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">mounted</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//孙子组件</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">mounted</span></span></code></pre></div><h2 id="beforecreate-与-created-区别" tabindex="-1">beforeCreate 与 created 区别 <a class="header-anchor" href="#beforecreate-与-created-区别" aria-label="Permalink to &quot;beforeCreate 与 created 区别&quot;">​</a></h2><h2 id="created-与-mounted-区别" tabindex="-1">created 与 mounted 区别 <a class="header-anchor" href="#created-与-mounted-区别" aria-label="Permalink to &quot;created 与 mounted 区别&quot;">​</a></h2><blockquote><p>请求问题：当需要子组件的请求需要比父组件<strong>先</strong>完成时，可以把父组件请求卸载<code>mounted</code>中，子组件写在<code>created</code>中。</p></blockquote><h2 id="keep-alive内置缓存组件" tabindex="-1">keep-alive内置缓存组件 <a class="header-anchor" href="#keep-alive内置缓存组件" aria-label="Permalink to &quot;keep-alive内置缓存组件&quot;">​</a></h2><p>额外增加两个声明周期:activated, deactivated</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//第一次执行顺序</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">beforeCreate</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">created</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">beforeMount</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">mounted</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">activated</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//第二次：多次进入详情页，在activated钩子中，判断 id 相同则不需要发请求</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">activated</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//第一次执行顺序</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">beforeCreate</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">created</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">beforeMount</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">mounted</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">activated</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//第二次：多次进入详情页，在activated钩子中，判断 id 相同则不需要发请求</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">activated</span></span></code></pre></div><h2 id="虚拟-dom-vnode-和-dom" tabindex="-1">虚拟 DOM(VNode) 和 DOM <a class="header-anchor" href="#虚拟-dom-vnode-和-dom" aria-label="Permalink to &quot;虚拟 DOM(VNode) 和 DOM&quot;">​</a></h2><ol><li>VNode是一个纯 JavaScript 对象，用来描述真实 DOM 中的一个节点，属性比真实 dom 精简许多。</li></ol><p>虚拟 DOM 的优点包括：</p><p>性能优化：由于真实 DOM 操作非常耗费性能，而虚拟 DOM 可以在内存中进行操作，然后再一次性渲染到真实 DOM 上，从而减少了不必要的 DOM 操作，提高了性能。</p><p>跨平台：虚拟 DOM 可以轻松地支持多种平台，比如浏览器、移动端、服务器端等。</p><p>组件化开发：Vue 的组件是以 VNode 为基础的，通过对 VNode 的操作，可以方便地实现组件的开发。</p><h2 id="vue3-0性能提升" tabindex="-1">Vue3.0性能提升 <a class="header-anchor" href="#vue3-0性能提升" aria-label="Permalink to &quot;Vue3.0性能提升&quot;">​</a></h2><ol><li>响应式系统不需要深度遍历就可以对整个对象监听</li><li>在diff算法中增加了静态标记</li><li>源码体积减小，所有 API 都可以按需引入</li></ol>`,18),o=[p];function t(c,r,i,d,D,y){return a(),n("div",null,o)}const B=s(l,[["render",t]]);export{u as __pageData,B as default};
diff --git "a/assets/Interview_Vue_Vue\345\243\260\346\230\216\345\221\250\346\234\237.md.4220f397.lean.js" "b/assets/Interview_Vue_Vue\345\243\260\346\230\216\345\221\250\346\234\237.md.4220f397.lean.js"
new file mode 100644
index 00000000..0aa14ddc
--- /dev/null
+++ "b/assets/Interview_Vue_Vue\345\243\260\346\230\216\345\221\250\346\234\237.md.4220f397.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as e}from"./chunks/framework.c53372a0.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/Vue声明周期.md","filePath":"Interview/Vue/Vue声明周期.md"}'),l={name:"Interview/Vue/Vue声明周期.md"},p=e("",18),o=[p];function t(c,r,i,d,D,y){return a(),n("div",null,o)}const B=s(l,[["render",t]]);export{u as __pageData,B as default};
diff --git "a/assets/Interview_Vue_Vue\350\277\233\351\230\266\347\257\207.md.786b9622.js" "b/assets/Interview_Vue_Vue\350\277\233\351\230\266\347\257\207.md.786b9622.js"
new file mode 100644
index 00000000..07268db7
--- /dev/null
+++ "b/assets/Interview_Vue_Vue\350\277\233\351\230\266\347\257\207.md.786b9622.js"
@@ -0,0 +1 @@
+import{_ as e,o as t,c as r}from"./chunks/framework.c53372a0.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/Vue进阶篇.md","filePath":"Interview/Vue/Vue进阶篇.md"}'),a={name:"Interview/Vue/Vue进阶篇.md"};function n(o,s,c,_,i,p){return t(),r("div")}const m=e(a,[["render",n]]);export{d as __pageData,m as default};
diff --git "a/assets/Interview_Vue_Vue\350\277\233\351\230\266\347\257\207.md.786b9622.lean.js" "b/assets/Interview_Vue_Vue\350\277\233\351\230\266\347\257\207.md.786b9622.lean.js"
new file mode 100644
index 00000000..07268db7
--- /dev/null
+++ "b/assets/Interview_Vue_Vue\350\277\233\351\230\266\347\257\207.md.786b9622.lean.js"
@@ -0,0 +1 @@
+import{_ as e,o as t,c as r}from"./chunks/framework.c53372a0.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/Vue进阶篇.md","filePath":"Interview/Vue/Vue进阶篇.md"}'),a={name:"Interview/Vue/Vue进阶篇.md"};function n(o,s,c,_,i,p){return t(),r("div")}const m=e(a,[["render",n]]);export{d as __pageData,m as default};
diff --git "a/assets/Interview_Vue_npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md.9da37746.js" "b/assets/Interview_Vue_npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md.9da37746.js"
new file mode 100644
index 00000000..b20c8c8d
--- /dev/null
+++ "b/assets/Interview_Vue_npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md.9da37746.js"	
@@ -0,0 +1 @@
+import{_ as e,o,c as i,Q as c}from"./chunks/framework.c53372a0.js";const m=JSON.parse('{"title":"npm run xxx执行过程","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/npm run xxx执行过程.md","filePath":"Interview/Vue/npm run xxx执行过程.md"}'),n={name:"Interview/Vue/npm run xxx执行过程.md"},d=c('<h1 id="npm-run-xxx执行过程" tabindex="-1">npm run xxx执行过程 <a class="header-anchor" href="#npm-run-xxx执行过程" aria-label="Permalink to &quot;npm run xxx执行过程&quot;">​</a></h1><h2 id="vue-cli-项目" tabindex="-1">vue cli 项目 <a class="header-anchor" href="#vue-cli-项目" aria-label="Permalink to &quot;vue cli 项目&quot;">​</a></h2><ol><li><p>npm run 会先把 <code>node_modules/.bin</code> 加入到 <code>PATH</code> 环境变量</p></li><li><p>找到项目根目录 <code>package.json</code> 文件中 <code> scripts</code> 对应的脚本并执行对应命令</p></li><li><p>相当于执行 <code>vue-cli-service serve</code> ，并去找到<code>npm i (npm i @vue/cli-service)</code>所生成的软连接 <code>./bin/vue-cli-service</code></p></li><li><p>接着去执行软连接指向的 <code>node_modules/@vue/cli-service/bin/vue-cli-service.js</code> （package-lock.json记录了映射关系）</p><ol><li><code>vue-cli-service.js</code>主要解析和比对 node 版本，不匹配则报错</li><li>获取和解析命令行参数，启动服务执行命令</li></ol></li></ol><h2 id="vite项目" tabindex="-1">vite项目 <a class="header-anchor" href="#vite项目" aria-label="Permalink to &quot;vite项目&quot;">​</a></h2><ol><li>npm run 会先把 <code>node_modules/.bin</code> 加入到 <code>PATH</code> 环境变量</li><li>找到项目根目录 <code>package.json</code> 文件中 <code> scripts</code> 对应的脚本并执行对应命令</li><li>去找<code>.bin/vite</code> 软链接，进而找到 <code>node_modules/.pnpm/vite@4.1.1/node_modules/vite/bin/vite.js</code>执行</li></ol>',5),l=[d];function a(r,t,s,u,p,_){return o(),i("div",null,l)}const v=e(n,[["render",a]]);export{m as __pageData,v as default};
diff --git "a/assets/Interview_Vue_npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md.9da37746.lean.js" "b/assets/Interview_Vue_npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md.9da37746.lean.js"
new file mode 100644
index 00000000..af427d03
--- /dev/null
+++ "b/assets/Interview_Vue_npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.md.9da37746.lean.js"	
@@ -0,0 +1 @@
+import{_ as e,o,c as i,Q as c}from"./chunks/framework.c53372a0.js";const m=JSON.parse('{"title":"npm run xxx执行过程","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/npm run xxx执行过程.md","filePath":"Interview/Vue/npm run xxx执行过程.md"}'),n={name:"Interview/Vue/npm run xxx执行过程.md"},d=c("",5),l=[d];function a(r,t,s,u,p,_){return o(),i("div",null,l)}const v=e(n,[["render",a]]);export{m as __pageData,v as default};
diff --git "a/assets/Interview_Vue_\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md.3cd67a0e.js" "b/assets/Interview_Vue_\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md.3cd67a0e.js"
new file mode 100644
index 00000000..2f6c6079
--- /dev/null
+++ "b/assets/Interview_Vue_\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md.3cd67a0e.js"
@@ -0,0 +1,87 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"前端项目优化","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/前端项目优化.md","filePath":"Interview/Vue/前端项目优化.md"}'),p={name:"Interview/Vue/前端项目优化.md"},o=l(`<h1 id="前端项目优化" tabindex="-1">前端项目优化 <a class="header-anchor" href="#前端项目优化" aria-label="Permalink to &quot;前端项目优化&quot;">​</a></h1><h2 id="html" tabindex="-1">HTML <a class="header-anchor" href="#html" aria-label="Permalink to &quot;HTML&quot;">​</a></h2><h2 id="css" tabindex="-1">CSS <a class="header-anchor" href="#css" aria-label="Permalink to &quot;CSS&quot;">​</a></h2><h2 id="javascript" tabindex="-1">JavaScript <a class="header-anchor" href="#javascript" aria-label="Permalink to &quot;JavaScript&quot;">​</a></h2><h2 id="构建优化" tabindex="-1">构建优化 <a class="header-anchor" href="#构建优化" aria-label="Permalink to &quot;构建优化&quot;">​</a></h2><h3 id="移除console" tabindex="-1">移除console <a class="header-anchor" href="#移除console" aria-label="Permalink to &quot;移除console&quot;">​</a></h3><p><code>npm install babel-plugin-transform-remove-console --D</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//babel.config.js</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">proPlugins</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[];</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">process</span><span style="color:#666666;">.</span><span style="color:#BD976A;">env</span><span style="color:#666666;">.</span><span style="color:#BD976A;">NODE_ENV</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">production</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">proPlugins</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">transform-remove-console</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">plugins</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">...</span><span style="color:#BD976A;">proPlugins</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//babel.config.js</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">proPlugins</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[];</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">process</span><span style="color:#999999;">.</span><span style="color:#B07D48;">env</span><span style="color:#999999;">.</span><span style="color:#B07D48;">NODE_ENV</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">production</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">proPlugins</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">transform-remove-console</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">plugins</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">...</span><span style="color:#B07D48;">proPlugins</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div><h3 id="分包和共享依赖" tabindex="-1">分包和共享依赖 <a class="header-anchor" href="#分包和共享依赖" aria-label="Permalink to &quot;分包和共享依赖&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">configureWebpack</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">alias</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">src</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">optimization</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">runtimeChunk</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">single</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">splitChunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">chunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">all</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">maxInitialRequests</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">Infinity</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">minSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">20000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">cacheGroups</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">common</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">common</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">chunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">all</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">minSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//只要大于0字节就抽离</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">minChunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#80A665;">vendor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">test</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#E6CC77;">\\\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">]</span><span style="color:#C4704F;">node_modules</span><span style="color:#666666;">[</span><span style="color:#E6CC77;">\\\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">chunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">initial</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//从入口文件抽离</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">minSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//只要大于0字节就抽离</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">minChunks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//只要使用2次以上就抽离</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#80A665;">name</span><span style="color:#666666;">(</span><span style="color:#B8A965;">module</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">packageName</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#BD976A;">context</span><span style="color:#666666;">.</span><span style="color:#80A665;">match</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#E6CC77;">\\\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">]</span><span style="color:#C4704F;">node_modules</span><span style="color:#666666;">[</span><span style="color:#E6CC77;">\\\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">](</span><span style="color:#C99076;">.</span><span style="color:#CB7676;">*?</span><span style="color:#666666;">)([</span><span style="color:#E6CC77;">\\\\</span><span style="color:#C99076;">/</span><span style="color:#666666;">]</span><span style="color:#CB7676;">|</span><span style="color:#4D9375;">$</span><span style="color:#666666;">)</span><span style="color:#C98A7D99;">/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">npm.</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">packageName</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">configureWebpack</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">alias</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">src</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">optimization</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">runtimeChunk</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">single</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">splitChunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">chunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">all</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">maxInitialRequests</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">Infinity</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">minSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">20000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">cacheGroups</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">common</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">common</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">chunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">all</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">minSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//只要大于0字节就抽离</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">minChunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#59873A;">vendor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">test</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#BDA437;">\\\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">]</span><span style="color:#AB5E3F;">node_modules</span><span style="color:#999999;">[</span><span style="color:#BDA437;">\\\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">chunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">initial</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//从入口文件抽离</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">minSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//只要大于0字节就抽离</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">minChunks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//只要使用2次以上就抽离</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#59873A;">name</span><span style="color:#999999;">(</span><span style="color:#998418;">module</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">packageName</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#B07D48;">context</span><span style="color:#999999;">.</span><span style="color:#59873A;">match</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#BDA437;">\\\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">]</span><span style="color:#AB5E3F;">node_modules</span><span style="color:#999999;">[</span><span style="color:#BDA437;">\\\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">](</span><span style="color:#A65E2B;">.</span><span style="color:#AB5959;">*?</span><span style="color:#999999;">)([</span><span style="color:#BDA437;">\\\\</span><span style="color:#A65E2B;">/</span><span style="color:#999999;">]</span><span style="color:#AB5959;">|</span><span style="color:#1E754F;">$</span><span style="color:#999999;">)</span><span style="color:#B5695999;">/</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#999999;">)[</span><span style="color:#2F798A;">1</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">npm.</span><span style="color:#999999;">\${</span><span style="color:#B56959;">packageName</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span></code></pre></div>`,10),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{B as __pageData,C as default};
diff --git "a/assets/Interview_Vue_\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md.3cd67a0e.lean.js" "b/assets/Interview_Vue_\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md.3cd67a0e.lean.js"
new file mode 100644
index 00000000..c7948926
--- /dev/null
+++ "b/assets/Interview_Vue_\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.md.3cd67a0e.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"前端项目优化","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/前端项目优化.md","filePath":"Interview/Vue/前端项目优化.md"}'),p={name:"Interview/Vue/前端项目优化.md"},o=l("",10),e=[o];function c(t,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{B as __pageData,C as default};
diff --git "a/assets/Interview_Vue_\345\270\270\350\247\201Path\345\214\272\345\210\253.md.56f4fc59.js" "b/assets/Interview_Vue_\345\270\270\350\247\201Path\345\214\272\345\210\253.md.56f4fc59.js"
new file mode 100644
index 00000000..c9cb4bae
--- /dev/null
+++ "b/assets/Interview_Vue_\345\270\270\350\247\201Path\345\214\272\345\210\253.md.56f4fc59.js"
@@ -0,0 +1,35 @@
+import{_ as s,o as a,c as n,Q as p}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/常见Path区别.md","filePath":"Interview/Vue/常见Path区别.md"}'),l={name:"Interview/Vue/常见Path区别.md"},o=p(`<h2 id="vuerouter的-base" tabindex="-1">VueRouter的 base <a class="header-anchor" href="#vuerouter的-base" aria-label="Permalink to &quot;VueRouter的 base&quot;">​</a></h2><p>VueRouter的base属性是指应用的基路径，它会影响到所有使用了vue-router的路由路径，包括 routes 配置中的路径和 通过 $router.push() 或 $router.replace() 调用的路径。</p><p>在router对象中，base属性可以通过以下方式设置：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">VueRouter</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">base</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/my-app/</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">VueRouter</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">base</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/my-app/</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p>这个属性值的默认值为 &#39;/&#39;。如果你的应用被部署在一个子目录下，你就需要手动指定base属性的值。</p><p>例如，假设你的应用被部署在<code>http://example.com/my-app/</code>这个路径下，那么你就需要设置如下的base属性：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">router</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">VueRouter</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">base</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/my-app/</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">router</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">VueRouter</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">base</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/my-app/</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><p>这个设置是非常重要的，因为Vue Router 路由器的默认行为是从根路径(localhost:8080/) 开始的，</p><p>如果你需要从你的实际路径下查看（例如 localhost:8080/my-project/），就需要设置base属性了。</p><p>除了上述的情况之外，一般我们都不会配置base属性，这个属性的作用主要是为了适应应用被部署在服务器上的子目录下的情况。</p><h2 id="vue-config-js的-publicpath" tabindex="-1">vue.config.js的 publicPath <a class="header-anchor" href="#vue-config-js的-publicpath" aria-label="Permalink to &quot;vue.config.js的 publicPath&quot;">​</a></h2><p>在 Vue.js 中， publicPath 是用来指定应用程序部署的基础 URL。它作用于构建过程中的静态文件的路径，</p><p>同时也影响 Vue Router 中 router-link 组件的路径。一般来说，我们在开发环境和生产环境使用不同的 publicPath 值，来确保应用在不同环境下都能够正确访问静态文件。</p><p>以下是一些常见的 publicPath 配置：</p><ul><li>&quot;/&quot;：将生成的静态文件放在根目录下，这是默认值。</li><li>&quot;./&quot;：将生成的静态文件放在当前目录下。</li><li>&quot;../&quot;：将生成的静态文件放在上级目录下。</li></ul><p>在 vue.config.js 中，我们可以通过设置 publicPath 来配置应用的部署路径。例如，我们可以将 publicPath 设置为 &quot;/my-app/&quot;，</p><p>则构建出的静态文件实际上会被部署到类似于 <a href="http://example.com/my-app/" target="_blank" rel="noreferrer">http://example.com/my-app/</a> 这样的路径下。代码示例：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#B8A965;">module</span><span style="color:#666666;">.</span><span style="color:#B8A965;">exports</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">publicPath</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">process</span><span style="color:#666666;">.</span><span style="color:#BD976A;">env</span><span style="color:#666666;">.</span><span style="color:#BD976A;">NODE_ENV</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">production</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/my-app/</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#998418;">module</span><span style="color:#999999;">.</span><span style="color:#998418;">exports</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">publicPath</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">process</span><span style="color:#999999;">.</span><span style="color:#B07D48;">env</span><span style="color:#999999;">.</span><span style="color:#B07D48;">NODE_ENV</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">production</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/my-app/</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>通常可以在根目录配置环境变量，相对于不同环境打包时的打包命令</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//package.json</span></span>
+<span class="line"><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">scripts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">: </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">serve</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vue-cli-service serve --open --port 9999</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">build:server</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vue-cli-service build </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#B8A965;">build:local</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vue-cli-service build --mode buildlocal</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;">,</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//package.json</span></span>
+<span class="line"><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">scripts</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">: </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">serve</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vue-cli-service serve --open --port 9999</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">build:server</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vue-cli-service build </span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#998418;">build:local</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vue-cli-service build --mode buildlocal</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;">,</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//.env.production   --服务器打包预览环境变量</span></span>
+<span class="line"><span style="color:#BD976A;">OUTPUT_DIR</span><span style="color:#666666;">=</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">opt</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">nginx</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">www</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">html</span><span style="color:#CB7676;">/</span><span style="color:#BD976A;">music</span></span>
+<span class="line"><span style="color:#BD976A;">BASE_URL</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">music</span><span style="color:#C98A7D99;">/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//.env.production   --服务器打包预览环境变量</span></span>
+<span class="line"><span style="color:#B07D48;">OUTPUT_DIR</span><span style="color:#999999;">=</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">opt</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">nginx</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">www</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">html</span><span style="color:#AB5959;">/</span><span style="color:#B07D48;">music</span></span>
+<span class="line"><span style="color:#B07D48;">BASE_URL</span><span style="color:#999999;">=</span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">music</span><span style="color:#B5695999;">/</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//.env.buildlocal   --本地打包预览环境变量</span></span>
+<span class="line"><span style="color:#BD976A;">OUTPUT_DIR</span><span style="color:#666666;">=</span><span style="color:#BD976A;">dist</span></span>
+<span class="line"><span style="color:#BD976A;">BASE_URL</span><span style="color:#666666;">=</span><span style="color:#CB7676;">/</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//.env.buildlocal   --本地打包预览环境变量</span></span>
+<span class="line"><span style="color:#B07D48;">OUTPUT_DIR</span><span style="color:#999999;">=</span><span style="color:#B07D48;">dist</span></span>
+<span class="line"><span style="color:#B07D48;">BASE_URL</span><span style="color:#999999;">=</span><span style="color:#AB5959;">/</span></span></code></pre></div>`,22),e=[o];function t(c,r,y,i,A,u){return a(),n("div",null,e)}const d=s(l,[["render",t]]);export{B as __pageData,d as default};
diff --git "a/assets/Interview_Vue_\345\270\270\350\247\201Path\345\214\272\345\210\253.md.56f4fc59.lean.js" "b/assets/Interview_Vue_\345\270\270\350\247\201Path\345\214\272\345\210\253.md.56f4fc59.lean.js"
new file mode 100644
index 00000000..4927c4e8
--- /dev/null
+++ "b/assets/Interview_Vue_\345\270\270\350\247\201Path\345\214\272\345\210\253.md.56f4fc59.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as p}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/常见Path区别.md","filePath":"Interview/Vue/常见Path区别.md"}'),l={name:"Interview/Vue/常见Path区别.md"},o=p("",22),e=[o];function t(c,r,y,i,A,u){return a(),n("div",null,e)}const d=s(l,[["render",t]]);export{B as __pageData,d as default};
diff --git "a/assets/Interview_Vue_\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md.3d2ea0a9.js" "b/assets/Interview_Vue_\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md.3d2ea0a9.js"
new file mode 100644
index 00000000..6ab1051d
--- /dev/null
+++ "b/assets/Interview_Vue_\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md.3d2ea0a9.js"
@@ -0,0 +1,97 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/自定义指令.md","filePath":"Interview/Vue/自定义指令.md"}'),p={name:"Interview/Vue/自定义指令.md"},o=l(`<h2 id="一键复制" tabindex="-1">一键复制 <a class="header-anchor" href="#一键复制" aria-label="Permalink to &quot;一键复制&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//方案一：</span></span>
+<span class="line"><span style="color:#BD976A;">Vue</span><span style="color:#666666;">.</span><span style="color:#80A665;">directive</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">copy</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">bind</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">click</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">range</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">createRange</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">range</span><span style="color:#666666;">.</span><span style="color:#80A665;">selectNode</span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getSelection</span><span style="color:#666666;">().</span><span style="color:#80A665;">addRange</span><span style="color:#666666;">(</span><span style="color:#BD976A;">range</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">execCommand</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">copy</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">getSelection</span><span style="color:#666666;">().</span><span style="color:#80A665;">removeAllRanges</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//方案二：</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Notification</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">element-ui</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">COPY</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">bind</span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">handler</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">Notification</span><span style="color:#666666;">.</span><span style="color:#80A665;">success</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">无复制内容</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">textarea</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">createElement</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">textarea</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">readOnly</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">readonly</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">position</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">absolute</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">left</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">-9999px</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#80A665;">appendChild</span><span style="color:#666666;">(</span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">.</span><span style="color:#80A665;">select</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">result</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">execCommand</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">Copy</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">result</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">Notification</span><span style="color:#666666;">.</span><span style="color:#80A665;">success</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">title</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">复制成功</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">body</span><span style="color:#666666;">.</span><span style="color:#80A665;">removeChild</span><span style="color:#666666;">(</span><span style="color:#BD976A;">textarea</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">click</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">handler</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">componentUpdated</span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">})</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">unbind</span><span style="color:#666666;">(</span><span style="color:#BD976A;">el</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#80A665;">removeEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">click</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">el</span><span style="color:#666666;">.</span><span style="color:#BD976A;">handler</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">};</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//方案一：</span></span>
+<span class="line"><span style="color:#B07D48;">Vue</span><span style="color:#999999;">.</span><span style="color:#59873A;">directive</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">copy</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">bind</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">click</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">range</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">createRange</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">range</span><span style="color:#999999;">.</span><span style="color:#59873A;">selectNode</span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getSelection</span><span style="color:#999999;">().</span><span style="color:#59873A;">addRange</span><span style="color:#999999;">(</span><span style="color:#B07D48;">range</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">execCommand</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">copy</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">getSelection</span><span style="color:#999999;">().</span><span style="color:#59873A;">removeAllRanges</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//方案二：</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Notification</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">element-ui</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">COPY</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">bind</span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">handler</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">Notification</span><span style="color:#999999;">.</span><span style="color:#59873A;">success</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">无复制内容</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">textarea</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">createElement</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">textarea</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">readOnly</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">readonly</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">position</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">absolute</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">left</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">-9999px</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#59873A;">appendChild</span><span style="color:#999999;">(</span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">.</span><span style="color:#59873A;">select</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">result</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">execCommand</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">Copy</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">result</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">Notification</span><span style="color:#999999;">.</span><span style="color:#59873A;">success</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">title</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">复制成功</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">body</span><span style="color:#999999;">.</span><span style="color:#59873A;">removeChild</span><span style="color:#999999;">(</span><span style="color:#B07D48;">textarea</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">click</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">handler</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">componentUpdated</span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">})</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">unbind</span><span style="color:#999999;">(</span><span style="color:#B07D48;">el</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#59873A;">removeEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">click</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">el</span><span style="color:#999999;">.</span><span style="color:#B07D48;">handler</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">};</span></span></code></pre></div>`,2),e=[o];function t(c,r,y,D,A,B){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{i as __pageData,C as default};
diff --git "a/assets/Interview_Vue_\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md.3d2ea0a9.lean.js" "b/assets/Interview_Vue_\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md.3d2ea0a9.lean.js"
new file mode 100644
index 00000000..a8c84859
--- /dev/null
+++ "b/assets/Interview_Vue_\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md.3d2ea0a9.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/Vue/自定义指令.md","filePath":"Interview/Vue/自定义指令.md"}'),p={name:"Interview/Vue/自定义指令.md"},o=l("",2),e=[o];function t(c,r,y,D,A,B){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{i as __pageData,C as default};
diff --git a/assets/Interview_index.md.ff0a75dc.js b/assets/Interview_index.md.ff0a75dc.js
new file mode 100644
index 00000000..d8262afb
--- /dev/null
+++ b/assets/Interview_index.md.ff0a75dc.js
@@ -0,0 +1 @@
+import{_ as t,o as a,c as s,k as e,a as o}from"./chunks/framework.c53372a0.js";const u=JSON.parse('{"title":"面试","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/index.md","filePath":"Interview/index.md"}'),n={name:"Interview/index.md"},c=e("h1",{id:"面试",tabindex:"-1"},[o("面试 "),e("a",{class:"header-anchor",href:"#面试","aria-label":'Permalink to "面试"'},"​")],-1),r=e("div",{class:"tip custom-block"},[e("p",{class:"custom-block-title"},"TIP"),e("p",null,"面试题总结与归纳!")],-1),i=[c,r];function d(l,_,p,m,h,f){return a(),s("div",null,i)}const k=t(n,[["render",d]]);export{u as __pageData,k as default};
diff --git a/assets/Interview_index.md.ff0a75dc.lean.js b/assets/Interview_index.md.ff0a75dc.lean.js
new file mode 100644
index 00000000..d8262afb
--- /dev/null
+++ b/assets/Interview_index.md.ff0a75dc.lean.js
@@ -0,0 +1 @@
+import{_ as t,o as a,c as s,k as e,a as o}from"./chunks/framework.c53372a0.js";const u=JSON.parse('{"title":"面试","description":"","frontmatter":{},"headers":[],"relativePath":"Interview/index.md","filePath":"Interview/index.md"}'),n={name:"Interview/index.md"},c=e("h1",{id:"面试",tabindex:"-1"},[o("面试 "),e("a",{class:"header-anchor",href:"#面试","aria-label":'Permalink to "面试"'},"​")],-1),r=e("div",{class:"tip custom-block"},[e("p",{class:"custom-block-title"},"TIP"),e("p",null,"面试题总结与归纳!")],-1),i=[c,r];function d(l,_,p,m,h,f){return a(),s("div",null,i)}const k=t(n,[["render",d]]);export{u as __pageData,k as default};
diff --git "a/assets/Problem_Graphical_Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md.3d28f150.js" "b/assets/Problem_Graphical_Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md.3d28f150.js"
new file mode 100644
index 00000000..6fa3792e
--- /dev/null
+++ "b/assets/Problem_Graphical_Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md.3d28f150.js"
@@ -0,0 +1,1181 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"网络拓扑图代码","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/Graphical/Antv代码片段集锦.md","filePath":"Problem/Graphical/Antv代码片段集锦.md"}'),p={name:"Problem/Graphical/Antv代码片段集锦.md"},o=l(`<h1 id="网络拓扑图代码" tabindex="-1">网络拓扑图代码 <a class="header-anchor" href="#网络拓扑图代码" aria-label="Permalink to &quot;网络拓扑图代码&quot;">​</a></h1><h2 id="图实例化" tabindex="-1">图实例化 <a class="header-anchor" href="#图实例化" aria-label="Permalink to &quot;图实例化&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">commonRegister</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">viewRegister</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">./registerElements.js</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//1.初始化实例</span></span>
+<span class="line"><span style="color:#BD976A;">initChart</span><span style="color:#DBD7CAEE;">() </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">halfWidth</span><span style="color:#DBD7CAEE;"> = </span><span style="color:#BD976A;">this</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> / 2;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">halfHeight</span><span style="color:#DBD7CAEE;"> = </span><span style="color:#BD976A;">this</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> / 2;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">if</span><span style="color:#DBD7CAEE;"> (!</span><span style="color:#BD976A;">this</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">graph</span><span style="color:#DBD7CAEE;">) {</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">commonRegister</span><span style="color:#DBD7CAEE;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">viewRegister</span><span style="color:#DBD7CAEE;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">toolbar</span><span style="color:#DBD7CAEE;"> = </span><span style="color:#BD976A;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">G6</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">ToolBar</span><span style="color:#DBD7CAEE;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">position</span><span style="color:#DBD7CAEE;">: { </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;">: 10</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;">: 10 </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">getContent</span><span style="color:#DBD7CAEE;">: () =&gt; </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">         </span><span style="color:#BD976A;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">outDiv</span><span style="color:#DBD7CAEE;"> = </span><span style="color:#BD976A;">document</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">createElement</span><span style="color:#DBD7CAEE;">(&#39;</span><span style="color:#BD976A;">div</span><span style="color:#DBD7CAEE;">&#39;);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#DBD7CAEE;"> = &#39;</span><span style="color:#BD976A;">cursor</span><span style="color:#DBD7CAEE;">: </span><span style="color:#BD976A;">pointer</span><span style="color:#DBD7CAEE;">;</span><span style="color:#BD976A;">vertical</span><span style="color:#DBD7CAEE;">-</span><span style="color:#BD976A;">align</span><span style="color:#DBD7CAEE;">: </span><span style="color:#BD976A;">middle</span><span style="color:#DBD7CAEE;">;</span><span style="color:#BD976A;">line</span><span style="color:#DBD7CAEE;">-</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;">:24</span><span style="color:#BD976A;">px</span><span style="color:#DBD7CAEE;">;</span><span style="color:#BD976A;">font</span><span style="color:#DBD7CAEE;">-</span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;">:18</span><span style="color:#BD976A;">px</span><span style="color:#DBD7CAEE;">;&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">outDiv</span><span style="color:#DBD7CAEE;">.</span><span style="color:#BD976A;">innerHTML</span><span style="color:#DBD7CAEE;"> = \`&lt;</span><span style="color:#BD976A;">ul</span><span style="color:#DBD7CAEE;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              &lt;</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">code</span><span style="color:#DBD7CAEE;">=&#39;</span><span style="color:#BD976A;">zoomOut</span><span style="color:#DBD7CAEE;">&#39; </span><span style="color:#BD976A;">style</span><span style="color:#DBD7CAEE;">=&quot;</span><span style="color:#BD976A;">$</span><span style="color:#DBD7CAEE;">{</span><span style="color:#BD976A;">style</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;"> class=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">iconfont</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">icon</span><span style="color:#DBD7CAEE;">-</span><span style="color:#BD976A;">fangda</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;"> title=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#BD976A;">放大</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&gt;&lt;/li</span><span style="color:#FDAEB7;font-style:italic;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              &lt;</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">code</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">zoomIn</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">style</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">\${style}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfont icon-suoxiao</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">title</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">缩小</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">&gt;&lt;/</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              &lt;</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">code</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">autoZoom</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">\${style}</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfont icon-fitscreen24</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">title</span><span style="color:#DBD7CAEE;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">居中</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">&gt;&lt;/</span><span style="color:#BD976A;">li</span><span style="color:#DBD7CAEE;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            &lt;/</span><span style="color:#BD976A;">ul</span><span style="color:#DBD7CAEE;">&gt;</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#C98A7D;">          return outDiv</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">     handleClick: (code) =&gt; {</span></span>
+<span class="line"><span style="color:#C98A7D;">          if (code === &#39;zoomOut&#39;) {</span></span>
+<span class="line"><span style="color:#C98A7D;">             toolbar.zoomOut()</span></span>
+<span class="line"><span style="color:#C98A7D;">          } else if (code === &#39;zoomIn&#39;) {</span></span>
+<span class="line"><span style="color:#C98A7D;">             toolbar.zoomIn()</span></span>
+<span class="line"><span style="color:#C98A7D;">          }else if(code === &#39;autoZoom&#39;){</span></span>
+<span class="line"><span style="color:#C98A7D;">             toolbar.autoZoom()</span></span>
+<span class="line"><span style="color:#C98A7D;">          }</span></span>
+<span class="line"><span style="color:#C98A7D;">        }</span></span>
+<span class="line"><span style="color:#C98A7D;">    });</span></span>
+<span class="line"><span style="color:#C98A7D;">    this.graph = new G6.Graph({</span></span>
+<span class="line"><span style="color:#C98A7D;">      container: &quot;topoChart&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">      width: this.width,</span></span>
+<span class="line"><span style="color:#C98A7D;">      height: this.height,</span></span>
+<span class="line"><span style="color:#C98A7D;">      fitView: true,</span></span>
+<span class="line"><span style="color:#C98A7D;">      fitViewPadding: 100,</span></span>
+<span class="line"><span style="color:#C98A7D;">      groupByTypes: false,</span></span>
+<span class="line"><span style="color:#C98A7D;">      linkCenter: false,</span></span>
+<span class="line"><span style="color:#C98A7D;">      layout: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        pipes: [</span></span>
+<span class="line"><span style="color:#C98A7D;">          {</span></span>
+<span class="line"><span style="color:#C98A7D;">            // 该子图所使用的布局类型</span></span>
+<span class="line"><span style="color:#C98A7D;">            type: &quot;circular&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">            center: [halfWidth, halfHeight],</span></span>
+<span class="line"><span style="color:#C98A7D;">            radius: 80,</span></span>
+<span class="line"><span style="color:#C98A7D;">            nodesFilter: (node) =&gt; node.sysType === &quot;vpe&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">          },</span></span>
+<span class="line"><span style="color:#C98A7D;">        ],</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">      //交互行为相关配置</span></span>
+<span class="line"><span style="color:#C98A7D;">      modes: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        default: [&quot;drag-canvas&quot;, &quot;zoom-canvas&quot;, {type: &quot;drag-combo&quot;, shouldEnd(e, parent) {</span></span>
+<span class="line"><span style="color:#C98A7D;">          if(parent) {</span></span>
+<span class="line"><span style="color:#C98A7D;">            return false;</span></span>
+<span class="line"><span style="color:#C98A7D;">          }</span></span>
+<span class="line"><span style="color:#C98A7D;">          return true;</span></span>
+<span class="line"><span style="color:#C98A7D;">        }}],</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">      plugins: [toolbar],</span></span>
+<span class="line"><span style="color:#C98A7D;">      defaultNode: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        type: &quot;bubble&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">        labelCfg: {</span></span>
+<span class="line"><span style="color:#C98A7D;">          position: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">          style: {</span></span>
+<span class="line"><span style="color:#C98A7D;">            fill: &quot;white&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">            stroke: &quot;#fff&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">          },</span></span>
+<span class="line"><span style="color:#C98A7D;">        },</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">      defaultEdge: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        color: &quot;#888&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">        type: &quot;animate-line&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">      defaultCombo: {</span></span>
+<span class="line"><span style="color:#C98A7D;">        padding: 1,</span></span>
+<span class="line"><span style="color:#C98A7D;">        style: {</span></span>
+<span class="line"><span style="color:#C98A7D;">          cursor: &quot;all-scroll&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">        },</span></span>
+<span class="line"><span style="color:#C98A7D;">        labelCfg: {</span></span>
+<span class="line"><span style="color:#C98A7D;">          style: {</span></span>
+<span class="line"><span style="color:#C98A7D;">            opacity: 0,</span></span>
+<span class="line"><span style="color:#C98A7D;">            fill: &quot;#303133&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">            fontSize: 12,</span></span>
+<span class="line"><span style="color:#C98A7D;">            stroke: &quot;#fff&quot;,</span></span>
+<span class="line"><span style="color:#C98A7D;">          },</span></span>
+<span class="line"><span style="color:#C98A7D;">        },</span></span>
+<span class="line"><span style="color:#C98A7D;">      },</span></span>
+<span class="line"><span style="color:#C98A7D;">    });</span></span>
+<span class="line"><span style="color:#C98A7D;">    //监听事件</span></span>
+<span class="line"><span style="color:#C98A7D;">     this.graphBehaviors();</span></span>
+<span class="line"><span style="color:#C98A7D;">  }</span></span>
+<span class="line"><span style="color:#C98A7D;">},</span></span>
+<span class="line"><span style="color:#C98A7D;">graphBehaviors(){</span></span>
+<span class="line"><span style="color:#C98A7D;">    this.graph.on(&#39;node:click&#39;,this.debounce(this.eventHandle, 300));</span></span>
+<span class="line"><span style="color:#C98A7D;"> //this.graph.on(&#39;edge:click&#39;... </span></span>
+<span class="line"><span style="color:#C98A7D;">},</span></span>
+<span class="line"><span style="color:#C98A7D;">debounce(fn, delay) {</span></span>
+<span class="line"><span style="color:#C98A7D;">  const delays = delay || 300;</span></span>
+<span class="line"><span style="color:#C98A7D;">  let timer;</span></span>
+<span class="line"><span style="color:#C98A7D;">  return function() {</span></span>
+<span class="line"><span style="color:#C98A7D;">    const th = this;</span></span>
+<span class="line"><span style="color:#C98A7D;">    const args = arguments;</span></span>
+<span class="line"><span style="color:#C98A7D;">    if (timer) {</span></span>
+<span class="line"><span style="color:#C98A7D;">      clearTimeout(timer);</span></span>
+<span class="line"><span style="color:#C98A7D;">    }</span></span>
+<span class="line"><span style="color:#C98A7D;">    timer = setTimeout(function() {</span></span>
+<span class="line"><span style="color:#C98A7D;">      timer = null;</span></span>
+<span class="line"><span style="color:#C98A7D;">      fn.apply(th, args);</span></span>
+<span class="line"><span style="color:#C98A7D;">    }, delays);</span></span>
+<span class="line"><span style="color:#C98A7D;">  };</span></span>
+<span class="line"><span style="color:#C98A7D;">},</span></span>
+<span class="line"><span style="color:#C98A7D;">    //2.查询数据</span></span>
+<span class="line"><span style="color:#C98A7D;">queryChartData(){</span></span>
+<span class="line"><span style="color:#C98A7D;">    //处理数据</span></span>
+<span class="line"><span style="color:#C98A7D;">    this.dealData(data)</span></span>
+<span class="line"><span style="color:#C98A7D;">}</span></span>
+<span class="line"><span style="color:#C98A7D;">//3.处理数据</span></span>
+<span class="line"><span style="color:#C98A7D;">dealData(data ) {</span></span>
+<span class="line"><span style="color:#C98A7D;">    //VPE节点</span></span>
+<span class="line"><span style="color:#C98A7D;">    nodes =  ...</span></span>
+<span class="line"><span style="color:#C98A7D;">    edges = ...</span></span>
+<span class="line"><span style="color:#C98A7D;">    combos = ...</span></span>
+<span class="line"><span style="color:#C98A7D;">    this.drawChart(...);</span></span>
+<span class="line"><span style="color:#C98A7D;">}</span></span>
+<span class="line"><span style="color:#C98A7D;">//4.渲染数据</span></span>
+<span class="line"><span style="color:#C98A7D;">drawChart() {</span></span>
+<span class="line"><span style="color:#C98A7D;">  this.graph.read({</span></span>
+<span class="line"><span style="color:#C98A7D;">    nodes,</span></span>
+<span class="line"><span style="color:#C98A7D;">    edges,</span></span>
+<span class="line"><span style="color:#C98A7D;">    combos,</span></span>
+<span class="line"><span style="color:#C98A7D;">  });</span></span>
+<span class="line"><span style="color:#C98A7D;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">commonRegister</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">viewRegister</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">./registerElements.js</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//1.初始化实例</span></span>
+<span class="line"><span style="color:#B07D48;">initChart</span><span style="color:#393A34;">() </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">halfWidth</span><span style="color:#393A34;"> = </span><span style="color:#B07D48;">this</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> / 2;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">halfHeight</span><span style="color:#393A34;"> = </span><span style="color:#B07D48;">this</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> / 2;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">if</span><span style="color:#393A34;"> (!</span><span style="color:#B07D48;">this</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">graph</span><span style="color:#393A34;">) {</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">commonRegister</span><span style="color:#393A34;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">viewRegister</span><span style="color:#393A34;">()</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">toolbar</span><span style="color:#393A34;"> = </span><span style="color:#B07D48;">new</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">G6</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">ToolBar</span><span style="color:#393A34;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">position</span><span style="color:#393A34;">: { </span><span style="color:#B07D48;">x</span><span style="color:#393A34;">: 10</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;">: 10 </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">getContent</span><span style="color:#393A34;">: () =&gt; </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">         </span><span style="color:#B07D48;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">outDiv</span><span style="color:#393A34;"> = </span><span style="color:#B07D48;">document</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">createElement</span><span style="color:#393A34;">(&#39;</span><span style="color:#B07D48;">div</span><span style="color:#393A34;">&#39;);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#393A34;"> = &#39;</span><span style="color:#B07D48;">cursor</span><span style="color:#393A34;">: </span><span style="color:#B07D48;">pointer</span><span style="color:#393A34;">;</span><span style="color:#B07D48;">vertical</span><span style="color:#393A34;">-</span><span style="color:#B07D48;">align</span><span style="color:#393A34;">: </span><span style="color:#B07D48;">middle</span><span style="color:#393A34;">;</span><span style="color:#B07D48;">line</span><span style="color:#393A34;">-</span><span style="color:#B07D48;">height</span><span style="color:#393A34;">:24</span><span style="color:#B07D48;">px</span><span style="color:#393A34;">;</span><span style="color:#B07D48;">font</span><span style="color:#393A34;">-</span><span style="color:#B07D48;">size</span><span style="color:#393A34;">:18</span><span style="color:#B07D48;">px</span><span style="color:#393A34;">;&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">outDiv</span><span style="color:#393A34;">.</span><span style="color:#B07D48;">innerHTML</span><span style="color:#393A34;"> = \`&lt;</span><span style="color:#B07D48;">ul</span><span style="color:#393A34;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">              &lt;</span><span style="color:#B07D48;">li</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">code</span><span style="color:#393A34;">=&#39;</span><span style="color:#B07D48;">zoomOut</span><span style="color:#393A34;">&#39; </span><span style="color:#B07D48;">style</span><span style="color:#393A34;">=&quot;</span><span style="color:#B07D48;">$</span><span style="color:#393A34;">{</span><span style="color:#B07D48;">style</span><span style="color:#999999;">}</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;"> class=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">iconfont</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">icon</span><span style="color:#393A34;">-</span><span style="color:#B07D48;">fangda</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;"> title=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B07D48;">放大</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&gt;&lt;/li</span><span style="color:#B31D28;font-style:italic;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">              &lt;</span><span style="color:#B07D48;">li</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">code</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">zoomIn</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">style</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">\${style}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfont icon-suoxiao</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">title</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">缩小</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">&gt;&lt;/</span><span style="color:#B07D48;">li</span><span style="color:#393A34;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">              &lt;</span><span style="color:#B07D48;">li</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">code</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">autoZoom</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">\${style}</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfont icon-fitscreen24</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">title</span><span style="color:#393A34;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">居中</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">&gt;&lt;/</span><span style="color:#B07D48;">li</span><span style="color:#393A34;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">            &lt;/</span><span style="color:#B07D48;">ul</span><span style="color:#393A34;">&gt;</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#B56959;">          return outDiv</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">     handleClick: (code) =&gt; {</span></span>
+<span class="line"><span style="color:#B56959;">          if (code === &#39;zoomOut&#39;) {</span></span>
+<span class="line"><span style="color:#B56959;">             toolbar.zoomOut()</span></span>
+<span class="line"><span style="color:#B56959;">          } else if (code === &#39;zoomIn&#39;) {</span></span>
+<span class="line"><span style="color:#B56959;">             toolbar.zoomIn()</span></span>
+<span class="line"><span style="color:#B56959;">          }else if(code === &#39;autoZoom&#39;){</span></span>
+<span class="line"><span style="color:#B56959;">             toolbar.autoZoom()</span></span>
+<span class="line"><span style="color:#B56959;">          }</span></span>
+<span class="line"><span style="color:#B56959;">        }</span></span>
+<span class="line"><span style="color:#B56959;">    });</span></span>
+<span class="line"><span style="color:#B56959;">    this.graph = new G6.Graph({</span></span>
+<span class="line"><span style="color:#B56959;">      container: &quot;topoChart&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">      width: this.width,</span></span>
+<span class="line"><span style="color:#B56959;">      height: this.height,</span></span>
+<span class="line"><span style="color:#B56959;">      fitView: true,</span></span>
+<span class="line"><span style="color:#B56959;">      fitViewPadding: 100,</span></span>
+<span class="line"><span style="color:#B56959;">      groupByTypes: false,</span></span>
+<span class="line"><span style="color:#B56959;">      linkCenter: false,</span></span>
+<span class="line"><span style="color:#B56959;">      layout: {</span></span>
+<span class="line"><span style="color:#B56959;">        pipes: [</span></span>
+<span class="line"><span style="color:#B56959;">          {</span></span>
+<span class="line"><span style="color:#B56959;">            // 该子图所使用的布局类型</span></span>
+<span class="line"><span style="color:#B56959;">            type: &quot;circular&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">            center: [halfWidth, halfHeight],</span></span>
+<span class="line"><span style="color:#B56959;">            radius: 80,</span></span>
+<span class="line"><span style="color:#B56959;">            nodesFilter: (node) =&gt; node.sysType === &quot;vpe&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">          },</span></span>
+<span class="line"><span style="color:#B56959;">        ],</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">      //交互行为相关配置</span></span>
+<span class="line"><span style="color:#B56959;">      modes: {</span></span>
+<span class="line"><span style="color:#B56959;">        default: [&quot;drag-canvas&quot;, &quot;zoom-canvas&quot;, {type: &quot;drag-combo&quot;, shouldEnd(e, parent) {</span></span>
+<span class="line"><span style="color:#B56959;">          if(parent) {</span></span>
+<span class="line"><span style="color:#B56959;">            return false;</span></span>
+<span class="line"><span style="color:#B56959;">          }</span></span>
+<span class="line"><span style="color:#B56959;">          return true;</span></span>
+<span class="line"><span style="color:#B56959;">        }}],</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">      plugins: [toolbar],</span></span>
+<span class="line"><span style="color:#B56959;">      defaultNode: {</span></span>
+<span class="line"><span style="color:#B56959;">        type: &quot;bubble&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">        labelCfg: {</span></span>
+<span class="line"><span style="color:#B56959;">          position: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">          style: {</span></span>
+<span class="line"><span style="color:#B56959;">            fill: &quot;white&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">            stroke: &quot;#fff&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">          },</span></span>
+<span class="line"><span style="color:#B56959;">        },</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">      defaultEdge: {</span></span>
+<span class="line"><span style="color:#B56959;">        color: &quot;#888&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">        type: &quot;animate-line&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">      defaultCombo: {</span></span>
+<span class="line"><span style="color:#B56959;">        padding: 1,</span></span>
+<span class="line"><span style="color:#B56959;">        style: {</span></span>
+<span class="line"><span style="color:#B56959;">          cursor: &quot;all-scroll&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">        },</span></span>
+<span class="line"><span style="color:#B56959;">        labelCfg: {</span></span>
+<span class="line"><span style="color:#B56959;">          style: {</span></span>
+<span class="line"><span style="color:#B56959;">            opacity: 0,</span></span>
+<span class="line"><span style="color:#B56959;">            fill: &quot;#303133&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">            fontSize: 12,</span></span>
+<span class="line"><span style="color:#B56959;">            stroke: &quot;#fff&quot;,</span></span>
+<span class="line"><span style="color:#B56959;">          },</span></span>
+<span class="line"><span style="color:#B56959;">        },</span></span>
+<span class="line"><span style="color:#B56959;">      },</span></span>
+<span class="line"><span style="color:#B56959;">    });</span></span>
+<span class="line"><span style="color:#B56959;">    //监听事件</span></span>
+<span class="line"><span style="color:#B56959;">     this.graphBehaviors();</span></span>
+<span class="line"><span style="color:#B56959;">  }</span></span>
+<span class="line"><span style="color:#B56959;">},</span></span>
+<span class="line"><span style="color:#B56959;">graphBehaviors(){</span></span>
+<span class="line"><span style="color:#B56959;">    this.graph.on(&#39;node:click&#39;,this.debounce(this.eventHandle, 300));</span></span>
+<span class="line"><span style="color:#B56959;"> //this.graph.on(&#39;edge:click&#39;... </span></span>
+<span class="line"><span style="color:#B56959;">},</span></span>
+<span class="line"><span style="color:#B56959;">debounce(fn, delay) {</span></span>
+<span class="line"><span style="color:#B56959;">  const delays = delay || 300;</span></span>
+<span class="line"><span style="color:#B56959;">  let timer;</span></span>
+<span class="line"><span style="color:#B56959;">  return function() {</span></span>
+<span class="line"><span style="color:#B56959;">    const th = this;</span></span>
+<span class="line"><span style="color:#B56959;">    const args = arguments;</span></span>
+<span class="line"><span style="color:#B56959;">    if (timer) {</span></span>
+<span class="line"><span style="color:#B56959;">      clearTimeout(timer);</span></span>
+<span class="line"><span style="color:#B56959;">    }</span></span>
+<span class="line"><span style="color:#B56959;">    timer = setTimeout(function() {</span></span>
+<span class="line"><span style="color:#B56959;">      timer = null;</span></span>
+<span class="line"><span style="color:#B56959;">      fn.apply(th, args);</span></span>
+<span class="line"><span style="color:#B56959;">    }, delays);</span></span>
+<span class="line"><span style="color:#B56959;">  };</span></span>
+<span class="line"><span style="color:#B56959;">},</span></span>
+<span class="line"><span style="color:#B56959;">    //2.查询数据</span></span>
+<span class="line"><span style="color:#B56959;">queryChartData(){</span></span>
+<span class="line"><span style="color:#B56959;">    //处理数据</span></span>
+<span class="line"><span style="color:#B56959;">    this.dealData(data)</span></span>
+<span class="line"><span style="color:#B56959;">}</span></span>
+<span class="line"><span style="color:#B56959;">//3.处理数据</span></span>
+<span class="line"><span style="color:#B56959;">dealData(data ) {</span></span>
+<span class="line"><span style="color:#B56959;">    //VPE节点</span></span>
+<span class="line"><span style="color:#B56959;">    nodes =  ...</span></span>
+<span class="line"><span style="color:#B56959;">    edges = ...</span></span>
+<span class="line"><span style="color:#B56959;">    combos = ...</span></span>
+<span class="line"><span style="color:#B56959;">    this.drawChart(...);</span></span>
+<span class="line"><span style="color:#B56959;">}</span></span>
+<span class="line"><span style="color:#B56959;">//4.渲染数据</span></span>
+<span class="line"><span style="color:#B56959;">drawChart() {</span></span>
+<span class="line"><span style="color:#B56959;">  this.graph.read({</span></span>
+<span class="line"><span style="color:#B56959;">    nodes,</span></span>
+<span class="line"><span style="color:#B56959;">    edges,</span></span>
+<span class="line"><span style="color:#B56959;">    combos,</span></span>
+<span class="line"><span style="color:#B56959;">  });</span></span>
+<span class="line"><span style="color:#B56959;">},</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">chartLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">topoChart</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">).</span><span style="color:#BD976A;">scrollWidth</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">getElementById</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">topoChart</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">).</span><span style="color:#BD976A;">scrollHeight</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">600</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">initChart</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">queryChartData</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">chartLoading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//监听窗口大小变化,重绘网络拓扑</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">resize</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">rePaint</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#80A665;">beforeDestroy</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">graph</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">graph</span><span style="color:#666666;">.</span><span style="color:#80A665;">clear</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">graph</span><span style="color:#666666;">.</span><span style="color:#80A665;">destroy</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$data</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$options</span><span style="color:#666666;">.</span><span style="color:#80A665;">data</span><span style="color:#666666;">());</span></span>
+<span class="line"><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">chartLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">topoChart</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">).</span><span style="color:#B07D48;">scrollWidth</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">getElementById</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">topoChart</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">).</span><span style="color:#B07D48;">scrollHeight</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">600</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">initChart</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">queryChartData</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">chartLoading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//监听窗口大小变化,重绘网络拓扑</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">resize</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">rePaint</span><span style="color:#393A34;"> </span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#59873A;">beforeDestroy</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">graph</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">graph</span><span style="color:#999999;">.</span><span style="color:#59873A;">clear</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">graph</span><span style="color:#999999;">.</span><span style="color:#59873A;">destroy</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$data</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$options</span><span style="color:#999999;">.</span><span style="color:#59873A;">data</span><span style="color:#999999;">());</span></span>
+<span class="line"><span style="color:#999999;">},</span></span></code></pre></div><h2 id="注册节点" tabindex="-1">注册节点 <a class="header-anchor" href="#注册节点" aria-label="Permalink to &quot;注册节点&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//registerElements.js</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">G6</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">@antv/g6</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//共同节点注册</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">commonRegister</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 注册实线动画</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerEdge</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">animate-line</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">drawShape</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">self</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shapeStyle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">self</span><span style="color:#666666;">.</span><span style="color:#80A665;">getShapeStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">shapeStyle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">(</span><span style="color:#BD976A;">shapeStyle</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">strokeOpacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shapeStyle</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">afterDraw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">children</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//线条动画</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">opacity</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">opacity</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">strokeOpacity</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">strokeOpacity</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">opacity</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">strokeOpacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">||</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">strokeOpacity</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">300</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">        </span><span style="color:#758575DD;">//箭头动画</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startPoint</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">getPoint</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">circle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">circle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startPoint</span><span style="color:#666666;">.</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">startPoint</span><span style="color:#666666;">.</span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#1890ff</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">r</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">circle-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">circle</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tmpPoint</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">getPoint</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tmpPoint</span><span style="color:#666666;">.</span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">tmpPoint</span><span style="color:#666666;">.</span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">setState</span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">keyShape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">disappearing</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#B8A965;">strokeOpacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">dark</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">attr</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">opacity</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.2</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">attr</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">opacity</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">line</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//注册iconfont节点</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerNode</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfontHub</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">draw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelCfg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelStyle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">circle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">r</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hub-bg-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//添加图标</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">size</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fontFamily</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfont</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fontSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">round</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">...</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hub-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//添加label</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Math</span><span style="color:#666666;">.</span><span style="color:#80A665;">round</span><span style="color:#666666;">(</span><span style="color:#BD976A;">size</span><span style="color:#CB7676;">/</span><span style="color:#4C9A91;">4</span><span style="color:#666666;">),</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textBaseline</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">middle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">label</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">...</span><span style="color:#BD976A;">labelStyle</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hub-label</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// afterDraw(cfg, group) {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   const shape = group.get(&#39;children&#39;)[0];</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   shape.animate(</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     (ratio) =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       let fill = &#39;#C396ED&#39;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       if(ratio &gt; 0.6){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         fill = &#39;#FFCF8B&#39;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       }else if(ratio &gt; 0.3){</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         fill = &#39;#C396ED&#39;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       }else {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         fill = &#39;#75D882&#39;</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       }</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       return {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//         fill,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       };</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     },</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     {</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       repeat: true,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       duration: 1500,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//       // easing: &#39;easeCubic&#39;,</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//     },</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//   );</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// },</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//自定义节点和节点动画</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerNode</span><span style="color:#666666;">(</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vpe-rect-animate</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">afterDraw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stroke</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">radius</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">getShapeStyle</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">back1</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rect</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">zIndex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">3</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stroke</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">radius</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rback1-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">back2</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rect</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">zIndex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">2</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stroke</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">radius</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rback2-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">back3</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">circle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">zIndex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">stroke</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.6</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">radius</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rback3-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">sort</span><span style="color:#666666;">();</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// Sort according to the zIndex</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">back1</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">easing</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">easeCubic</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">delay</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">300</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// repeat</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// no delay</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">back2</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">easing</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">easeCubic</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">delay</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">back3</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">width</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">height</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">x</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">y</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">easing</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">easeCubic</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">delay</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// repeat</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 3s delay</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rect</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#758575DD;">//弹窗特有节点注册</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">dialogRegister</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#666666;">   </span><span style="color:#758575DD;">//注册iconfont节点</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerNode</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfontCpe</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">draw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelCfg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelStyle</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//添加图标</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fontFamily</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">iconfont</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textBaseline</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">middle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">fontSize</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">size</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">...</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cpe-shape</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//添加label</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">label</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">...</span><span style="color:#BD976A;">labelStyle</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cpe-label</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">afterDraw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">shape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">get</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">children</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">shape</span><span style="color:#666666;">.</span><span style="color:#80A665;">animate</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\ue604</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.6</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\ue604</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ratio</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.3</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\ue606</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C99076;">\\ue605</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">repeat</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">duration</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1500</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#B8A965;">delay</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3000</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">          </span><span style="color:#758575DD;">// easing: &#39;easeCubic&#39;,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//注册虚线动画</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// G6.registerEdge(&quot;vpn-line-dash&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     afterDraw(cfg, group) {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       const shape = group.get(&quot;children&quot;)[0];</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       let index = 0;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       shape.animate(</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         () =&gt; {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           index = index+0.2;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           if (index &gt; 9) {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//             index = 0;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           }</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           const res = {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//             lineDash: [4, 4],</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//             lineDashOffset: -index,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           };</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           return res;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           repeat: true,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           duration:10000,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         }</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       );</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   &quot;line&quot;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// );</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//网络拓扑总览特有节点注册</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">viewRegister</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//注册iconfont combos</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// G6.registerCombo(&quot;cloudCombo&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     drawShape: function drawShape(cfg, group) {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       // const {  labelCfg: labelStyle   } = cfg;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       const keyShape = group.addShape(&quot;text&quot;, { </span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         attrs: {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           y: 0,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           x: 0,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           fill: cfg.style.fill,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           stroke: cfg.style.fill,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           fontFamily: &quot;iconfont&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           textAlign: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           textBaseline: &quot;middle&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           text: &quot;\\ue603&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           fontSize: 320,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           zIndex: 8,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//         name: &quot;cloud&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       });</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//           //添加label</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     // group.addShape(&quot;text&quot;, {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //   attrs: {</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     x: 0,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     y: -80,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     textAlign: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     textBaseline: &quot;middle&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     text: cfg.label,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //     ...labelStyle.style,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //   },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     //   name: &quot;hubCombo-label&quot;,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     // });</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//       return keyShape;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//     },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   },</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//   &quot;cicle&quot;</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// );</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//注册SVG combo</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#80A665;">registerCombo</span><span style="color:#666666;">(</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cloudCombo</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#80A665;">drawShape</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">drawShape</span><span style="color:#666666;">(</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">labelCfg</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">M 448 102.875 c 0 -82.09 -56.678 -150.9 -132.996 -169.48 C 311.762 -195.305 206.546 -298.667 77.142 -298.667 c -75.792 0 -143.266 35.494 -186.854 90.732 c -24.442 -31.598 -62.69 -51.96 -105.708 -51.96 c -73.81 0 -133.642 59.874 -133.642 133.722 c 0 6.436 0.48 12.76 1.364 18.954 c -11.222 -2.024 -22.766 -3.138 -34.57 -3.138 C -489.266 -110.359 -576 -23.5707 -576 83.4853 C -576 190.547 -489.266 277.333 -382.27 277.333 l 656.262 0 l 0 -0.012 C 370.13 277.137 448 199.109 448 102.875 Z</span><span style="color:#C98A7D99;">&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pathArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">opath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">pathArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">[</span><span style="color:#C99076;">a-zA-Z</span><span style="color:#666666;">]</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#BD976A;">opath</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">([</span><span style="color:#BD976A;">item</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#BD976A;">opath</span><span style="color:#666666;">[</span><span style="color:#BD976A;">opath</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">].</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#80A665;">parseFloat</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">opath</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">p</span><span style="color:#666666;">,</span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">                </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">[</span><span style="color:#BD976A;">i</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">/</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">3</span><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#666666;">...</span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">width</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">.</span><span style="color:#BD976A;">height</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">path</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">opath</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">id</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cloud</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">100</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">label</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">              </span><span style="color:#B8A965;">fill</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">#303133</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">            </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hubCombo-label</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyShape</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">single-combo</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;"> </span><span style="color:#758575DD;">//节点文本溢出省略处理</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">fittingString</span><span style="color:#666666;">(</span><span style="color:#BD976A;">str</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">maxWidth</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fontSize</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ellipsis</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">...</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ellipsisLength</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Util</span><span style="color:#666666;">.</span><span style="color:#80A665;">getTextSize</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ellipsis</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fontSize</span><span style="color:#666666;">)[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">];</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">str</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pattern</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">RegExp</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">[</span><span style="color:#C99076;">\\u4E00</span><span style="color:#C98A7D;">-</span><span style="color:#C99076;">\\u9FA5</span><span style="color:#C98A7D;">]+</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">);</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">letter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">i</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">maxWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ellipsisLength</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">return</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">pattern</span><span style="color:#666666;">.</span><span style="color:#80A665;">test</span><span style="color:#666666;">(</span><span style="color:#BD976A;">letter</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fontSize</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">G6</span><span style="color:#666666;">.</span><span style="color:#BD976A;">Util</span><span style="color:#666666;">.</span><span style="color:#80A665;">getLetterWidth</span><span style="color:#666666;">(</span><span style="color:#BD976A;">letter</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fontSize</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">currentWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">maxWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ellipsisLength</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">res</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">str</span><span style="color:#666666;">.</span><span style="color:#80A665;">substr</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#C98A7D;"> i</span><span style="color:#666666;">)</span><span style="color:#666666;">}\${</span><span style="color:#C98A7D;">ellipsis</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">res</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//registerElements.js</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">G6</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">@antv/g6</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//共同节点注册</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">commonRegister</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 注册实线动画</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerEdge</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">animate-line</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">drawShape</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">self</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shapeStyle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">self</span><span style="color:#999999;">.</span><span style="color:#59873A;">getShapeStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">shapeStyle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">(</span><span style="color:#B07D48;">shapeStyle</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">strokeOpacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shapeStyle</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">afterDraw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">children</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//线条动画</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">opacity</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">opacity</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">strokeOpacity</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">strokeOpacity</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">opacity</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">strokeOpacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">||</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">strokeOpacity</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">300</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">        </span><span style="color:#A0ADA0;">//箭头动画</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startPoint</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">getPoint</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">circle</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">circle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startPoint</span><span style="color:#999999;">.</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">startPoint</span><span style="color:#999999;">.</span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#1890ff</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">r</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">circle-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">circle</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tmpPoint</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">getPoint</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tmpPoint</span><span style="color:#999999;">.</span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">tmpPoint</span><span style="color:#999999;">.</span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">setState</span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">keyShape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">disappearing</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#998418;">strokeOpacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">dark</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">attr</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">opacity</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.2</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">attr</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">opacity</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">line</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//注册iconfont节点</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerNode</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfontHub</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">draw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelCfg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelStyle</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">circle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">r</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hub-bg-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//添加图标</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">size</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fontFamily</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfont</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fontSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">round</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">...</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hub-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//添加label</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Math</span><span style="color:#999999;">.</span><span style="color:#59873A;">round</span><span style="color:#999999;">(</span><span style="color:#B07D48;">size</span><span style="color:#AB5959;">/</span><span style="color:#2F798A;">4</span><span style="color:#999999;">),</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textBaseline</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">middle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">label</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">...</span><span style="color:#B07D48;">labelStyle</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hub-label</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// afterDraw(cfg, group) {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   const shape = group.get(&#39;children&#39;)[0];</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   shape.animate(</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     (ratio) =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       let fill = &#39;#C396ED&#39;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       if(ratio &gt; 0.6){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         fill = &#39;#FFCF8B&#39;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       }else if(ratio &gt; 0.3){</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         fill = &#39;#C396ED&#39;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       }else {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         fill = &#39;#75D882&#39;</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       }</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       return {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//         fill,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       };</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     },</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     {</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       repeat: true,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       duration: 1500,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//       // easing: &#39;easeCubic&#39;,</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//     },</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//   );</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// },</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//自定义节点和节点动画</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerNode</span><span style="color:#999999;">(</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vpe-rect-animate</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">afterDraw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stroke</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">radius</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">getShapeStyle</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">back1</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rect</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">zIndex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">3</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stroke</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">radius</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rback1-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">back2</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rect</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">zIndex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">2</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stroke</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">radius</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rback2-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">back3</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">circle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">zIndex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">stroke</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.6</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">radius</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rback3-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">sort</span><span style="color:#999999;">();</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// Sort according to the zIndex</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">back1</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">easing</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">easeCubic</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">delay</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">300</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// repeat</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// no delay</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">back2</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">easing</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">easeCubic</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">delay</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">back3</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">width</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">height</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">x</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">y</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">easing</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">easeCubic</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">delay</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// repeat</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">);</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 3s delay</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rect</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#A0ADA0;">//弹窗特有节点注册</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">dialogRegister</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#999999;">   </span><span style="color:#A0ADA0;">//注册iconfont节点</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerNode</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfontCpe</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">draw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelCfg</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelStyle</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//添加图标</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fontFamily</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">iconfont</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textBaseline</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">middle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">fontSize</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">size</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">...</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cpe-shape</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//添加label</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">label</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">...</span><span style="color:#B07D48;">labelStyle</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cpe-label</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">afterDraw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">shape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">get</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">children</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">shape</span><span style="color:#999999;">.</span><span style="color:#59873A;">animate</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\ue604</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.6</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\ue604</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ratio</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.3</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\ue606</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#A65E2B;">\\ue605</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">repeat</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">duration</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1500</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#998418;">delay</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3000</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">          </span><span style="color:#A0ADA0;">// easing: &#39;easeCubic&#39;,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//注册虚线动画</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// G6.registerEdge(&quot;vpn-line-dash&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     afterDraw(cfg, group) {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       const shape = group.get(&quot;children&quot;)[0];</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       let index = 0;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       shape.animate(</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         () =&gt; {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           index = index+0.2;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           if (index &gt; 9) {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//             index = 0;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           }</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           const res = {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//             lineDash: [4, 4],</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//             lineDashOffset: -index,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           };</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           return res;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           repeat: true,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           duration:10000,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         }</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       );</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   &quot;line&quot;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// );</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//网络拓扑总览特有节点注册</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">viewRegister</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//注册iconfont combos</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// G6.registerCombo(&quot;cloudCombo&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     drawShape: function drawShape(cfg, group) {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       // const {  labelCfg: labelStyle   } = cfg;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       const keyShape = group.addShape(&quot;text&quot;, { </span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         attrs: {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           y: 0,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           x: 0,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           fill: cfg.style.fill,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           stroke: cfg.style.fill,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           fontFamily: &quot;iconfont&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           textAlign: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           textBaseline: &quot;middle&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           text: &quot;\\ue603&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           fontSize: 320,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           zIndex: 8,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//         name: &quot;cloud&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       });</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//           //添加label</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     // group.addShape(&quot;text&quot;, {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //   attrs: {</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     x: 0,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     y: -80,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     textAlign: &quot;center&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     textBaseline: &quot;middle&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     text: cfg.label,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //     ...labelStyle.style,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //   },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     //   name: &quot;hubCombo-label&quot;,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     // });</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//       return keyShape;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//     },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   },</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//   &quot;cicle&quot;</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// );</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//注册SVG combo</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#59873A;">registerCombo</span><span style="color:#999999;">(</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cloudCombo</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#59873A;">drawShape</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">drawShape</span><span style="color:#999999;">(</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">labelCfg</span><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">M 448 102.875 c 0 -82.09 -56.678 -150.9 -132.996 -169.48 C 311.762 -195.305 206.546 -298.667 77.142 -298.667 c -75.792 0 -143.266 35.494 -186.854 90.732 c -24.442 -31.598 -62.69 -51.96 -105.708 -51.96 c -73.81 0 -133.642 59.874 -133.642 133.722 c 0 6.436 0.48 12.76 1.364 18.954 c -11.222 -2.024 -22.766 -3.138 -34.57 -3.138 C -489.266 -110.359 -576 -23.5707 -576 83.4853 C -576 190.547 -489.266 277.333 -382.27 277.333 l 656.262 0 l 0 -0.012 C 370.13 277.137 448 199.109 448 102.875 Z</span><span style="color:#B5695999;">&#39;</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pathArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">opath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">pathArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#999999;">[</span><span style="color:#A65E2B;">a-zA-Z</span><span style="color:#999999;">]</span><span style="color:#B5695999;">/</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)){</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#B07D48;">opath</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">([</span><span style="color:#B07D48;">item</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#B07D48;">opath</span><span style="color:#999999;">[</span><span style="color:#B07D48;">opath</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">].</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#59873A;">parseFloat</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">opath</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">p</span><span style="color:#999999;">,</span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">i</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">                </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">[</span><span style="color:#B07D48;">i</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">/</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">3</span><span style="color:#393A34;">  </span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#999999;">...</span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">width</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">.</span><span style="color:#B07D48;">height</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">path</span><span style="color:#999999;">:</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">opath</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">id</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cloud</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;">  </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">100</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">label</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">              </span><span style="color:#998418;">fill</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">#303133</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">            </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hubCombo-label</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyShape</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">        </span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">single-combo</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">   </span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;"> </span><span style="color:#A0ADA0;">//节点文本溢出省略处理</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">fittingString</span><span style="color:#999999;">(</span><span style="color:#B07D48;">str</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">maxWidth</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fontSize</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ellipsis</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">...</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ellipsisLength</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Util</span><span style="color:#999999;">.</span><span style="color:#59873A;">getTextSize</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ellipsis</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fontSize</span><span style="color:#999999;">)[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">];</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">str</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pattern</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">RegExp</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">[</span><span style="color:#A65E2B;">\\u4E00</span><span style="color:#B56959;">-</span><span style="color:#A65E2B;">\\u9FA5</span><span style="color:#B56959;">]+</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">);</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">letter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">i</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">maxWidth</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ellipsisLength</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">return</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">pattern</span><span style="color:#999999;">.</span><span style="color:#59873A;">test</span><span style="color:#999999;">(</span><span style="color:#B07D48;">letter</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fontSize</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">G6</span><span style="color:#999999;">.</span><span style="color:#B07D48;">Util</span><span style="color:#999999;">.</span><span style="color:#59873A;">getLetterWidth</span><span style="color:#999999;">(</span><span style="color:#B07D48;">letter</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fontSize</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">currentWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">maxWidth</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ellipsisLength</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">res</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#999999;">\${</span><span style="color:#B56959;">str</span><span style="color:#999999;">.</span><span style="color:#59873A;">substr</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#B56959;"> i</span><span style="color:#999999;">)</span><span style="color:#999999;">}\${</span><span style="color:#B56959;">ellipsis</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">res</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,6),e=[o];function t(c,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Problem_Graphical_Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md.3d28f150.lean.js" "b/assets/Problem_Graphical_Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md.3d28f150.lean.js"
new file mode 100644
index 00000000..68245bd4
--- /dev/null
+++ "b/assets/Problem_Graphical_Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.md.3d28f150.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"网络拓扑图代码","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/Graphical/Antv代码片段集锦.md","filePath":"Problem/Graphical/Antv代码片段集锦.md"}'),p={name:"Problem/Graphical/Antv代码片段集锦.md"},o=l("",6),e=[o];function t(c,r,y,A,D,B){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Problem_Graphical_Antv\344\275\277\347\224\250\346\200\273\347\273\223.md.10b596c9.js" "b/assets/Problem_Graphical_Antv\344\275\277\347\224\250\346\200\273\347\273\223.md.10b596c9.js"
new file mode 100644
index 00000000..b29af436
--- /dev/null
+++ "b/assets/Problem_Graphical_Antv\344\275\277\347\224\250\346\200\273\347\273\223.md.10b596c9.js"
@@ -0,0 +1,25 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/Graphical/Antv使用总结.md","filePath":"Problem/Graphical/Antv使用总结.md"}'),p={name:"Problem/Graphical/Antv使用总结.md"},o=l(`<h3 id="一、默认收缩二级节点" tabindex="-1">一、默认收缩二级节点 <a class="header-anchor" href="#一、默认收缩二级节点" aria-label="Permalink to &quot;一、默认收缩二级节点&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//树形图哪个需要收缩则把属性collapsed设置为true</span></span>
+<span class="line"><span style="color:#BD976A;">data</span><span style="color:#666666;">.</span><span style="color:#BD976A;">children</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#BD976A;">collapsed</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//树形图哪个需要收缩则把属性collapsed设置为true</span></span>
+<span class="line"><span style="color:#B07D48;">data</span><span style="color:#999999;">.</span><span style="color:#B07D48;">children</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#B07D48;">collapsed</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">)</span></span></code></pre></div><h3 id="二、改用iconfont文字不居中问题" tabindex="-1">二、改用iconfont文字不居中问题 <a class="header-anchor" href="#二、改用iconfont文字不居中问题" aria-label="Permalink to &quot;二、改用iconfont文字不居中问题&quot;">​</a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//注册节点添加label图形时动态计算label位置</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">group</span><span style="color:#666666;">.</span><span style="color:#80A665;">addShape</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">attrs</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">x</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">     </span><span style="color:#B8A965;">y</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">80</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">textAlign</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#B8A965;">textBaseline</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">middle</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cfg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">label</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">...</span><span style="color:#BD976A;">labelStyle</span><span style="color:#666666;">.</span><span style="color:#BD976A;">style</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//这里需要重新处理x,y</span></span>
+<span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hubCombo-label</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//注册节点添加label图形时动态计算label位置</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#B07D48;">group</span><span style="color:#999999;">.</span><span style="color:#59873A;">addShape</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">attrs</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">x</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">     </span><span style="color:#998418;">y</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">80</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">textAlign</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#998418;">textBaseline</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">middle</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cfg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">label</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">...</span><span style="color:#B07D48;">labelStyle</span><span style="color:#999999;">.</span><span style="color:#B07D48;">style</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//这里需要重新处理x,y</span></span>
+<span class="line"><span style="color:#393A34;"> </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hubCombo-label</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h3 id="三、初始化画图完成后出现这个锯齿" tabindex="-1">三、初始化画图完成后出现这个锯齿 <a class="header-anchor" href="#三、初始化画图完成后出现这个锯齿" aria-label="Permalink to &quot;三、初始化画图完成后出现这个锯齿&quot;">​</a></h3>`,5),e=[o];function t(c,r,y,A,i,D){return a(),n("div",null,e)}const E=s(p,[["render",t]]);export{d as __pageData,E as default};
diff --git "a/assets/Problem_Graphical_Antv\344\275\277\347\224\250\346\200\273\347\273\223.md.10b596c9.lean.js" "b/assets/Problem_Graphical_Antv\344\275\277\347\224\250\346\200\273\347\273\223.md.10b596c9.lean.js"
new file mode 100644
index 00000000..e612a877
--- /dev/null
+++ "b/assets/Problem_Graphical_Antv\344\275\277\347\224\250\346\200\273\347\273\223.md.10b596c9.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/Graphical/Antv使用总结.md","filePath":"Problem/Graphical/Antv使用总结.md"}'),p={name:"Problem/Graphical/Antv使用总结.md"},o=l("",5),e=[o];function t(c,r,y,A,i,D){return a(),n("div",null,e)}const E=s(p,[["render",t]]);export{d as __pageData,E as default};
diff --git "a/assets/Problem_Graphical_Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md.fe67d408.js" "b/assets/Problem_Graphical_Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md.fe67d408.js"
new file mode 100644
index 00000000..1b33faf3
--- /dev/null
+++ "b/assets/Problem_Graphical_Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md.fe67d408.js"
@@ -0,0 +1,219 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"Echarts问题总结","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/Graphical/Echarts问题总结.md","filePath":"Problem/Graphical/Echarts问题总结.md"}'),p={name:"Problem/Graphical/Echarts问题总结.md"},o=l(`<h1 id="echarts问题总结" tabindex="-1">Echarts问题总结 <a class="header-anchor" href="#echarts问题总结" aria-label="Permalink to &quot;Echarts问题总结&quot;">​</a></h1><h2 id="屏幕适配问题" tabindex="-1">屏幕适配问题 <a class="header-anchor" href="#屏幕适配问题" aria-label="Permalink to &quot;屏幕适配问题&quot;">​</a></h2><blockquote><p>方案一: 使用<code>scss</code>函数计算比例</p></blockquote><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//默认设计稿的宽度</span></span>
+<span class="line"><span style="color:#BD976A;">$designWidth</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1920</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//默认设计稿的高度</span></span>
+<span class="line"><span style="color:#BD976A;">$designHeight</span><span style="color:#666666;">:</span><span style="color:#4C9A91;">1080</span><span style="color:#666666;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//px转为vw的函数</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">vw</span><span style="color:#666666;">(</span><span style="color:#BD976A;">$px</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">math</span><span style="color:#666666;">.</span><span style="color:#B8A965;">div</span><span style="color:#666666;">(</span><span style="color:#BD976A;">$px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$designWidth</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">vw</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//px转为vh的函数</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">vh</span><span style="color:#666666;">(</span><span style="color:#BD976A;">$px</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">@</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">math</span><span style="color:#666666;">.</span><span style="color:#B8A965;">div</span><span style="color:#666666;">(</span><span style="color:#BD976A;">$px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$designHeight</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">vh</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//默认设计稿的宽度</span></span>
+<span class="line"><span style="color:#B07D48;">$designWidth</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1920</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//默认设计稿的高度</span></span>
+<span class="line"><span style="color:#B07D48;">$designHeight</span><span style="color:#999999;">:</span><span style="color:#2F798A;">1080</span><span style="color:#999999;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//px转为vw的函数</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">function</span><span style="color:#393A34;"> </span><span style="color:#998418;">vw</span><span style="color:#999999;">(</span><span style="color:#B07D48;">$px</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">math</span><span style="color:#999999;">.</span><span style="color:#998418;">div</span><span style="color:#999999;">(</span><span style="color:#B07D48;">$px</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$designWidth</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">vw</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//px转为vh的函数</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">function</span><span style="color:#393A34;"> </span><span style="color:#998418;">vh</span><span style="color:#999999;">(</span><span style="color:#B07D48;">$px</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">@</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">math</span><span style="color:#999999;">.</span><span style="color:#998418;">div</span><span style="color:#999999;">(</span><span style="color:#B07D48;">$px</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$designHeight</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">vh</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="左侧菜单折叠响应式" tabindex="-1">左侧菜单折叠响应式 <a class="header-anchor" href="#左侧菜单折叠响应式" aria-label="Permalink to &quot;左侧菜单折叠响应式&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#758575DD;">// 监听窗口大小,所有echart实例尺寸尺寸改变</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">resize</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">chartsInstance</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(</span><span style="color:#BD976A;">chart</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">chart</span><span style="color:#666666;">.</span><span style="color:#80A665;">resize</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//监听div容器的无效</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#758575DD;">/*this.$refs.onlineIspRef.addEventListener(&quot;resize&quot;,() =&gt; {</span></span>
+<span class="line"><span style="color:#758575DD;">      this.chartsInstance.forEach(chart =&gt; {</span></span>
+<span class="line"><span style="color:#758575DD;">        chart.resize()</span></span>
+<span class="line"><span style="color:#758575DD;">      });</span></span>
+<span class="line"><span style="color:#758575DD;">    })*/</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#A0ADA0;">// 监听窗口大小,所有echart实例尺寸尺寸改变</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">resize</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">chartsInstance</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(</span><span style="color:#B07D48;">chart</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">chart</span><span style="color:#999999;">.</span><span style="color:#59873A;">resize</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//监听div容器的无效</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#A0ADA0;">/*this.$refs.onlineIspRef.addEventListener(&quot;resize&quot;,() =&gt; {</span></span>
+<span class="line"><span style="color:#A0ADA0;">      this.chartsInstance.forEach(chart =&gt; {</span></span>
+<span class="line"><span style="color:#A0ADA0;">        chart.resize()</span></span>
+<span class="line"><span style="color:#A0ADA0;">      });</span></span>
+<span class="line"><span style="color:#A0ADA0;">    })*/</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>方案: 侧边栏按钮点击展开/折叠时, 手动触发<code>window.resize</code></p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">toggleLeftMenu</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">Cookies</span><span style="color:#666666;">.</span><span style="color:#80A665;">set</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">sidebar</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">leftMenuOpen</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">close</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">open</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#B8A965;">path</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$store</span><span style="color:#666666;">.</span><span style="color:#80A665;">commit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">toggleLeftMenu</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">leftMenuOpen</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">doResize</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#80A665;">doResize</span><span style="color:#666666;">(){</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">setTimeout</span><span style="color:#666666;">(</span><span style="color:#CB7676;">function</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#CB7676;">var</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ev</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">Event</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">resize</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">bubbles</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cancelable</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">:</span><span style="color:#4D9375;">false</span><span style="color:#666666;">});</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">          </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">dispatchEvent</span><span style="color:#666666;">(</span><span style="color:#BD976A;">ev</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span><span style="color:#4C9A91;">120</span><span style="color:#666666;">);</span><span style="color:#758575DD;">//不使用定时器没反应</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//有效, 而且提示event.initEvent方法已经过时(deprecated)</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//但是折线图左侧收缩/延伸会有抖动问题,需要调节定时器时间使比较不突兀</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/*setTimeout(function(){</span></span>
+<span class="line"><span style="color:#758575DD;">      if(document.createEvent) {</span></span>
+<span class="line"><span style="color:#758575DD;">          var event = document.createEvent(&quot;HTMLEvents&quot;);</span></span>
+<span class="line"><span style="color:#758575DD;">          event.initEvent(&quot;resize&quot;, true, true);</span></span>
+<span class="line"><span style="color:#758575DD;">          window.dispatchEvent(event);</span></span>
+<span class="line"><span style="color:#758575DD;">      } else if(document.createEventObject) {</span></span>
+<span class="line"><span style="color:#758575DD;">          window.fireEvent(&quot;onresize&quot;);</span></span>
+<span class="line"><span style="color:#758575DD;">      }</span></span>
+<span class="line"><span style="color:#758575DD;">  },120);*/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;"> </span><span style="color:#59873A;">toggleLeftMenu</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">Cookies</span><span style="color:#999999;">.</span><span style="color:#59873A;">set</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">sidebar</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">leftMenuOpen</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">close</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">open</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#998418;">path</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$store</span><span style="color:#999999;">.</span><span style="color:#59873A;">commit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">toggleLeftMenu</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">leftMenuOpen</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">doResize</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#59873A;">doResize</span><span style="color:#999999;">(){</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">setTimeout</span><span style="color:#999999;">(</span><span style="color:#AB5959;">function</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#AB5959;">var</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ev</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">Event</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">resize</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">bubbles</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cancelable</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">:</span><span style="color:#1E754F;">false</span><span style="color:#999999;">});</span></span>
+<span class="line"><span style="color:#393A34;">          </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">dispatchEvent</span><span style="color:#999999;">(</span><span style="color:#B07D48;">ev</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span><span style="color:#2F798A;">120</span><span style="color:#999999;">);</span><span style="color:#A0ADA0;">//不使用定时器没反应</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//有效, 而且提示event.initEvent方法已经过时(deprecated)</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//但是折线图左侧收缩/延伸会有抖动问题,需要调节定时器时间使比较不突兀</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/*setTimeout(function(){</span></span>
+<span class="line"><span style="color:#A0ADA0;">      if(document.createEvent) {</span></span>
+<span class="line"><span style="color:#A0ADA0;">          var event = document.createEvent(&quot;HTMLEvents&quot;);</span></span>
+<span class="line"><span style="color:#A0ADA0;">          event.initEvent(&quot;resize&quot;, true, true);</span></span>
+<span class="line"><span style="color:#A0ADA0;">          window.dispatchEvent(event);</span></span>
+<span class="line"><span style="color:#A0ADA0;">      } else if(document.createEventObject) {</span></span>
+<span class="line"><span style="color:#A0ADA0;">          window.fireEvent(&quot;onresize&quot;);</span></span>
+<span class="line"><span style="color:#A0ADA0;">      }</span></span>
+<span class="line"><span style="color:#A0ADA0;">  },120);*/</span></span>
+<span class="line"><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#999999;">},</span></span></code></pre></div><h2 id="地图缩放重叠问题" tabindex="-1">地图缩放重叠问题 <a class="header-anchor" href="#地图缩放重叠问题" aria-label="Permalink to &quot;地图缩放重叠问题&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/202303291527581.png" alt=""></p><p><a href="https://echarts.apache.org/zh/option.html#series-map.geoIndex" target="_blank" rel="noreferrer">Echart文档参考</a></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">geo</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">roam</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">map</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">china</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">aspectScale</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.75</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">zoom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">itemStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">normal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">shadowColor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#ddd</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">shadowOffsetX</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">shadowOffsetY</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">5</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">regions</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">南海诸岛</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">itemStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">areaColor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rgba(0, 10, 52, 1)</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">borderColor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">rgba(0, 10, 52, 1)</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">normal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#B8A965;">opacity</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">show</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">							</span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#009cc9</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">series</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">map</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">geoIndex</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//方案一：设置这个属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">label</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">normal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">show</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">textStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#666</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">emphasis</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">textStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">						</span><span style="color:#B8A965;">color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#fff</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">itemStyle</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">normal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">borderType</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">dashed</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#B8A965;">emphasis</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">areaColor</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">#3777DD</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">					</span><span style="color:#B8A965;">borderWidth</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.1</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">zoom</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1.1</span><span style="color:#666666;">,</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">map</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">china</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// //方案二：删除这个属性</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">geo</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">roam</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">map</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">china</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">aspectScale</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.75</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">zoom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">itemStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">normal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">shadowColor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#ddd</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">shadowOffsetX</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">shadowOffsetY</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">5</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">regions</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">南海诸岛</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">itemStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">areaColor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rgba(0, 10, 52, 1)</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">borderColor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">rgba(0, 10, 52, 1)</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">normal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#998418;">opacity</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">show</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">							</span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#009cc9</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">series</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">map</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line highlighted"><span style="color:#393A34;">			</span><span style="color:#998418;">geoIndex</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//方案一：设置这个属性</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">label</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">normal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">show</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">textStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#666</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">emphasis</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">textStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">						</span><span style="color:#998418;">color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#fff</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">itemStyle</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">normal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">borderType</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">dashed</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#998418;">emphasis</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">areaColor</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">#3777DD</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">					</span><span style="color:#998418;">borderWidth</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.1</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">zoom</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1.1</span><span style="color:#999999;">,</span></span>
+<span class="line highlighted"><span style="color:#393A34;">			</span><span style="color:#998418;">map</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">china</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// //方案二：删除这个属性</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,12),t=[o];function e(c,r,y,A,D,i){return n(),a("div",null,t)}const C=s(p,[["render",e]]);export{B as __pageData,C as default};
diff --git "a/assets/Problem_Graphical_Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md.fe67d408.lean.js" "b/assets/Problem_Graphical_Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md.fe67d408.lean.js"
new file mode 100644
index 00000000..d4a18f6f
--- /dev/null
+++ "b/assets/Problem_Graphical_Echarts\351\227\256\351\242\230\346\200\273\347\273\223.md.fe67d408.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const B=JSON.parse('{"title":"Echarts问题总结","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/Graphical/Echarts问题总结.md","filePath":"Problem/Graphical/Echarts问题总结.md"}'),p={name:"Problem/Graphical/Echarts问题总结.md"},o=l("",12),t=[o];function e(c,r,y,A,D,i){return n(),a("div",null,t)}const C=s(p,[["render",e]]);export{B as __pageData,C as default};
diff --git "a/assets/Problem_Nuxt3_Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md.e3bdda07.js" "b/assets/Problem_Nuxt3_Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md.e3bdda07.js"
new file mode 100644
index 00000000..4965b980
--- /dev/null
+++ "b/assets/Problem_Nuxt3_Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md.e3bdda07.js"
@@ -0,0 +1,73 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/Nuxt3/Nuxt3项目踩坑.md","filePath":"Problem/Nuxt3/Nuxt3项目踩坑.md"}'),p={name:"Problem/Nuxt3/Nuxt3项目踩坑.md"},o=l(`<h2 id="uncaught-typeerror-cannot-read-properties-of-undefined-reading-prototype" tabindex="-1">Uncaught TypeError: Cannot read properties of undefined (reading &#39;prototype&#39;) <a class="header-anchor" href="#uncaught-typeerror-cannot-read-properties-of-undefined-reading-prototype" aria-label="Permalink to &quot;Uncaught TypeError: Cannot read properties of undefined (reading &#39;prototype&#39;)&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-05-19-14-49-43.png" alt="2023-05-19-14-49-43"></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//uno.config.ts</span></span>
+<span class="line"><span style="color:#80A665;">shortcuts</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f-s-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">flex justify-start items-center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">]];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//uno.config.ts</span></span>
+<span class="line"><span style="color:#59873A;">shortcuts</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f-s-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">flex justify-start items-center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">]];</span></span></code></pre></div><ol><li>写在类名上不生效</li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">&lt;!--f-s-c 直接写在类名上不生效--&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hidden lg:f-c-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Test</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">&lt;!--f-s-c 直接写在类名上不生效--&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hidden lg:f-c-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Test</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><ol start="2"><li>写在 CSS 上报错</li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">nav</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Test</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">nav</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Test</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">// </span><span style="color:#4D9375;">f-s-c</span><span style="color:#DBD7CAEE;"> 报错；The \`xl:</span><span style="color:#4D9375;">f-c-c</span><span style="color:#DBD7CAEE;">\` class does not exist. If \`xl:</span><span style="color:#4D9375;">f-c-c</span><span style="color:#DBD7CAEE;">\` is </span><span style="color:#4D9375;">a</span><span style="color:#DBD7CAEE;"> custom class</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> make sure it is defined within </span><span style="color:#4D9375;">a</span><span style="color:#DBD7CAEE;"> \`@layer\` directive.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">nav</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  @</span><span style="color:#B8A965;">apply</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">hidden</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">lg</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">f-c-c</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">// </span><span style="color:#1E754F;">f-s-c</span><span style="color:#393A34;"> 报错；The \`xl:</span><span style="color:#1E754F;">f-c-c</span><span style="color:#393A34;">\` class does not exist. If \`xl:</span><span style="color:#1E754F;">f-c-c</span><span style="color:#393A34;">\` is </span><span style="color:#1E754F;">a</span><span style="color:#393A34;"> custom class</span><span style="color:#999999;">,</span><span style="color:#393A34;"> make sure it is defined within </span><span style="color:#1E754F;">a</span><span style="color:#393A34;"> \`@layer\` directive.</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">nav</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  @</span><span style="color:#998418;">apply</span><span style="color:#393A34;"> </span><span style="color:#998418;">hidden</span><span style="color:#393A34;"> </span><span style="color:#998418;">lg</span><span style="color:#999999;">:</span><span style="color:#393A34;">f-c-c</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><p>解决方法：断点后不写自定义的</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hidden lg:flex justify-center items-center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">Test</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hidden lg:flex justify-center items-center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">Test</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>总结：自定义的类名快捷键不能写在变体后面</p><h3 id="hidden-与自定义变体不能一起用" tabindex="-1">hidden 与自定义变体不能一起用 <a class="header-anchor" href="#hidden-与自定义变体不能一起用" aria-label="Permalink to &quot;hidden 与自定义变体不能一起用&quot;">​</a></h3><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//uno.config.ts</span></span>
+<span class="line"><span style="color:#80A665;">shortcuts</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f-s-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">flex justify-start items-center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f-c-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">flex justify-center items-center</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">],</span></span>
+<span class="line"><span style="color:#666666;">];</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//uno.config.ts</span></span>
+<span class="line"><span style="color:#59873A;">shortcuts</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f-s-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">flex justify-start items-center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f-c-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">flex justify-center items-center</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">],</span></span>
+<span class="line"><span style="color:#999999;">];</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">hidden xl:f-c-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">TEST</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">hidden xl:f-c-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">TEST</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><p>可以这样用</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">f-s-c xl:f-c-c</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">TEST</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">f-s-c xl:f-c-c</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">TEST</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="项目一直报-element-相关错误" tabindex="-1">项目一直报 Element 相关错误 <a class="header-anchor" href="#项目一直报-element-相关错误" aria-label="Permalink to &quot;项目一直报 Element 相关错误&quot;">​</a></h2><p><code>element-ui.js:1 Uncaught TypeError: Cannot read properties of undefined (reading &#39;prototype&#39;)</code><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-05-21-20-26-38.png" alt="2023-05-21-20-26-38"> 换浏览器后没报错，定位到可能是浏览器插件的原因，果然排除法找到是：YouTube 视频摘要 ChatGPT 生成-快速笔记 (中文版) 的问题！</p><h2 id="跨域问题" tabindex="-1">跨域问题 <a class="header-anchor" href="#跨域问题" aria-label="Permalink to &quot;跨域问题&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">defineNuxtConfig</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">/* ... */</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">nitro</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">devProxy</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/account/api</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">target</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">http://192.168.211.63/account/api</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">       </span><span style="color:#758575DD;">// target: &#39;http://192.168.211.63&#39;, 【不生效】 不同于 vite，这样配置到达 nginx 是 &#39;/&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">ws</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#B8A965;">changeOrigin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#59873A;">defineNuxtConfig</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">/* ... */</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">nitro</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">devProxy</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/account/api</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">target</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">http://192.168.211.63/account/api</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">       </span><span style="color:#A0ADA0;">// target: &#39;http://192.168.211.63&#39;, 【不生效】 不同于 vite，这样配置到达 nginx 是 &#39;/&#39;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">ws</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#998418;">changeOrigin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//业务请求</span></span>
+<span class="line"><span style="color:#CB7676;">async</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">getImgCode</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">await</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">useFetch</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/account/api/getImageCode</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">method</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">POST</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">body</span><span style="color:#666666;">:{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">data</span><span style="color:#666666;">.</span><span style="color:#BD976A;">data</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//业务请求</span></span>
+<span class="line"><span style="color:#AB5959;">async</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">getImgCode</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">await</span><span style="color:#393A34;"> </span><span style="color:#59873A;">useFetch</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/account/api/getImageCode</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">method</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">POST</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">body</span><span style="color:#999999;">:{},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">data</span><span style="color:#999999;">.</span><span style="color:#B07D48;">data</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="nuxt-simple-sitemap插件使用问题" tabindex="-1">nuxt-simple-sitemap插件使用问题 <a class="header-anchor" href="#nuxt-simple-sitemap插件使用问题" aria-label="Permalink to &quot;nuxt-simple-sitemap插件使用问题&quot;">​</a></h2><p>打包时报错：解析到错误 URL</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">nitro</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">prerender</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">crawlLinks</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#80A665;">routes</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//去掉： ,&#39;sitemap.xml&#39;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">nitro</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">prerender</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">crawlLinks</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#59873A;">routes</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//去掉： ,&#39;sitemap.xml&#39;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><blockquote><p>测试环境能访问<code>sitemap.xml</code> 页面 但是线上环境访问不到，报相关错误：<code>/__sitemap__/routes.json</code> ，需要在 nginx 配置 IP 和主机名的传送。</p></blockquote><div class="language-zsh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">zsh</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;"># nginx.conf</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#80A665;">proxy_set_header</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">X-Real-IP</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$remote_addr</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#80A665;">proxy_set_header</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">Host</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">$host</span><span style="color:#666666;">;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">  </span><span style="color:#A0ADA0;"># nginx.conf</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#59873A;">proxy_set_header</span><span style="color:#393A34;"> </span><span style="color:#B56959;">X-Real-IP</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$remote_addr</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#59873A;">proxy_set_header</span><span style="color:#393A34;"> </span><span style="color:#B56959;">Host</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">$host</span><span style="color:#999999;">;</span></span></code></pre></div>`,26),e=[o];function t(c,r,y,i,d,A){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{E as __pageData,u as default};
diff --git "a/assets/Problem_Nuxt3_Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md.e3bdda07.lean.js" "b/assets/Problem_Nuxt3_Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md.e3bdda07.lean.js"
new file mode 100644
index 00000000..0f181a96
--- /dev/null
+++ "b/assets/Problem_Nuxt3_Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.md.e3bdda07.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/Nuxt3/Nuxt3项目踩坑.md","filePath":"Problem/Nuxt3/Nuxt3项目踩坑.md"}'),p={name:"Problem/Nuxt3/Nuxt3项目踩坑.md"},o=l("",26),e=[o];function t(c,r,y,i,d,A){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{E as __pageData,u as default};
diff --git "a/assets/Problem_VitePress_VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md.007e02bc.js" "b/assets/Problem_VitePress_VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md.007e02bc.js"
new file mode 100644
index 00000000..34af7d88
--- /dev/null
+++ "b/assets/Problem_VitePress_VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md.007e02bc.js"
@@ -0,0 +1,307 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"VitePress踩坑记录","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/VitePress/VitePress踩坑记录.md","filePath":"Problem/VitePress/VitePress踩坑记录.md"}'),p={name:"Problem/VitePress/VitePress踩坑记录.md"},o=l(`<h1 id="vitepress踩坑记录" tabindex="-1">VitePress踩坑记录 <a class="header-anchor" href="#vitepress踩坑记录" aria-label="Permalink to &quot;VitePress踩坑记录&quot;">​</a></h1><h2 id="err-invalid-file-url-host" tabindex="-1">ERR_INVALID_FILE_URL_HOST <a class="header-anchor" href="#err-invalid-file-url-host" aria-label="Permalink to &quot;ERR_INVALID_FILE_URL_HOST&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">DANGER</p><p>执行打包命令时，出现此错误 <code>TypeError [ERR_INVALID_FILE_URL_HOST]: File URL host must be &quot;localhost&quot; or empty on darwin</code></p></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302041941600.png" alt=""></p><h3 id="形成原因-全局替换时粗心大意造成img-src属性多了个" tabindex="-1">形成原因：全局替换时粗心大意造成img src属性多了个&#39;/&#39; <a class="header-anchor" href="#形成原因-全局替换时粗心大意造成img-src属性多了个" aria-label="Permalink to &quot;形成原因：全局替换时粗心大意造成img src属性多了个&#39;/&#39;&quot;">​</a></h3><h3 id="解决" tabindex="-1">解决 <a class="header-anchor" href="#解决" aria-label="Permalink to &quot;解决&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>刚开始我只能猜到某个文件路径有问题 ，又不知道那个文件有问题，最后用上了 <strong>排除法</strong> 逐个移除文章文件夹最终才定位到出问题的文档。 虽然问题解决的的过程有点费劲，不得不说当问题搞得人想撞墙的时候，无疑也是一个不错的思路和方法！！！</p></div><p>删除多余的&#39;/&#39;就好了，自己解决自己的 <strong><a href="https://github.com/vuejs/vitepress/issues/1895" target="_blank" rel="noreferrer">issues</a></strong> ！！！</p><h2 id="实现自动生成文章左侧侧边栏" tabindex="-1">实现自动生成文章左侧侧边栏 <a class="header-anchor" href="#实现自动生成文章左侧侧边栏" aria-label="Permalink to &quot;实现自动生成文章左侧侧边栏&quot;">​</a></h2><h3 id="痛点及需求" tabindex="-1">痛点及需求 <a class="header-anchor" href="#痛点及需求" aria-label="Permalink to &quot;痛点及需求&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>​ 每次添加文章过程：对应的目录下添加.md文， 修改<code>themeConfig的sidebar属性</code>，给对象加上新增的文章映射</p><p>​ 添加的文章少还好，多了的话就显得很麻烦不够优雅，所有想写个脚本按照目录结构自动生产对应的映射关系。</p></div><h3 id="想法及实现" tabindex="-1">想法及实现 <a class="header-anchor" href="#想法及实现" aria-label="Permalink to &quot;想法及实现&quot;">​</a></h3><h4 id="在package-json添加脚本执行命令" tabindex="-1">在package.json添加脚本执行命令 <a class="header-anchor" href="#在package-json添加脚本执行命令" aria-label="Permalink to &quot;在package.json添加脚本执行命令&quot;">​</a></h4><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302052305259.png" alt="image-20230205230548188"></p><h4 id="在博客根目录新建scripts目录并创建文件getsidebar-ts-添加如下代码" tabindex="-1">在博客根目录新建<code>scripts</code>目录并创建文件<code>getSidebar.ts</code>，添加如下代码 <a class="header-anchor" href="#在博客根目录新建scripts目录并创建文件getsidebar-ts-添加如下代码" aria-label="Permalink to &quot;在博客根目录新建\`scripts\`目录并创建文件\`getSidebar.ts\`，添加如下代码&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">/********   读取 zerdocs/docs/ 下的所有文件夹，自动生成侧边栏sidebar.ts文件   ***********/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">fs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">require</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">path</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarObj</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//生成一级分组 </span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">topDirArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readdirSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isArticleDir</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#BD976A;">topDirArr</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">item</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">item</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebars</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepGetFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 读取 docs 目录下的所有文件夹</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarlist</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepGenerateSidebar</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebars</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//写入到docs/.vitepress/sidebar/index.ts</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//把数组里面的每个对象合并到一个对象里面</span></span>
+<span class="line"><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebar</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarlist</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">assign</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{})</span></span>
+<span class="line"><span style="color:#BD976A;">Object</span><span style="color:#666666;">.</span><span style="color:#80A665;">entries</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">).</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">(([</span><span style="color:#BD976A;">key</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">items</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyArr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">splitPath</span><span style="color:#666666;">(</span><span style="color:#BD976A;">key</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">keyArr</span><span style="color:#666666;">[</span><span style="color:#BD976A;">keyArr</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">keyArr</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">]){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">keyArr</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">].</span><span style="color:#80A665;">push</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">collapsible</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">collapsed</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">items</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">/</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">keyArr</span><span style="color:#666666;">[</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">]</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">collapsible</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">collapsed</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">items</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">JSON</span><span style="color:#666666;">.</span><span style="color:#80A665;">stringify</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebarObj</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">null</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">2</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#758575DD;">//把sidebarStr写入到docs/.vitepress/sidebar/index.ts</span></span>
+<span class="line"><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarPath</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs/.vitepress/sidebar/index.ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//没有则创建</span></span>
+<span class="line"><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">existsSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebarPath</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">mkdirSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs/.vitepress/sidebar</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">writeFileSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">sidebarPath</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">export default </span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">sidebarStr</span><span style="color:#666666;">}</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//判断是否是文件夹</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isArticleDir</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">exclude</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">public</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">index.md</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">vite.config.ts</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;">  </span><span style="color:#758575DD;">//排除的文件夹</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">exclude</span><span style="color:#666666;">.</span><span style="color:#80A665;">includes</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">&amp;&amp;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">.</span><span style="color:#80A665;">startsWith</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">.</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">splitPath</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">split</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">!==</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepGetFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">backList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">list</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">readdirSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">).</span><span style="color:#80A665;">filter</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">isArticleDir</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">index</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">list</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">list</span><span style="color:#666666;">[</span><span style="color:#BD976A;">index</span><span style="color:#666666;">])</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">fs</span><span style="color:#666666;">.</span><span style="color:#80A665;">statSync</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">).</span><span style="color:#80A665;">isDirectory</span><span style="color:#666666;">())</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">backList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">backList</span><span style="color:#666666;">.</span><span style="color:#80A665;">concat</span><span style="color:#666666;">(</span><span style="color:#80A665;">deepGetFile</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">      </span><span style="color:#758575DD;">//输出相对路径</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">item</span><span style="color:#666666;">.</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#BD976A;">path</span><span style="color:#666666;">.</span><span style="color:#80A665;">resolve</span><span style="color:#666666;">(</span><span style="color:#BD976A;">__dirname</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">../docs</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">),</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\\\</span><span style="color:#C98A7D99;">/</span><span style="color:#4D9375;">g</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">backList</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">backList</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#758575DD;">// 生成侧边栏</span></span>
+<span class="line"><span style="color:#CB7676;">function</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">deepGenerateSidebar</span><span style="color:#666666;">(</span><span style="color:#BD976A;">arr</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//递归按照最后一级目录生成侧边栏</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebar</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">sidebars</span><span style="color:#666666;">.</span><span style="color:#80A665;">forEach</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">const</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">...</span><span style="color:#BD976A;">rest</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">splitPath</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">])</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dir</span><span style="color:#666666;">].</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarList</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[]</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">//按最后一级目录分组</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">for</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">key</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">in</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pathPice</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebar</span><span style="color:#666666;">[</span><span style="color:#BD976A;">key</span><span style="color:#666666;">].</span><span style="color:#80A665;">map</span><span style="color:#666666;">((</span><span style="color:#BD976A;">item</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">splitPath</span><span style="color:#666666;">(</span><span style="color:#BD976A;">item</span><span style="color:#666666;">))</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//如果pathPice[pathPice.length-1]相同,则合并</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">pathPice</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pathPice</span><span style="color:#666666;">.</span><span style="color:#80A665;">reduce</span><span style="color:#666666;">((</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">dirStr</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">0</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">).</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// /problem/vueproject/</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">[</span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#B8A965;">length</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">-</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#666666;">].</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\.</span><span style="color:#C4704F;">md</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">link</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">cur</span><span style="color:#666666;">.</span><span style="color:#80A665;">join</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">/</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">).</span><span style="color:#80A665;">replace</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\.</span><span style="color:#C4704F;">md</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&#39;&#39;</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dirStr</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dirStr</span><span style="color:#666666;">]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">?</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[...</span><span style="color:#BD976A;">pre</span><span style="color:#666666;">[</span><span style="color:#BD976A;">dirStr</span><span style="color:#666666;">],</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">link</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}]</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">text</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">link</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}]</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">pre</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">sidebarList</span><span style="color:#666666;">.</span><span style="color:#80A665;">push</span><span style="color:#666666;">(</span><span style="color:#BD976A;">pathPice</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">sidebarList</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">/********   读取 zerdocs/docs/ 下的所有文件夹，自动生成侧边栏sidebar.ts文件   ***********/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">fs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">require</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">path</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarObj</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//生成一级分组 </span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">topDirArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readdirSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isArticleDir</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#B07D48;">topDirArr</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">/</span><span style="color:#999999;">\${</span><span style="color:#B56959;">item</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">/</span><span style="color:#999999;">\${</span><span style="color:#B56959;">item</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebars</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepGetFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 读取 docs 目录下的所有文件夹</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarlist</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepGenerateSidebar</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebars</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//写入到docs/.vitepress/sidebar/index.ts</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//把数组里面的每个对象合并到一个对象里面</span></span>
+<span class="line"><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebar</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarlist</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">assign</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#999999;">{})</span></span>
+<span class="line"><span style="color:#B07D48;">Object</span><span style="color:#999999;">.</span><span style="color:#59873A;">entries</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">).</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">(([</span><span style="color:#B07D48;">key</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">items</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyArr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">splitPath</span><span style="color:#999999;">(</span><span style="color:#B07D48;">key</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">keyArr</span><span style="color:#999999;">[</span><span style="color:#B07D48;">keyArr</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">/</span><span style="color:#999999;">\${</span><span style="color:#B56959;">keyArr</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">]){</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">/</span><span style="color:#999999;">\${</span><span style="color:#B56959;">keyArr</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">].</span><span style="color:#59873A;">push</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">collapsible</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">collapsed</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">items</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">[</span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">/</span><span style="color:#999999;">\${</span><span style="color:#B56959;">keyArr</span><span style="color:#999999;">[</span><span style="color:#2F798A;">0</span><span style="color:#999999;">]</span><span style="color:#999999;">}</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">collapsible</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">collapsed</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">items</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">JSON</span><span style="color:#999999;">.</span><span style="color:#59873A;">stringify</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebarObj</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">null</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">2</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#A0ADA0;">//把sidebarStr写入到docs/.vitepress/sidebar/index.ts</span></span>
+<span class="line"><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarPath</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs/.vitepress/sidebar/index.ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//没有则创建</span></span>
+<span class="line"><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">existsSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebarPath</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">mkdirSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs/.vitepress/sidebar</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">writeFileSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">sidebarPath</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">export default </span><span style="color:#999999;">\${</span><span style="color:#B56959;">sidebarStr</span><span style="color:#999999;">}</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//判断是否是文件夹</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isArticleDir</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">exclude</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">public</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">index.md</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">vite.config.ts</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">]</span><span style="color:#393A34;">  </span><span style="color:#A0ADA0;">//排除的文件夹</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">exclude</span><span style="color:#999999;">.</span><span style="color:#59873A;">includes</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">&amp;&amp;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">.</span><span style="color:#59873A;">startsWith</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">.</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">splitPath</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">split</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">!==</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepGetFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">backList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">list</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">readdirSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">).</span><span style="color:#59873A;">filter</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">isArticleDir</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">index</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">list</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">list</span><span style="color:#999999;">[</span><span style="color:#B07D48;">index</span><span style="color:#999999;">])</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">fs</span><span style="color:#999999;">.</span><span style="color:#59873A;">statSync</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">).</span><span style="color:#59873A;">isDirectory</span><span style="color:#999999;">())</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">backList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">backList</span><span style="color:#999999;">.</span><span style="color:#59873A;">concat</span><span style="color:#999999;">(</span><span style="color:#59873A;">deepGetFile</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">      </span><span style="color:#A0ADA0;">//输出相对路径</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">item</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">item</span><span style="color:#999999;">.</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B07D48;">path</span><span style="color:#999999;">.</span><span style="color:#59873A;">resolve</span><span style="color:#999999;">(</span><span style="color:#B07D48;">__dirname</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">../docs</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">),</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\\\</span><span style="color:#B5695999;">/</span><span style="color:#1E754F;">g</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">backList</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">backList</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">// 生成侧边栏</span></span>
+<span class="line"><span style="color:#AB5959;">function</span><span style="color:#393A34;"> </span><span style="color:#59873A;">deepGenerateSidebar</span><span style="color:#999999;">(</span><span style="color:#B07D48;">arr</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//递归按照最后一级目录生成侧边栏</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebar</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">{}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">sidebars</span><span style="color:#999999;">.</span><span style="color:#59873A;">forEach</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">const</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">...</span><span style="color:#B07D48;">rest</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#59873A;">splitPath</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">])</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dir</span><span style="color:#999999;">].</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarList</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#999999;">[]</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">//按最后一级目录分组</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">for</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">key</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">in</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pathPice</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebar</span><span style="color:#999999;">[</span><span style="color:#B07D48;">key</span><span style="color:#999999;">].</span><span style="color:#59873A;">map</span><span style="color:#999999;">((</span><span style="color:#B07D48;">item</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#59873A;">splitPath</span><span style="color:#999999;">(</span><span style="color:#B07D48;">item</span><span style="color:#999999;">))</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//如果pathPice[pathPice.length-1]相同,则合并</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">pathPice</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pathPice</span><span style="color:#999999;">.</span><span style="color:#59873A;">reduce</span><span style="color:#999999;">((</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">dirStr</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">0</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#2F798A;">1</span><span style="color:#999999;">).</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// /problem/vueproject/</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">[</span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#998418;">length</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">-</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#999999;">].</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\.</span><span style="color:#AB5E3F;">md</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">link</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">cur</span><span style="color:#999999;">.</span><span style="color:#59873A;">join</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">/</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">).</span><span style="color:#59873A;">replace</span><span style="color:#999999;">(</span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\.</span><span style="color:#AB5E3F;">md</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&#39;&#39;</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dirStr</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dirStr</span><span style="color:#999999;">]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">?</span><span style="color:#393A34;"> </span><span style="color:#999999;">[...</span><span style="color:#B07D48;">pre</span><span style="color:#999999;">[</span><span style="color:#B07D48;">dirStr</span><span style="color:#999999;">],</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">link</span><span style="color:#393A34;"> </span><span style="color:#999999;">}]</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">text</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">link</span><span style="color:#393A34;"> </span><span style="color:#999999;">}]</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">pre</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span><span style="color:#393A34;"> </span><span style="color:#999999;">{})</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">sidebarList</span><span style="color:#999999;">.</span><span style="color:#59873A;">push</span><span style="color:#999999;">(</span><span style="color:#B07D48;">pathPice</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">sidebarList</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="vitepress添加本地搜索功能" tabindex="-1">VitePress添加本地搜索功能 <a class="header-anchor" href="#vitepress添加本地搜索功能" aria-label="Permalink to &quot;VitePress添加本地搜索功能&quot;">​</a></h2><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>折腾了三遍Algolia都没能添加上搜索功能，最后在找到了这个<a href="https://github.com/vuejs/vitepress/issues/670" target="_blank" rel="noreferrer">issus</a>里大佬提供的解决方案，成功添加上了本地搜索功能。</p></div><h3 id="安装插件" tabindex="-1">安装插件 <a class="header-anchor" href="#安装插件" aria-label="Permalink to &quot;安装插件&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">npm</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">i</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">vitepress-plugin-search</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">markdown-it</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D;">flexsearch</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">-D</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">npm</span><span style="color:#393A34;"> </span><span style="color:#B56959;">i</span><span style="color:#393A34;"> </span><span style="color:#B56959;">vitepress-plugin-search</span><span style="color:#393A34;"> </span><span style="color:#B56959;">markdown-it</span><span style="color:#393A34;"> </span><span style="color:#B56959;">flexsearch</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">-D</span></span></code></pre></div><h3 id="添加和配置插件" tabindex="-1">添加和配置插件 <a class="header-anchor" href="#添加和配置插件" aria-label="Permalink to &quot;添加和配置插件&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">坑点</p><p>1.<a href="https://github.com/emersonbottero/vitepress-plugin-search#readme" target="_blank" rel="noreferrer">README</a> 没写在哪个目录下存放<code>vite.config.ts</code>，依据经验放在根目录下不管用，放在<code>.vitepress</code>也不生效，最后挨个试才发现需要放在<code>docs</code></p><p>2.示例没有引入<code>flexSearchIndexOptions</code>，需要手动从<code>flexsearch</code>中引入</p><p>3.引入后发现之前搜索框样式没了，需要在<code>.vitepress/theme/styles/index.css</code>下重新覆盖样式</p></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302052330956.png" alt="image-20230205233032922"></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#758575DD;">//vite.config.ts</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">SearchPlugin</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vitepress-plugin-search</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">defineConfig</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vite</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">flexSearchIndexOptions</span><span style="color:#DBD7CAEE;">   </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">flexsearch</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//default options</span></span>
+<span class="line"><span style="color:#CB7676;">var </span><span style="color:#BD976A;">options</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  ...</span><span style="color:#BD976A;">flexSearchIndexOptions</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">previewLength</span><span style="color:#666666;">: </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">,</span><span style="color:#758575DD;">//搜索结果预览长度</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">buttonLabel</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">搜索</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">placeholder</span><span style="color:#666666;">: </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">情输入关键词</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">defineConfig</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#B8A965;">plugins</span><span style="color:#666666;">: [</span><span style="color:#80A665;">SearchPlugin</span><span style="color:#666666;">(</span><span style="color:#BD976A;">options</span><span style="color:#666666;">)],</span></span>
+<span class="line"><span style="color:#666666;">});</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#A0ADA0;">//vite.config.ts</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">SearchPlugin</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vitepress-plugin-search</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">defineConfig</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vite</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">flexSearchIndexOptions</span><span style="color:#393A34;">   </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">flexsearch</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//default options</span></span>
+<span class="line"><span style="color:#AB5959;">var </span><span style="color:#B07D48;">options</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  ...</span><span style="color:#B07D48;">flexSearchIndexOptions</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">previewLength</span><span style="color:#999999;">: </span><span style="color:#2F798A;">100</span><span style="color:#999999;">,</span><span style="color:#A0ADA0;">//搜索结果预览长度</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">buttonLabel</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">搜索</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">placeholder</span><span style="color:#999999;">: </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">情输入关键词</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#59873A;">defineConfig</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#998418;">plugins</span><span style="color:#999999;">: [</span><span style="color:#59873A;">SearchPlugin</span><span style="color:#999999;">(</span><span style="color:#B07D48;">options</span><span style="color:#999999;">)],</span></span>
+<span class="line"><span style="color:#999999;">});</span></span></code></pre></div><h3 id="样式覆盖" tabindex="-1">样式覆盖 <a class="header-anchor" href="#样式覆盖" aria-label="Permalink to &quot;样式覆盖&quot;">​</a></h3><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">DocSearch-Button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">align-items</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">center</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">margin</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">32</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">32</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">background</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">transition</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> border-color </span><span style="color:#4C9A91;">0.25</span><span style="color:#CB7676;">s</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">media</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#B8A965;">min-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">768</span><span style="color:#CB7676;">px</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">DocSearch-Button</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">justify-content</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">flex-start</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">1</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">solid</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">transparent</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">8</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">padding</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">12</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#CB7676;">%</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">40</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">background-color</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#B8A965;">var</span><span style="color:#666666;">(</span><span style="color:#BD976A;">--vp-c-bg-alt</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">@</span><span style="color:#4D9375;">media</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#B8A965;">max-width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">768</span><span style="color:#CB7676;">px</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">DocSearch-Button-Keys</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">display</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">.</span><span style="color:#BD976A;">VPNavBarHamburger</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">height</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">32</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">!important</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">32</span><span style="color:#CB7676;">px</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">!important</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">border-radius</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">4</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">DocSearch-Button</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">align-items</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">center</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">margin</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">32</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">32</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">background</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">transition</span><span style="color:#999999;">:</span><span style="color:#393A34;"> border-color </span><span style="color:#2F798A;">0.25</span><span style="color:#AB5959;">s</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">media</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#998418;">min-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">768</span><span style="color:#AB5959;">px</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">DocSearch-Button</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">justify-content</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">flex-start</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">1</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">solid</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">transparent</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">8</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">padding</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">12</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#AB5959;">%</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">40</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">background-color</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#998418;">var</span><span style="color:#999999;">(</span><span style="color:#B07D48;">--vp-c-bg-alt</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">@</span><span style="color:#1E754F;">media</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#998418;">max-width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">768</span><span style="color:#AB5959;">px</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">DocSearch-Button-Keys</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">display</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">.</span><span style="color:#B07D48;">VPNavBarHamburger</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">height</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">32</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">!important</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">32</span><span style="color:#AB5959;">px</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">!important</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">border-radius</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">4</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,26),e=[o];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Problem_VitePress_VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md.007e02bc.lean.js" "b/assets/Problem_VitePress_VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md.007e02bc.lean.js"
new file mode 100644
index 00000000..5012dc3f
--- /dev/null
+++ "b/assets/Problem_VitePress_VitePress\350\270\251\345\235\221\350\256\260\345\275\225.md.007e02bc.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"VitePress踩坑记录","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/VitePress/VitePress踩坑记录.md","filePath":"Problem/VitePress/VitePress踩坑记录.md"}'),p={name:"Problem/VitePress/VitePress踩坑记录.md"},o=l("",26),e=[o];function t(c,r,y,A,D,i){return n(),a("div",null,e)}const C=s(p,[["render",t]]);export{E as __pageData,C as default};
diff --git "a/assets/Problem_VitePress_VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md.d7553dcf.js" "b/assets/Problem_VitePress_VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md.d7553dcf.js"
new file mode 100644
index 00000000..9911c64a
--- /dev/null
+++ "b/assets/Problem_VitePress_VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md.d7553dcf.js"
@@ -0,0 +1,5 @@
+import{_ as s,o as e,c as a,Q as o}from"./chunks/framework.c53372a0.js";const _=JSON.parse('{"title":"VuePress踩坑记录","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/VitePress/VuePress踩坑记录.md","filePath":"Problem/VitePress/VuePress踩坑记录.md"}'),t={name:"Problem/VitePress/VuePress踩坑记录.md"},n=o(`<h1 id="vuepress踩坑记录" tabindex="-1">VuePress踩坑记录 <a class="header-anchor" href="#vuepress踩坑记录" aria-label="Permalink to &quot;VuePress踩坑记录&quot;">​</a></h1><h2 id="坑点一、自定义目录不能根据视口固定" tabindex="-1">坑点一、自定义目录不能根据视口固定 <a class="header-anchor" href="#坑点一、自定义目录不能根据视口固定" aria-label="Permalink to &quot;坑点一、自定义目录不能根据视口固定&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">巨坑</p><p>找了好多博客参考，没发现有相关的问题，挠破头皮都没想明白啥原因，还好碰到一篇博客解决了疑惑</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>参考博客：<a href="https://www.jianshu.com/p/238ccd35fa6d?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation" target="_blank" rel="noreferrer">position: fixed; 不相对于屏幕视口定位</a></p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><strong>产生原因</strong>：当一个元素position特性值设置为fixed时，如果该元素的先祖容器中存在transform特性值为非none的元素，则</p><p><code>position: fixed; </code>将相对于该先祖容器定位！！！ 最后发现祖先元素有<code>transform: translateY(0px);</code>这行代码在作怪!!</p></div><p><strong>解决方法</strong>：自定义样式覆盖就好啦</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">page</span><span style="color:#CB7676;">&gt;</span><span style="color:#4D9375;">section</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">transform</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">none</span><span style="color:#4D9375;">!important</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">page</span><span style="color:#AB5959;">&gt;</span><span style="color:#1E754F;">section</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">transform</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">none</span><span style="color:#1E754F;">!important</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div><h2 id="坑点二、引用的gitee图床图片没显示" tabindex="-1">坑点二、引用的Gitee图床图片没显示 <a class="header-anchor" href="#坑点二、引用的gitee图床图片没显示" aria-label="Permalink to &quot;坑点二、引用的Gitee图床图片没显示&quot;">​</a></h2><blockquote><p>有人说是图床的问题、防盗链的问题，最后才发现自己把图床项目设为私有的项目了，重新设为开源成功解决</p></blockquote><h2 id="坑点三、hexo博客源码没有备份-误点vscode放弃所有更改并且回退版本" tabindex="-1">坑点三、Hexo博客源码没有备份，误点VsCode<code>放弃所有更改并且回退版本</code> <a class="header-anchor" href="#坑点三、hexo博客源码没有备份-误点vscode放弃所有更改并且回退版本" aria-label="Permalink to &quot;坑点三、Hexo博客源码没有备份，误点VsCode\`放弃所有更改并且回退版本\`&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">天坑</p><p>因学习配置博客用git action来自动化部署，配置完后发现打包报错，搞了好久没办法解决。 本来想执行<code>git checkout .</code>，看到VsCode有个快捷按钮，由于之前没有备份博客源码，点了一下直接回到解放前！</p></div><div class="tip custom-block"><p class="custom-block-title">领悟</p><p>来到了新的阵地VuePress折腾，学到了码农必备技能------备份</p></div>`,12),l=[n];function p(c,r,i,d,m,u){return e(),a("div",null,l)}const y=s(t,[["render",p]]);export{_ as __pageData,y as default};
diff --git "a/assets/Problem_VitePress_VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md.d7553dcf.lean.js" "b/assets/Problem_VitePress_VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md.d7553dcf.lean.js"
new file mode 100644
index 00000000..fc9525b3
--- /dev/null
+++ "b/assets/Problem_VitePress_VuePress\350\270\251\345\235\221\350\256\260\345\275\225.md.d7553dcf.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as e,c as a,Q as o}from"./chunks/framework.c53372a0.js";const _=JSON.parse('{"title":"VuePress踩坑记录","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/VitePress/VuePress踩坑记录.md","filePath":"Problem/VitePress/VuePress踩坑记录.md"}'),t={name:"Problem/VitePress/VuePress踩坑记录.md"},n=o("",12),l=[n];function p(c,r,i,d,m,u){return e(),a("div",null,l)}const y=s(t,[["render",p]]);export{_ as __pageData,y as default};
diff --git "a/assets/Problem_VueProject_Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md.5d32b46a.js" "b/assets/Problem_VueProject_Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md.5d32b46a.js"
new file mode 100644
index 00000000..aac13ec7
--- /dev/null
+++ "b/assets/Problem_VueProject_Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md.5d32b46a.js"
@@ -0,0 +1,405 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"Vue项目踩坑一","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/VueProject/Vue项目踩坑一.md","filePath":"Problem/VueProject/Vue项目踩坑一.md"}'),p={name:"Problem/VueProject/Vue项目踩坑一.md"},o=l(`<h1 id="vue项目踩坑一" tabindex="-1">Vue项目踩坑一 <a class="header-anchor" href="#vue项目踩坑一" aria-label="Permalink to &quot;Vue项目踩坑一&quot;">​</a></h1><h2 id="webpack-bundle-analyzer插件" tabindex="-1"><a href="https://github.com/webpack-contrib/webpack-bundle-analyzer" target="_blank" rel="noreferrer">webpack-bundle-analyzer</a>插件 <a class="header-anchor" href="#webpack-bundle-analyzer插件" aria-label="Permalink to &quot;[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)插件&quot;">​</a></h2><p>安装后使用完把<code>--report</code>参数去掉，还是会给你生成打包文件，并会提示8888端口被占用，</p><p>需要在<code>vue.config.js</code>注释插件的使用，才能不被影响</p><h2 id="点击弹窗父子传值成功-但是数据没有展示" tabindex="-1">点击弹窗父子传值成功，但是数据没有展示 <a class="header-anchor" href="#点击弹窗父子传值成功-但是数据没有展示" aria-label="Permalink to &quot;点击弹窗父子传值成功，但是数据没有展示&quot;">​</a></h2><blockquote><p>恰巧性能优化，后端改动了大量的关联关系，刚开始以为后端改动数据层级嵌套太深vue丢失了响应式的原因，</p><p>最后才发现是前端element-ui<strong>全局引入</strong>改为<strong>按需引入</strong>, <code>DescriptionsItem </code>组件漏写了(没有警告、报错提示，巨坑)</p></blockquote><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-dialog</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">:title</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">title</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">:visible</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">visible</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;">:before-close</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">close</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">:close-on-click-modal</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">false</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">    </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">   </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-descriptions</span><span style="color:#DBD7CAEE;">   </span><span style="color:#BD976A;font-style:italic;">border</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#758575DD;">&lt;!--在main.js漏了导入并使用DescriptionsItem--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-descriptions-item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">label</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ID</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{accountInfo.id}} </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-descriptions-item</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-descriptions-item</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">label</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">name</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;"> {{accountInfo.name}} </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-descriptions-item</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-descriptions</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">el-dialog</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-dialog</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">:title</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">title</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">:visible</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">visible</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#B07D48;">:before-close</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">close</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">:close-on-click-modal</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">false</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">    </span></span>
+<span class="line"><span style="color:#393A34;">   </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-descriptions</span><span style="color:#393A34;">   </span><span style="color:#B07D48;font-style:italic;">border</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A0ADA0;">&lt;!--在main.js漏了导入并使用DescriptionsItem--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-descriptions-item</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">label</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ID</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{accountInfo.id}} </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-descriptions-item</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-descriptions-item</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">label</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">name</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;"> {{accountInfo.name}} </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-descriptions-item</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-descriptions</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">el-dialog</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="确定-按钮点击失效问题" tabindex="-1">&#39;确定&#39;按钮点击失效问题 <a class="header-anchor" href="#确定-按钮点击失效问题" aria-label="Permalink to &quot;&#39;确定&#39;按钮点击失效问题&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192142529.png" alt="image-20230219214203987"></p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">div</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text-update-wrap</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text-show</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">v-if</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">!isEditing</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">single-overflow text-val</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">:style</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">{ &#39;max-width&#39;: maxWidth }</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#BD976A;">:title</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#666666;">&gt;</span><span style="color:#DBD7CAEE;">{{ text }}</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">span</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">el-icon-edit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">@click</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">switchToEdit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">p</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">text-edit</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">v-else</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">el-input</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">v-model</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputVal</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">ref</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">inputRef</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">:placeholder</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">&#39;请输入&#39; + name</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">size</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">mini</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">clearable</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">el-input</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">       </span><span style="color:#758575DD;">&lt;!-- @blur=&#39;cancelUpdate&#39; 事件比confirmUpdate先执行，导致确定按钮事件没触发--&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">title</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">确定</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">:class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">loading ? &#39;el-icon-loading&#39; : &#39;el-icon-circle-check&#39;</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">@click</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">confirmUpdate</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">span</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">title</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">取消</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">el-icon-circle-close</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">@click</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">cancelEdit</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#BD976A;">v-if</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">!loading</span><span style="color:#C98A7D99;">&quot;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">span</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">p</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">div</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">export</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">default</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">UpdateText</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">props</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">textVal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">name</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">名称</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">maxWidth</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">200px</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">id</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">type</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">String</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#B8A965;">default</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">data</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#4D9375;">return</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">loading</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">isEditing</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">inputVal</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#B8A965;">text</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">textVal</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">computed</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">watch</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">components</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#B8A965;">methods</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//切换到输入框模式</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">switchToEdit</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inputVal</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">textVal</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEditing</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$nextTick</span><span style="color:#666666;">(()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$refs</span><span style="color:#666666;">.</span><span style="color:#BD976A;">inputRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">focus</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">cancelEdit</span><span style="color:#666666;">(){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEditing</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span><span style="color:#DBD7CAEE;">	</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//确定更新</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	   </span><span style="color:#80A665;">confirmUpdate</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inputVal</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">,</span><span style="color:#BD976A;">id</span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inputVal</span><span style="color:#666666;">.</span><span style="color:#80A665;">trim</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;&quot;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$message</span><span style="color:#666666;">.</span><span style="color:#80A665;">error</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">不能为空</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#4D9375;">return</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">value</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">===</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">textVal</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEditing</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#4D9375;">return</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">loading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#4D9375;">if</span><span style="color:#666666;">(</span><span style="color:#BD976A;">id</span><span style="color:#666666;">){</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">confirm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">id</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span><span style="color:#4D9375;">else</span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">        </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">$emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">confirm</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">value</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#80A665;">successUpdate</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#CB7676;">let</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inputVal</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">name</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">loading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">text</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">inputVal</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">isEditing</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$notify</span><span style="color:#666666;">.</span><span style="color:#80A665;">success</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">修改成功</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">//失败</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#80A665;">failUpdate</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">loading</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">false</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">      </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$notify</span><span style="color:#666666;">.</span><span style="color:#80A665;">error</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">\${</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#C98A7D;">name</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">修改失败</span><span style="color:#C98A7D99;">\`</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">created</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">		</span><span style="color:#758575DD;">//解决方案：不使用@blur, 监听焦点不在此组件时，才取消编辑</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">click</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#4D9375;">if</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">(</span><span style="color:#CB7676;">!</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$el</span><span style="color:#666666;">.</span><span style="color:#80A665;">contains</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">target</span><span style="color:#666666;">))</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">				</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">cancelEdit</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">			</span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#666666;">})</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">div</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text-update-wrap</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text-show</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">v-if</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">!isEditing</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">single-overflow text-val</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">:style</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">{ &#39;max-width&#39;: maxWidth }</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#B07D48;">:title</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#999999;">&gt;</span><span style="color:#393A34;">{{ text }}</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">span</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">el-icon-edit</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">@click</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">switchToEdit</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">p</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">text-edit</span><span style="color:#B5695999;">&quot;</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">v-else</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">el-input</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">v-model</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputVal</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">ref</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">inputRef</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">:placeholder</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">&#39;请输入&#39; + name</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">size</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">mini</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">clearable</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">el-input</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">       </span><span style="color:#A0ADA0;">&lt;!-- @blur=&#39;cancelUpdate&#39; 事件比confirmUpdate先执行，导致确定按钮事件没触发--&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">title</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">确定</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">:class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">loading ? &#39;el-icon-loading&#39; : &#39;el-icon-circle-check&#39;</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">@click</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">confirmUpdate</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">span</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">title</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">取消</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">el-icon-circle-close</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">@click</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">cancelEdit</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#B07D48;">v-if</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">!loading</span><span style="color:#B5695999;">&quot;</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">span</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">p</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">div</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">export</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">default</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">UpdateText</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">props</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">textVal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">name</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">名称</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">maxWidth</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">200px</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">id</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">type</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">String</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#998418;">default</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">data</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#1E754F;">return</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">loading</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">isEditing</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">inputVal</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#998418;">text</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">textVal</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">computed</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">watch</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">components</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#998418;">methods</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//切换到输入框模式</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">switchToEdit</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inputVal</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">textVal</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEditing</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$nextTick</span><span style="color:#999999;">(()</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$refs</span><span style="color:#999999;">.</span><span style="color:#B07D48;">inputRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">focus</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">cancelEdit</span><span style="color:#999999;">(){</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEditing</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span><span style="color:#393A34;">	</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//确定更新</span></span>
+<span class="line"><span style="color:#393A34;">	   </span><span style="color:#59873A;">confirmUpdate</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inputVal</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">,</span><span style="color:#B07D48;">id</span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inputVal</span><span style="color:#999999;">.</span><span style="color:#59873A;">trim</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;&quot;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$message</span><span style="color:#999999;">.</span><span style="color:#59873A;">error</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">\${</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">不能为空</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#1E754F;">return</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">value</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">===</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">textVal</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEditing</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#1E754F;">return</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">loading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#1E754F;">if</span><span style="color:#999999;">(</span><span style="color:#B07D48;">id</span><span style="color:#999999;">){</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">confirm</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">id</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span><span style="color:#1E754F;">else</span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">        </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">$emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">confirm</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">value</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#59873A;">successUpdate</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#AB5959;">let</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inputVal</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">name</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">loading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">text</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">inputVal</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">isEditing</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$notify</span><span style="color:#999999;">.</span><span style="color:#59873A;">success</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">\${</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">修改成功</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">//失败</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#59873A;">failUpdate</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">loading</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">false</span></span>
+<span class="line"><span style="color:#393A34;">      </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$notify</span><span style="color:#999999;">.</span><span style="color:#59873A;">error</span><span style="color:#999999;">(</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">\${</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B56959;">name</span><span style="color:#999999;">}</span><span style="color:#B56959;">修改失败</span><span style="color:#B5695999;">\`</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">created</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{},</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">		</span><span style="color:#A0ADA0;">//解决方案：不使用@blur, 监听焦点不在此组件时，才取消编辑</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">click</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#1E754F;">if</span><span style="color:#393A34;"> </span><span style="color:#999999;">(</span><span style="color:#AB5959;">!</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$el</span><span style="color:#999999;">.</span><span style="color:#59873A;">contains</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">target</span><span style="color:#999999;">))</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">				</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">cancelEdit</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">			</span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#999999;">})</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="文本溢出隐藏处理后对不齐问题" tabindex="-1">文本溢出隐藏处理后对不齐问题 <a class="header-anchor" href="#文本溢出隐藏处理后对不齐问题" aria-label="Permalink to &quot;文本溢出隐藏处理后对不齐问题&quot;">​</a></h2><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/febasis/202302192142738.png" alt="image-20230219214258711"></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#666666;">.</span><span style="color:#BD976A;">el-checkbox</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#B8A965;">width</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">200</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;">:v-deep .el-checkbox__label {</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    width: </span><span style="color:#4C9A91;">186</span><span style="color:#CB7676;">px</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">vertical-align</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">middle</span><span style="color:#666666;">;</span><span style="color:#DBD7CAEE;"> //需要重新设置对齐线</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">hidden</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">text-overflow</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">ellipsis</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#B8A965;">white-space</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">nowrap</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#999999;">.</span><span style="color:#B07D48;">el-checkbox</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#998418;">width</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">200</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">:</span><span style="color:#393A34;">:v-deep .el-checkbox__label {</span></span>
+<span class="line"><span style="color:#393A34;">    width: </span><span style="color:#2F798A;">186</span><span style="color:#AB5959;">px</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">vertical-align</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">middle</span><span style="color:#999999;">;</span><span style="color:#393A34;"> //需要重新设置对齐线</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">hidden</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">text-overflow</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">ellipsis</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#998418;">white-space</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">nowrap</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#393A34;">}</span></span></code></pre></div><h2 id="路由组件切换-事件总线意外多次触发" tabindex="-1">路由组件切换，事件总线意外多次触发 <a class="header-anchor" href="#路由组件切换-事件总线意外多次触发" aria-label="Permalink to &quot;路由组件切换，事件总线意外多次触发&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//A路由组件</span></span>
+<span class="line"><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$bus</span><span style="color:#666666;">.</span><span style="color:#80A665;">$emit</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">searchDone</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">)</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//A路由组件</span></span>
+<span class="line"><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$bus</span><span style="color:#999999;">.</span><span style="color:#59873A;">$emit</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">searchDone</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">)</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark has-highlighted-lines vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//B路由组件</span></span>
+<span class="line"><span style="color:#80A665;">mounted</span><span style="color:#666666;">(){</span></span>
+<span class="line highlighted"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$bus</span><span style="color:#666666;">.</span><span style="color:#80A665;">$off</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">searchDone</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">//在每次绑定事件前，先解绑该事件</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$bus</span><span style="color:#666666;">.</span><span style="color:#80A665;">$on</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">searchDone</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">handleCurrentChange</span><span style="color:#666666;">)</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">},</span></span></code></pre><pre class="shiki vitesse-light has-highlighted-lines vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//B路由组件</span></span>
+<span class="line"><span style="color:#59873A;">mounted</span><span style="color:#999999;">(){</span></span>
+<span class="line highlighted"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$bus</span><span style="color:#999999;">.</span><span style="color:#59873A;">$off</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">searchDone</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">//在每次绑定事件前，先解绑该事件</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$bus</span><span style="color:#999999;">.</span><span style="color:#59873A;">$on</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">searchDone</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">handleCurrentChange</span><span style="color:#999999;">)</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">},</span></span></code></pre></div><h2 id="前端配合-nginx-服务开启-gzip-页面加载不出来" tabindex="-1">前端配合 Nginx 服务开启 gzip 页面加载不出来 <a class="header-anchor" href="#前端配合-nginx-服务开启-gzip-页面加载不出来" aria-label="Permalink to &quot;前端配合 Nginx 服务开启 gzip 页面加载不出来&quot;">​</a></h2><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#758575DD;">//vue.config.js</span></span>
+<span class="line"><span style="color:#80A665;">plugins</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">[</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">CompressionWebpackPlugin</span><span style="color:#666666;">({</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">exclude</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#C4704F;">node_modules</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">test</span><span style="color:#666666;">:</span><span style="color:#C4704F;"> </span><span style="color:#C98A7D99;">/</span><span style="color:#E6CC77;">\\.</span><span style="color:#666666;">(</span><span style="color:#C4704F;">js</span><span style="color:#CB7676;">|</span><span style="color:#C4704F;">css</span><span style="color:#666666;">)</span><span style="color:#4D9375;">$</span><span style="color:#C98A7D99;">/</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">threshold</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">10240</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 超过10kb的文件就压缩</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">deleteOriginalAssets</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">true</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#758575DD;">// 不删除源文件</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">algorithm</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">gzip</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">		</span><span style="color:#B8A965;">minRatio</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">0.8</span><span style="color:#666666;">,</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">	</span><span style="color:#666666;">}),</span></span>
+<span class="line"><span style="color:#666666;">],</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#A0ADA0;">//vue.config.js</span></span>
+<span class="line"><span style="color:#59873A;">plugins</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">[</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">CompressionWebpackPlugin</span><span style="color:#999999;">({</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">exclude</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#AB5E3F;">node_modules</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">test</span><span style="color:#999999;">:</span><span style="color:#AB5E3F;"> </span><span style="color:#B5695999;">/</span><span style="color:#BDA437;">\\.</span><span style="color:#999999;">(</span><span style="color:#AB5E3F;">js</span><span style="color:#AB5959;">|</span><span style="color:#AB5E3F;">css</span><span style="color:#999999;">)</span><span style="color:#1E754F;">$</span><span style="color:#B5695999;">/</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">threshold</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">10240</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 超过10kb的文件就压缩</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">deleteOriginalAssets</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">true</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A0ADA0;">// 不删除源文件</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">algorithm</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">gzip</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">		</span><span style="color:#998418;">minRatio</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">0.8</span><span style="color:#999999;">,</span></span>
+<span class="line"><span style="color:#393A34;">	</span><span style="color:#999999;">}),</span></span>
+<span class="line"><span style="color:#999999;">],</span></span></code></pre></div><p><img src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/interview/2023-03-30-14-58-50.png" alt="2023-03-30-14-58-50"></p><h2 id="tailwindcss动态绑定类不能随着渐变" tabindex="-1">TailwindCSS动态绑定类不能随着渐变 <a class="header-anchor" href="#tailwindcss动态绑定类不能随着渐变" aria-label="Permalink to &quot;TailwindCSS动态绑定类不能随着渐变&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">header</span><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">:class</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">headerBg</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;&lt;/</span><span style="color:#4D9375;">header</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">template</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#666666;">&lt;</span><span style="color:#4D9375;">script</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">setup</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">lang</span><span style="color:#666666;">=</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">ts</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">&gt;</span></span>
+<span class="line"><span style="color:#4D9375;">import</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">ref</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">onMounted</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4D9375;">from</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">vue</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#758575DD;">//通过判断滚动的距离，来决定header 背景色的变化</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#CB7676;">let </span><span style="color:#BD976A;">headerBg</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#80A665;">ref</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">bg-zinc-900/[.00]</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">const </span><span style="color:#80A665;">handleScroll</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">()</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=&gt;</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">  const </span><span style="color:#BD976A;">scrollHeight</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#BD976A;">document</span><span style="color:#666666;">.</span><span style="color:#BD976A;">documentElement</span><span style="color:#666666;">.</span><span style="color:#BD976A;">scrollTop</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#4D9375;">if</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">scrollHeight</span><span style="color:#CB7676;"> </span><span style="color:#666666;">&lt;</span><span style="color:#CB7676;"> </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">)</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    let </span><span style="color:#BD976A;">opacity</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#666666;">(</span><span style="color:#BD976A;">scrollHeight</span><span style="color:#CB7676;"> / </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">).</span><span style="color:#80A665;">toFixed</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">).</span><span style="color:#80A665;">slice</span><span style="color:#666666;">(</span><span style="color:#4C9A91;">1</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">headerBg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">bg-zinc-900/[</span><span style="color:#666666;">\${</span><span style="color:#C98A7D;">opacity</span><span style="color:#666666;">}</span><span style="color:#C98A7D;">]</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span><span style="color:#CB7676;"> </span><span style="color:#4D9375;">else</span><span style="color:#CB7676;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#CB7676;">    </span><span style="color:#BD976A;">headerBg</span><span style="color:#666666;">.</span><span style="color:#BD976A;">value</span><span style="color:#CB7676;"> </span><span style="color:#666666;">=</span><span style="color:#CB7676;"> </span><span style="color:#C98A7D99;">\`</span><span style="color:#C98A7D;">bg-zinc-900/[1]</span><span style="color:#C98A7D99;">\`</span></span>
+<span class="line"><span style="color:#CB7676;">  </span><span style="color:#666666;">}</span></span>
+<span class="line"><span style="color:#666666;">};</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#BD976A;">window</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#C98A7D;">scroll</span><span style="color:#C98A7D99;">&quot;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">handleScroll</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">&lt;/</span><span style="color:#4D9375;">script</span><span style="color:#666666;">&gt;</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">header</span><span style="color:#393A34;">  </span><span style="color:#B07D48;">:class</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">headerBg</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;&lt;/</span><span style="color:#1E754F;">header</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">template</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#999999;">&lt;</span><span style="color:#1E754F;">script</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">setup</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">lang</span><span style="color:#999999;">=</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">ts</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">&gt;</span></span>
+<span class="line"><span style="color:#1E754F;">import</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">ref</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">onMounted</span><span style="color:#393A34;"> </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span><span style="color:#1E754F;">from</span><span style="color:#393A34;"> </span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">vue</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#A0ADA0;">//通过判断滚动的距离，来决定header 背景色的变化</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#AB5959;">let </span><span style="color:#B07D48;">headerBg</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#59873A;">ref</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">bg-zinc-900/[.00]</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">const </span><span style="color:#59873A;">handleScroll</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">()</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=&gt;</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">  const </span><span style="color:#B07D48;">scrollHeight</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B07D48;">document</span><span style="color:#999999;">.</span><span style="color:#B07D48;">documentElement</span><span style="color:#999999;">.</span><span style="color:#B07D48;">scrollTop</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#1E754F;">if</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">scrollHeight</span><span style="color:#AB5959;"> </span><span style="color:#999999;">&lt;</span><span style="color:#AB5959;"> </span><span style="color:#2F798A;">100</span><span style="color:#999999;">)</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    let </span><span style="color:#B07D48;">opacity</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#999999;">(</span><span style="color:#B07D48;">scrollHeight</span><span style="color:#AB5959;"> / </span><span style="color:#2F798A;">100</span><span style="color:#999999;">).</span><span style="color:#59873A;">toFixed</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">).</span><span style="color:#59873A;">slice</span><span style="color:#999999;">(</span><span style="color:#2F798A;">1</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">headerBg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">bg-zinc-900/[</span><span style="color:#999999;">\${</span><span style="color:#B56959;">opacity</span><span style="color:#999999;">}</span><span style="color:#B56959;">]</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span><span style="color:#AB5959;"> </span><span style="color:#1E754F;">else</span><span style="color:#AB5959;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#AB5959;">    </span><span style="color:#B07D48;">headerBg</span><span style="color:#999999;">.</span><span style="color:#B07D48;">value</span><span style="color:#AB5959;"> </span><span style="color:#999999;">=</span><span style="color:#AB5959;"> </span><span style="color:#B5695999;">\`</span><span style="color:#B56959;">bg-zinc-900/[1]</span><span style="color:#B5695999;">\`</span></span>
+<span class="line"><span style="color:#AB5959;">  </span><span style="color:#999999;">}</span></span>
+<span class="line"><span style="color:#999999;">};</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#B07D48;">window</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&quot;</span><span style="color:#B56959;">scroll</span><span style="color:#B5695999;">&quot;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">handleScroll</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">&lt;/</span><span style="color:#1E754F;">script</span><span style="color:#999999;">&gt;</span></span></code></pre></div><h2 id="监听非-window-resize-事件不生效问题" tabindex="-1">监听非 <code>window</code> resize 事件不生效问题 <a class="header-anchor" href="#监听非-window-resize-事件不生效问题" aria-label="Permalink to &quot;监听非 \`window\` resize 事件不生效问题&quot;">​</a></h2><p>不会生效原因： div 元素默认不会触发 resize 事件。在 window 对象上，浏览器会自动跟踪窗口的大小变化并触发 resize 事件，但在其他元素上，您需要自己编写代码来检测大小变化。可以使用 MutationObserver 或者 ResizeObserver 来监听元素大小变化。以下是使用 ResizeObserver 的示例代码：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki vitesse-dark vp-code-dark"><code><span class="line"><span style="color:#80A665;">mounted</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$refs</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagBoxRef</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">$refs</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagBoxRef</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#80A665;">resizeHandler</span><span style="color:#666666;">()</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 创建 ResizeObserver 实例</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListResizeObserver</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">new</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">ResizeObserver</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">resizeHandler</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 监听 tagListRef 元素的大小变化</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListResizeObserver</span><span style="color:#666666;">.</span><span style="color:#80A665;">observe</span><span style="color:#666666;">(</span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">.</span><span style="color:#80A665;">addEventListener</span><span style="color:#666666;">(</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#C98A7D;">wheel</span><span style="color:#C98A7D99;">&#39;</span><span style="color:#666666;">,</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">handleScroll</span><span style="color:#666666;">);</span></span>
+<span class="line"><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#80A665;">beforeUnmount</span><span style="color:#666666;">()</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">  </span><span style="color:#758575DD;">// 在组件卸载前，停止 ResizeObserver 实例</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListResizeObserver</span><span style="color:#666666;">.</span><span style="color:#80A665;">disconnect</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#80A665;">methods</span><span style="color:#666666;">:</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">handleScroll</span><span style="color:#666666;">(</span><span style="color:#BD976A;">e</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#80A665;">preventDefault</span><span style="color:#666666;">();</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">scrollLeft</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">e</span><span style="color:#666666;">.</span><span style="color:#BD976A;">deltaY</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#4C9A91;">100</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">scrollHandler</span><span style="color:#666666;">(</span><span style="color:#BD976A;">direction</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">scrollLeft</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">+=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#BD976A;">direction</span><span style="color:#DBD7CAEE;"> </span><span style="color:#CB7676;">*</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListWidth</span><span style="color:#666666;">;</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">},</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#80A665;">resizeHandler</span><span style="color:#666666;">(</span><span style="color:#BD976A;">entries</span><span style="color:#666666;">)</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">{</span></span>
+<span class="line"><span style="color:#666666;">    </span><span style="color:#758575DD;">// entries 是 ResizeObserver 的回调参数，包含被观察的元素的信息</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagListRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">clientWidth</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">    </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagBoxWidth</span><span style="color:#DBD7CAEE;"> </span><span style="color:#666666;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#C99076;">this</span><span style="color:#666666;">.</span><span style="color:#BD976A;">tagBoxRef</span><span style="color:#666666;">.</span><span style="color:#BD976A;">clientWidth</span></span>
+<span class="line"><span style="color:#DBD7CAEE;">  </span><span style="color:#666666;">}</span><span style="color:#DBD7CAEE;"> </span></span>
+<span class="line"><span style="color:#666666;">}</span></span></code></pre><pre class="shiki vitesse-light vp-code-light"><code><span class="line"><span style="color:#59873A;">mounted</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$refs</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagBoxRef</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">$refs</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagBoxRef</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#59873A;">resizeHandler</span><span style="color:#999999;">()</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 创建 ResizeObserver 实例</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListResizeObserver</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">new</span><span style="color:#393A34;"> </span><span style="color:#59873A;">ResizeObserver</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">resizeHandler</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 监听 tagListRef 元素的大小变化</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListResizeObserver</span><span style="color:#999999;">.</span><span style="color:#59873A;">observe</span><span style="color:#999999;">(</span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#393A34;">  </span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">.</span><span style="color:#59873A;">addEventListener</span><span style="color:#999999;">(</span><span style="color:#B5695999;">&#39;</span><span style="color:#B56959;">wheel</span><span style="color:#B5695999;">&#39;</span><span style="color:#999999;">,</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">handleScroll</span><span style="color:#999999;">);</span></span>
+<span class="line"><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#59873A;">beforeUnmount</span><span style="color:#999999;">()</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">  </span><span style="color:#A0ADA0;">// 在组件卸载前，停止 ResizeObserver 实例</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListResizeObserver</span><span style="color:#999999;">.</span><span style="color:#59873A;">disconnect</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#59873A;">methods</span><span style="color:#999999;">:</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">handleScroll</span><span style="color:#999999;">(</span><span style="color:#B07D48;">e</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#59873A;">preventDefault</span><span style="color:#999999;">();</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">scrollLeft</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">e</span><span style="color:#999999;">.</span><span style="color:#B07D48;">deltaY</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#2F798A;">100</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">scrollHandler</span><span style="color:#999999;">(</span><span style="color:#B07D48;">direction</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">scrollLeft</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">+=</span><span style="color:#393A34;"> </span><span style="color:#B07D48;">direction</span><span style="color:#393A34;"> </span><span style="color:#AB5959;">*</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListWidth</span><span style="color:#999999;">;</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">},</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#59873A;">resizeHandler</span><span style="color:#999999;">(</span><span style="color:#B07D48;">entries</span><span style="color:#999999;">)</span><span style="color:#393A34;"> </span><span style="color:#999999;">{</span></span>
+<span class="line"><span style="color:#999999;">    </span><span style="color:#A0ADA0;">// entries 是 ResizeObserver 的回调参数，包含被观察的元素的信息</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagListRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">clientWidth</span></span>
+<span class="line"><span style="color:#393A34;">    </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagBoxWidth</span><span style="color:#393A34;"> </span><span style="color:#999999;">=</span><span style="color:#393A34;"> </span><span style="color:#A65E2B;">this</span><span style="color:#999999;">.</span><span style="color:#B07D48;">tagBoxRef</span><span style="color:#999999;">.</span><span style="color:#B07D48;">clientWidth</span></span>
+<span class="line"><span style="color:#393A34;">  </span><span style="color:#999999;">}</span><span style="color:#393A34;"> </span></span>
+<span class="line"><span style="color:#999999;">}</span></span></code></pre></div>`,24),t=[o];function e(c,r,y,A,D,i){return n(),a("div",null,t)}const C=s(p,[["render",e]]);export{E as __pageData,C as default};
diff --git "a/assets/Problem_VueProject_Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md.5d32b46a.lean.js" "b/assets/Problem_VueProject_Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md.5d32b46a.lean.js"
new file mode 100644
index 00000000..1a474d30
--- /dev/null
+++ "b/assets/Problem_VueProject_Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.md.5d32b46a.lean.js"
@@ -0,0 +1 @@
+import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.c53372a0.js";const E=JSON.parse('{"title":"Vue项目踩坑一","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/VueProject/Vue项目踩坑一.md","filePath":"Problem/VueProject/Vue项目踩坑一.md"}'),p={name:"Problem/VueProject/Vue项目踩坑一.md"},o=l("",24),t=[o];function e(c,r,y,A,D,i){return n(),a("div",null,t)}const C=s(p,[["render",e]]);export{E as __pageData,C as default};
diff --git a/assets/Problem_index.md.724652c6.js b/assets/Problem_index.md.724652c6.js
new file mode 100644
index 00000000..d55eafa6
--- /dev/null
+++ b/assets/Problem_index.md.724652c6.js
@@ -0,0 +1 @@
+import{_ as t,o as a,c as o,k as e,a as s}from"./chunks/framework.c53372a0.js";const u=JSON.parse('{"title":"编程踩坑积累与总结","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/index.md","filePath":"Problem/index.md"}'),c={name:"Problem/index.md"},r=e("h1",{id:"编程踩坑积累与总结",tabindex:"-1"},[s("编程踩坑积累与总结 "),e("a",{class:"header-anchor",href:"#编程踩坑积累与总结","aria-label":'Permalink to "编程踩坑积累与总结"'},"​")],-1),n=e("div",{class:"tip custom-block"},[e("p",{class:"custom-block-title"},"TIP"),e("p",null,"这里主要记录编程遇到的问题，已经解决方案，以便以后回顾或找到更优解!")],-1),i=[r,n];function d(l,_,m,p,h,f){return a(),o("div",null,i)}const b=t(c,[["render",d]]);export{u as __pageData,b as default};
diff --git a/assets/Problem_index.md.724652c6.lean.js b/assets/Problem_index.md.724652c6.lean.js
new file mode 100644
index 00000000..d55eafa6
--- /dev/null
+++ b/assets/Problem_index.md.724652c6.lean.js
@@ -0,0 +1 @@
+import{_ as t,o as a,c as o,k as e,a as s}from"./chunks/framework.c53372a0.js";const u=JSON.parse('{"title":"编程踩坑积累与总结","description":"","frontmatter":{},"headers":[],"relativePath":"Problem/index.md","filePath":"Problem/index.md"}'),c={name:"Problem/index.md"},r=e("h1",{id:"编程踩坑积累与总结",tabindex:"-1"},[s("编程踩坑积累与总结 "),e("a",{class:"header-anchor",href:"#编程踩坑积累与总结","aria-label":'Permalink to "编程踩坑积累与总结"'},"​")],-1),n=e("div",{class:"tip custom-block"},[e("p",{class:"custom-block-title"},"TIP"),e("p",null,"这里主要记录编程遇到的问题，已经解决方案，以便以后回顾或找到更优解!")],-1),i=[r,n];function d(l,_,m,p,h,f){return a(),o("div",null,i)}const b=t(c,[["render",d]]);export{u as __pageData,b as default};
diff --git a/assets/app.c5d8d5ce.js b/assets/app.c5d8d5ce.js
new file mode 100644
index 00000000..704d5215
--- /dev/null
+++ b/assets/app.c5d8d5ce.js
@@ -0,0 +1 @@
+import{d as c,u,Z as m,o as f,b as h,l as v,O as g,aa as s,s as i,ab as w,ac as _,ad as y,ae as A,af as P,ag as x,ah as b,ai as C,aj as D,ak as T,X as $,j as E,y as R,al as L,am as M,an as S}from"./chunks/framework.c53372a0.js";import{t as l}from"./chunks/theme.1e9d2528.js";import{D as j}from"./chunks/DemoWrap.1b6e7adf.js";const k=c({__name:"UnoCSSLayout",setup(a){const{isDark:e}=u();function t(){return"startViewTransition"in document&&window.matchMedia("(prefers-reduced-motion: no-preference)").matches}return m("toggle-appearance",async({clientX:n,clientY:o})=>{if(!t()){e.value=!e.value;return}const p=[`circle(0px at ${n}px ${o}px)`,`circle(${Math.hypot(Math.max(n,innerWidth-n),Math.max(o,innerHeight-o))}px at ${n}px ${o}px)`];await document.startViewTransition(async()=>{e.value=!e.value,await g()}).ready,document.documentElement.animate({clipPath:e.value?p.reverse():p},{duration:300,easing:"ease-in",pseudoElement:`::view-transition-${e.value?"old":"new"}(root)`})}),(n,o)=>(f(),h(v(l).Layout))}}),O={...l,Layout:()=>s(k,null,{"layout-bottom":()=>s(ReloadPrompt)}),enhanceApp(a){a.app.component("DemoWrap",j)}};function d(a){if(a.extends){const e=d(a.extends);return{...e,...a,async enhanceApp(t){e.enhanceApp&&await e.enhanceApp(t),a.enhanceApp&&await a.enhanceApp(t)}}}return a}const r=d(O),V=c({name:"VitePressApp",setup(){const{site:a}=u();return E(()=>{R(()=>{document.documentElement.lang=a.value.lang,document.documentElement.dir=a.value.dir})}),L(),M(),S(),r.setup&&r.setup(),()=>s(r.Layout)}});async function B(){const a=W(),e=F();e.provide(_,a);const t=y(a.route);return e.provide(A,t),e.component("Content",P),e.component("ClientOnly",x),Object.defineProperties(e.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),r.enhanceApp&&await r.enhanceApp({app:e,router:a,siteData:b}),{app:e,router:a,data:t}}function F(){return C(V)}function W(){let a=i,e;return D(t=>{let n=T(t),o=null;return n&&(a&&(e=n),(a||e===n)&&(n=n.replace(/\.js$/,".lean.js")),o=$(()=>import(n),[])),i&&(a=!1),o},r.NotFound)}i&&B().then(({app:a,router:e,data:t})=>{e.go().then(()=>{w(e.route,t.site),a.mount("#app")})});export{B as createApp};
diff --git a/assets/chunks/@localSearchIndexroot.20abec5d.js b/assets/chunks/@localSearchIndexroot.20abec5d.js
new file mode 100644
index 00000000..59754eb2
--- /dev/null
+++ b/assets/chunks/@localSearchIndexroot.20abec5d.js
@@ -0,0 +1 @@
+const t='{"documentCount":617,"nextId":617,"documentIds":{"0":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#一、相关概念","1":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#二、数据库操作","2":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#三、集合相关操作","3":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#四、文档相关操作","4":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_1-查询","5":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_2-插入","6":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_3-删除","7":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_4-更新","8":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#五、mongoose学习","9":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_1-插入","10":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_2-删除","11":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_3-更新","12":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_4-查询","13":"/zerdocs/BackEnd/NodeJS/MongoDB笔记#_5-模型","14":"/zerdocs/BackEnd/NodeJS/Node大文件上传#node大文件上传","15":"/zerdocs/BackEnd/NodeJS/Node大文件上传#vue-前端代码","16":"/zerdocs/BackEnd/NodeJS/Node学习笔记#一、读取文件","17":"/zerdocs/BackEnd/NodeJS/Node学习笔记#path-路径模块","18":"/zerdocs/BackEnd/NodeJS/Node学习笔记#二、写入文件","19":"/zerdocs/BackEnd/NodeJS/Node学习笔记#三、服务器操作","20":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_1-创建-web-服务器步骤","21":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_2-动态响应内容","22":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_3-响应文件内容","23":"/zerdocs/BackEnd/NodeJS/Node学习笔记#四、node-模块化","24":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_1-module-对象","25":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_2-模块共享","26":"/zerdocs/BackEnd/NodeJS/Node学习笔记#五、模块加载机制","27":"/zerdocs/BackEnd/NodeJS/Node学习笔记#六、express-模块","28":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_1-express-创建服务器","29":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_2-express-中间件","30":"/zerdocs/BackEnd/NodeJS/Node学习笔记#七、编写接口","31":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_1-cors-跨域资源共享","32":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_2-cors-头部","33":"/zerdocs/BackEnd/NodeJS/Node学习笔记#八、node-连接数据库","34":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_1-配置-mysql-模块","35":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_2-查询数据","36":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_3-插入数据","37":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_4-更新数据","38":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_5-删除数据","39":"/zerdocs/BackEnd/NodeJS/Node学习笔记#九、身份认证","40":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_1-http-协议的特性","41":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_2-cookie-特性","42":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_3-session-认证","43":"/zerdocs/BackEnd/NodeJS/Node学习笔记#_4-jwt-认证","44":"/zerdocs/BackEnd/NodeJS/Node简单上传文件#node-简单上传文件","45":"/zerdocs/BackEnd/NodeJS/Node简单上传文件#vue-前端代码","46":"/zerdocs/BackEnd/NodeJS/Node简单上传文件#express-后端代码","47":"/zerdocs/BackEnd/Server/Docker学习笔记#一、解决痛点","48":"/zerdocs/BackEnd/Server/Docker学习笔记#二、优点和应用","49":"/zerdocs/BackEnd/Server/Docker学习笔记#三、基本组成","50":"/zerdocs/BackEnd/Server/Docker学习笔记#四、工作原理","51":"/zerdocs/BackEnd/Server/Docker学习笔记#五、centos安装docker","52":"/zerdocs/BackEnd/Server/Docker学习笔记#六、阿里云镜像加速","53":"/zerdocs/BackEnd/Server/Docker学习笔记#七、常用命令","54":"/zerdocs/BackEnd/Server/Docker学习笔记#_1-docker","55":"/zerdocs/BackEnd/Server/Docker学习笔记#_2-镜像","56":"/zerdocs/BackEnd/Server/Docker学习笔记#_3-容器","57":"/zerdocs/BackEnd/Server/Docker学习笔记#启动守护式","58":"/zerdocs/BackEnd/Server/Docker学习笔记#查看容器日志","59":"/zerdocs/BackEnd/Server/Docker学习笔记#容器备份到主机","60":"/zerdocs/BackEnd/Server/Docker学习笔记#容器卷","61":"/zerdocs/BackEnd/Server/Docker学习笔记#八、dockerfile编写","62":"/zerdocs/BackEnd/Server/Docker学习笔记#九、docker网络","63":"/zerdocs/BackEnd/Server/Docker学习笔记#共用网卡","64":"/zerdocs/BackEnd/Server/Docker学习笔记#自定义网络","65":"/zerdocs/BackEnd/Server/Docker学习笔记#十、容器编排","66":"/zerdocs/BackEnd/Server/Docker学习笔记#_1-安装compose","67":"/zerdocs/BackEnd/Server/Docker学习笔记#_2-常用命令","68":"/zerdocs/BackEnd/Server/Docker学习笔记#_3-安装-portainer","69":"/zerdocs/BackEnd/Server/Nginx学习笔记#一、nginx安装","70":"/zerdocs/BackEnd/Server/Nginx学习笔记#_1-安装命令","71":"/zerdocs/BackEnd/Server/Nginx学习笔记#_2-linux目录结构","72":"/zerdocs/BackEnd/Server/Nginx学习笔记#_3-基础命令","73":"/zerdocs/BackEnd/Server/Nginx学习笔记#编写配置","74":"/zerdocs/BackEnd/Server/Nginx学习笔记#日志分析器","75":"/zerdocs/BackEnd/Server/Nginx学习笔记#centos7联网","76":"/zerdocs/Framework/Angular/Angular基础总结一#angular基础总结一","77":"/zerdocs/Framework/Angular/Angular基础总结一#一、ngmodule","78":"/zerdocs/Framework/Angular/Angular基础总结一#ngmodule元数据","79":"/zerdocs/Framework/Angular/Angular基础总结一#declarations-数组","80":"/zerdocs/Framework/Angular/Angular基础总结一#imports-数组","81":"/zerdocs/Framework/Angular/Angular基础总结一#providers-数组","82":"/zerdocs/Framework/Angular/Angular基础总结一#bootstrap-数组","83":"/zerdocs/Framework/Angular/Angular基础总结一#二、模板基础语法","84":"/zerdocs/Framework/Angular/Angular基础总结一#_1-模板表达式","85":"/zerdocs/Framework/Angular/Angular基础总结一#_2-模板来源","86":"/zerdocs/Framework/Angular/Angular基础总结一#_3-属性绑定","87":"/zerdocs/Framework/Angular/Angular基础总结一#_4-自定义属性绑定","88":"/zerdocs/Framework/Angular/Angular基础总结一#_5-插值表达式属性绑定","89":"/zerdocs/Framework/Angular/Angular基础总结一#_6-单个class样式绑定","90":"/zerdocs/Framework/Angular/Angular基础总结一#_7-绑定多个class","91":"/zerdocs/Framework/Angular/Angular基础总结一#_8-绑定单个style","92":"/zerdocs/Framework/Angular/Angular基础总结一#_9-绑定多个style","93":"/zerdocs/Framework/Angular/Angular基础总结一#_10-绑定事件","94":"/zerdocs/Framework/Angular/Angular基础总结一#_11-输入与输出属性","95":"/zerdocs/Framework/Angular/Angular基础总结一#输入属性-input","96":"/zerdocs/Framework/Angular/Angular基础总结一#输出属性-output","97":"/zerdocs/Framework/Angular/Angular基础总结一#三、组件样式","98":"/zerdocs/Framework/Angular/Angular基础总结一#宿主选择器","99":"/zerdocs/Framework/Angular/Angular基础总结一#祖先选择器","100":"/zerdocs/Framework/Angular/Angular基础总结一#样式模块化","101":"/zerdocs/Framework/Angular/Angular基础总结一#视图封装模式","102":"/zerdocs/Framework/Angular/Angular基础总结三#组件投影","103":"/zerdocs/Framework/Angular/Angular基础总结三#viewchild","104":"/zerdocs/Framework/Angular/Angular基础总结三#viewchildren","105":"/zerdocs/Framework/Angular/Angular基础总结三#contentchild","106":"/zerdocs/Framework/Angular/Angular基础总结三#contentchildren","107":"/zerdocs/Framework/Angular/Angular基础总结三#自定义管道","108":"/zerdocs/Framework/Angular/Angular基础总结三#非纯管道","109":"/zerdocs/Framework/Angular/Angular基础总结三#生命周期","110":"/zerdocs/Framework/Angular/Angular基础总结三#变更检测","111":"/zerdocs/Framework/Angular/Angular基础总结三#默认策略下触发变更检测的时机","112":"/zerdocs/Framework/Angular/Angular基础总结三#onpush下触发变更检测时机","113":"/zerdocs/Framework/Angular/Angular基础总结三#动态组件","114":"/zerdocs/Framework/Angular/Angular基础总结三#ngtemplateoutlet指令","115":"/zerdocs/Framework/Angular/Angular基础总结二#双向绑定","116":"/zerdocs/Framework/Angular/Angular基础总结二#_1-基本双向绑定","117":"/zerdocs/Framework/Angular/Angular基础总结二#_2-input双向绑定","118":"/zerdocs/Framework/Angular/Angular基础总结二#_3-表单form中双向绑定","119":"/zerdocs/Framework/Angular/Angular基础总结二#属性型指令","120":"/zerdocs/Framework/Angular/Angular基础总结二#结构型指令","121":"/zerdocs/Framework/Angular/Angular基础总结二#ngif指令","122":"/zerdocs/Framework/Angular/Angular基础总结二#ngfor指令","123":"/zerdocs/Framework/Angular/Angular基础总结二#ngswitch-指令","124":"/zerdocs/Framework/Angular/Angular基础总结二#自定义指令","125":"/zerdocs/Framework/Angular/Angular基础总结二#自定义高亮指令-属性型","126":"/zerdocs/Framework/Angular/Angular基础总结二#自定义unless指令-结构型","127":"/zerdocs/Framework/Angular/Angular基础总结二#模板元素","128":"/zerdocs/Framework/Angular/Angular基础总结二#ng-template","129":"/zerdocs/Framework/Angular/Angular基础总结二#ng-container","130":"/zerdocs/Framework/Angular/Angular基础总结二#模板引用变量","131":"/zerdocs/Framework/Angular/Angular基础总结二#操作符","132":"/zerdocs/Framework/Angular/Angular基础总结二#管道","133":"/zerdocs/Framework/Angular/Angular基础总结二#安全链","134":"/zerdocs/Framework/Angular/Angular基础总结二#非空断言","135":"/zerdocs/Framework/Angular/Angular基础总结二#类型转换函数-any","136":"/zerdocs/Framework/React/React基础总结一#一、前置知识","137":"/zerdocs/Framework/React/React基础总结一#虚拟dom","138":"/zerdocs/Framework/React/React基础总结一#二、组件","139":"/zerdocs/Framework/React/React基础总结一#函数式组件","140":"/zerdocs/Framework/React/React基础总结一#类式组件","141":"/zerdocs/Framework/React/React基础总结一#补充","142":"/zerdocs/Framework/React/React基础总结一#组实例三大属性","143":"/zerdocs/Framework/React/React基础总结一#state","144":"/zerdocs/Framework/React/React基础总结一#props","145":"/zerdocs/Framework/React/React基础总结一#refs","146":"/zerdocs/Framework/React/React基础总结一#事件处理","147":"/zerdocs/Framework/React/React基础总结一#组件生命周期","148":"/zerdocs/Framework/Vue/Vite原理学习#vite底层原理学习","149":"/zerdocs/Framework/Vue/Vite原理学习#构建工具承担","150":"/zerdocs/Framework/Vue/Vue3补漏笔记#inheritattrs","151":"/zerdocs/Framework/Vue/Vue3补漏笔记#场景一","152":"/zerdocs/Framework/Vue/Vue3补漏笔记#场景二","153":"/zerdocs/Framework/Vue/Vue3补漏笔记#场景三","154":"/zerdocs/Framework/Vue/分页与搜索条件记录并回显优化#分页与搜索条件记录并回显优化","155":"/zerdocs/Framework/Vue/分页与搜索条件记录并回显优化#整体逻辑","156":"/zerdocs/Framework/Vue/分页与搜索条件记录并回显优化#store","157":"/zerdocs/Framework/Vue/分页与搜索条件记录并回显优化#mixins","158":"/zerdocs/Framework/Vue/分页与搜索条件记录并回显优化#列表页-xxxlist-vue","159":"/zerdocs/Framework/Vue/列表最后一条数据删除处理#一、删除最后一条数据跳转到上一页","160":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#grid布局学习笔记","161":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#实用网站","162":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#基本概念","163":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#容器属性","164":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#开启-grid布局","165":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#容器划分行列","166":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#调整间距属性","167":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#容器内网格对齐方式","168":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#网格内项目对其方式","169":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#项目排列顺序","170":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#容器中区域定义","171":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#项目属性","172":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#合并单元格属性","173":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#项目区域定义","174":"/zerdocs/FrontEnd/CSS/Grid布局学习笔记#单个项目位置","175":"/zerdocs/FrontEnd/CSS/常用代码段#css常用代码段","176":"/zerdocs/FrontEnd/CSS/常用代码段#单行与多行溢出隐藏","177":"/zerdocs/FrontEnd/CSS/常用代码段#自定义滚动条","178":"/zerdocs/FrontEnd/CSS/常用代码段#画布网状满天星背景","179":"/zerdocs/FrontEnd/CSS/常用代码段#轮播闪光","180":"/zerdocs/FrontEnd/CSS/常用代码段#flex布局子元素给了高度-实际渲染确有小数点问题","181":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#妙妙怪的《css-揭秘》读书摘要","182":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#背景与边框","183":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#多重边框","184":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#灵活的背景定位","185":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#边框内圆角","186":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#条纹背景","187":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#形状","188":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#圆角","189":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#平行四边形","190":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#梯形","191":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#视觉效果","192":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#双侧投影","193":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#染色效果","194":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#毛玻璃","195":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#折角效果","196":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#字体排印","197":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#插入换行","198":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#文本行斑马线","199":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#自定义下划线","200":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#凹凸印刷文字效果","201":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#满幅背景、定宽内容-页脚","202":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#紧贴底部的页脚","203":"/zerdocs/FrontEnd/CSS/揭秘读书摘要#闪烁效果","204":"/zerdocs/FrontEnd/Git/Git常用操作#git常用操作","205":"/zerdocs/FrontEnd/Git/Git常用操作#拉取最新提交","206":"/zerdocs/FrontEnd/Git/Git常用操作#删除远程分支","207":"/zerdocs/FrontEnd/Git/Git常用操作#删除tag","208":"/zerdocs/FrontEnd/Git/Git常用操作#删除远程文件","209":"/zerdocs/FrontEnd/Git/Git常用操作#fork后的仓库-拉取合并原仓库的更新","210":"/zerdocs/FrontEnd/Git/Git常用操作#合并多次提交","211":"/zerdocs/FrontEnd/Git/Git常用操作#关联多个代码托管平台","212":"/zerdocs/FrontEnd/Git/Git常用操作#改错分支但为未提交","213":"/zerdocs/FrontEnd/Git/Git常用操作#提交完未推送前-需要再次提交","214":"/zerdocs/FrontEnd/Git/Git常用操作#修改第一次提交信息","215":"/zerdocs/FrontEnd/Git/Git常用操作#代码提交到了错误的分支","216":"/zerdocs/FrontEnd/Git/Git常用操作#方法一","217":"/zerdocs/FrontEnd/Git/Git常用操作#方法二","218":"/zerdocs/FrontEnd/Git/Git常用操作#git-提交规范化","219":"/zerdocs/FrontEnd/Git/Git常用操作#注意-需要-git-init后才能初始化-否则报错如下","220":"/zerdocs/FrontEnd/Git/Git常用操作#commitlint-cli与-commitlint-config-conventional","221":"/zerdocs/FrontEnd/Git/Git常用操作#cz-conventional-changelog","222":"/zerdocs/FrontEnd/Git/Terminal终端美化#安装oh-my-posh","223":"/zerdocs/FrontEnd/Git/Terminal终端美化#预览所有主题命令","224":"/zerdocs/FrontEnd/Git/Terminal终端美化#初始化并应用主题","225":"/zerdocs/FrontEnd/Git/Terminal终端美化#分隔符乱码问题","226":"/zerdocs/FrontEnd/Git/Terminal终端美化#配置powershell","227":"/zerdocs/FrontEnd/Git/Terminal终端美化#_1-打开配置文件方式一","228":"/zerdocs/FrontEnd/Git/Terminal终端美化#_2-打开配置文件方式二","229":"/zerdocs/FrontEnd/Git/Terminal终端美化#自定义主题","230":"/zerdocs/FrontEnd/Git/Terminal终端美化#vs-code终端配置","231":"/zerdocs/FrontEnd/Git/Terminal终端美化#隐藏提示语","232":"/zerdocs/FrontEnd/Git/配置多个平台SSH#_1-生成公钥和私钥","233":"/zerdocs/FrontEnd/Git/配置多个平台SSH#_2-在代码托管平台设置添加公钥","234":"/zerdocs/FrontEnd/Git/配置多个平台SSH#_3-添加私钥到ssh-agent中","235":"/zerdocs/FrontEnd/Git/配置多个平台SSH#_4-创建config件-打开编辑","236":"/zerdocs/FrontEnd/Git/配置多个平台SSH#ssh公钥私钥加密解密原理","237":"/zerdocs/FrontEnd/JavaScript/async与await#javascript实现异步","238":"/zerdocs/FrontEnd/JavaScript/async与await#方式一-回调函数","239":"/zerdocs/FrontEnd/JavaScript/async与await#方式二-promise","240":"/zerdocs/FrontEnd/JavaScript/async与await#语法糖-async-await","241":"/zerdocs/FrontEnd/JavaScript/async与await#实现fn1先执行","242":"/zerdocs/FrontEnd/JavaScript/async与await#捕获异常","243":"/zerdocs/FrontEnd/JavaScript/async与await#使用陷阱","244":"/zerdocs/FrontEnd/JavaScript/代码分支优化#if-else-多分支优化","245":"/zerdocs/FrontEnd/JavaScript/代码分支优化#简单分支","246":"/zerdocs/FrontEnd/JavaScript/代码分支优化#条件单一-处理不同","247":"/zerdocs/FrontEnd/JavaScript/代码分支优化#条件复杂-处理也复杂","248":"/zerdocs/FrontEnd/JavaScript/图片懒加载#js-图片懒加载","249":"/zerdocs/FrontEnd/JavaScript/图片懒加载#方案一-监听滚动","250":"/zerdocs/FrontEnd/JavaScript/图片懒加载#方案二-观察者","251":"/zerdocs/FrontEnd/JavaScript/基础复习一#_1-算术运算符","252":"/zerdocs/FrontEnd/JavaScript/基础复习一#_2-赋值运算符","253":"/zerdocs/FrontEnd/JavaScript/基础复习一#_3-运算符","254":"/zerdocs/FrontEnd/JavaScript/基础复习一#_4-自增和自减","255":"/zerdocs/FrontEnd/JavaScript/基础复习一#_5-逻辑运算符","256":"/zerdocs/FrontEnd/JavaScript/基础复习一#_6-关系运算符","257":"/zerdocs/FrontEnd/JavaScript/基础复习一#_7-相等运算符","258":"/zerdocs/FrontEnd/JavaScript/基础复习一#_8-条件运算符","259":"/zerdocs/FrontEnd/JavaScript/基础复习一#_9-控制语句","260":"/zerdocs/FrontEnd/JavaScript/基础复习一#_10-循环语句","261":"/zerdocs/FrontEnd/JavaScript/基础复习一#_11-数据类型","262":"/zerdocs/FrontEnd/JavaScript/基础复习二#this指向","263":"/zerdocs/FrontEnd/JavaScript/基础复习二#可变参数-arguments","264":"/zerdocs/FrontEnd/JavaScript/基础复习二#剩余参数-args","265":"/zerdocs/FrontEnd/JavaScript/基础复习二#map","266":"/zerdocs/FrontEnd/JavaScript/基础复习二#set","267":"/zerdocs/FrontEnd/JavaScript/基础复习二#随机数生成","268":"/zerdocs/FrontEnd/JavaScript/基础复习二#时间格式化","269":"/zerdocs/FrontEnd/JavaScript/基础复习二#面向对象之类","270":"/zerdocs/FrontEnd/JavaScript/基础复习二#封装","271":"/zerdocs/FrontEnd/JavaScript/基础复习二#继承","272":"/zerdocs/FrontEnd/JavaScript/基础复习二#多态","273":"/zerdocs/FrontEnd/JavaScript/基础复习二#对象的结构","274":"/zerdocs/FrontEnd/JavaScript/基础复习二#原型","275":"/zerdocs/FrontEnd/JavaScript/基础复习二#原型链","276":"/zerdocs/FrontEnd/JavaScript/基础复习二#修改原型","277":"/zerdocs/FrontEnd/JavaScript/基础复习二#instanceof-in-hasown","278":"/zerdocs/FrontEnd/JavaScript/基础复习二#_10-new运算符","279":"/zerdocs/FrontEnd/JavaScript/常见算法#括号匹配","280":"/zerdocs/FrontEnd/JavaScript/常见算法#简单递归","281":"/zerdocs/FrontEnd/JavaScript/常见算法#计算阶乘","282":"/zerdocs/FrontEnd/JavaScript/常见算法#扁平化数组","283":"/zerdocs/FrontEnd/JavaScript/常见算法#反转字符串","284":"/zerdocs/FrontEnd/JavaScript/常见算法#求最大公约数","285":"/zerdocs/FrontEnd/JavaScript/常见算法#斐波那契数列","286":"/zerdocs/FrontEnd/JavaScript/常见算法#排序算法","287":"/zerdocs/FrontEnd/JavaScript/常见算法#冒泡排序","288":"/zerdocs/FrontEnd/JavaScript/常见算法#选择排序","289":"/zerdocs/FrontEnd/JavaScript/常见算法#快速排序","290":"/zerdocs/FrontEnd/JavaScript/常见算法#插入排序","291":"/zerdocs/FrontEnd/JavaScript/常见算法#希尔排序","292":"/zerdocs/FrontEnd/JavaScript/常见算法#求两个有序数组的中位数","293":"/zerdocs/FrontEnd/JavaScript/常见算法#实现eventemitter","294":"/zerdocs/FrontEnd/JavaScript/常见算法#返回给定起止字符串月份中间所有月份","295":"/zerdocs/FrontEnd/JavaScript/常见算法#实现promise的all方法","296":"/zerdocs/FrontEnd/JavaScript/常见算法#lru缓存算法","297":"/zerdocs/FrontEnd/JavaScript/常见算法#不使用乘法符号乘法函数","298":"/zerdocs/FrontEnd/JavaScript/常见算法#链表反转","299":"/zerdocs/FrontEnd/JavaScript/常见算法#二叉树的遍历","300":"/zerdocs/FrontEnd/JavaScript/常见算法#二叉搜索树的插入和查找","301":"/zerdocs/FrontEnd/JavaScript/常见算法#字符串搜索算法","302":"/zerdocs/FrontEnd/JavaScript/常见算法#数字转中文","303":"/zerdocs/FrontEnd/JavaScript/手写Promise#一、声名promise并绑定this","304":"/zerdocs/FrontEnd/JavaScript/手写Promise#二、状态保护与执行者异步捕获","305":"/zerdocs/FrontEnd/JavaScript/手写Promise#三、then方法构建","306":"/zerdocs/FrontEnd/JavaScript/手写Promise#四、实现then异步","307":"/zerdocs/FrontEnd/JavaScript/手写Promise#五、解决同步代码需要等待执行问题","308":"/zerdocs/FrontEnd/JavaScript/手写Promise#六、then的链式操作","309":"/zerdocs/FrontEnd/JavaScript/手写Promise#七、返回值的判断与处理","310":"/zerdocs/FrontEnd/JavaScript/手写Promise#八、代码优化及复用","311":"/zerdocs/FrontEnd/JavaScript/手写Promise#九、返回类型约束","312":"/zerdocs/FrontEnd/JavaScript/手写Promise#十、实现resolve和reject","313":"/zerdocs/FrontEnd/JavaScript/手写Promise#十一、promise-all-实现","314":"/zerdocs/FrontEnd/JavaScript/手写Promise#十二、实现promise-race","315":"/zerdocs/FrontEnd/JavaScript/手写Promise#十三、完整代码","316":"/zerdocs/FrontEnd/JavaScript/数据去重#基本数据类型","317":"/zerdocs/FrontEnd/JavaScript/数据去重#对象数组去重","318":"/zerdocs/FrontEnd/JavaScript/数据去重#对象相同比较","319":"/zerdocs/FrontEnd/JavaScript/数据去重#对象数组去重-1","320":"/zerdocs/FrontEnd/JavaScript/数组求集合#js常用的求交集、并集、差集的方法","321":"/zerdocs/FrontEnd/JavaScript/数组求集合#普通数组","322":"/zerdocs/FrontEnd/JavaScript/数组求集合#一、并集-a∪b","323":"/zerdocs/FrontEnd/JavaScript/数组求集合#二、交集-a∩b","324":"/zerdocs/FrontEnd/JavaScript/数组求集合#三、差集-a-b","325":"/zerdocs/FrontEnd/JavaScript/数组求集合#对象数组","326":"/zerdocs/FrontEnd/JavaScript/数组求集合#一、并集-a∪b-1","327":"/zerdocs/FrontEnd/JavaScript/数组求集合#二、交集-a∩b-1","328":"/zerdocs/FrontEnd/JavaScript/数组求集合#三、差集-a-b-1","329":"/zerdocs/FrontEnd/JavaScript/文件系统#blob与-file","330":"/zerdocs/FrontEnd/JavaScript/文件系统#arraybuffer","331":"/zerdocs/FrontEnd/JavaScript/文件系统#filereader","332":"/zerdocs/FrontEnd/JavaScript/文件系统#dataview","333":"/zerdocs/FrontEnd/JavaScript/文件系统#filepicker","334":"/zerdocs/FrontEnd/JavaScript/文件系统#文件操作","335":"/zerdocs/FrontEnd/JavaScript/文件系统#url","336":"/zerdocs/FrontEnd/JavaScript/文件系统#参考资料","337":"/zerdocs/FrontEnd/JavaScript/正则表达式#资料参考-learnregex","338":"/zerdocs/FrontEnd/JavaScript/正则表达式#应用场景","339":"/zerdocs/FrontEnd/JavaScript/正则表达式#可视化工具","340":"/zerdocs/FrontEnd/JavaScript/正则表达式#_1-或者","341":"/zerdocs/FrontEnd/JavaScript/正则表达式#_2-原子表-、原子组","342":"/zerdocs/FrontEnd/JavaScript/正则表达式#_3-边界符-、","343":"/zerdocs/FrontEnd/JavaScript/正则表达式#_4-元字符","344":"/zerdocs/FrontEnd/JavaScript/正则表达式#_5-匹配所有字符","345":"/zerdocs/FrontEnd/JavaScript/正则表达式#_6-模式修正符号i、g","346":"/zerdocs/FrontEnd/JavaScript/正则表达式#_7-原子组中的原子表","347":"/zerdocs/FrontEnd/JavaScript/正则表达式#_8-贪婪匹配-、-、","348":"/zerdocs/FrontEnd/JavaScript/正则表达式#批量验证密码","349":"/zerdocs/FrontEnd/JavaScript/正则表达式#_9-matchall","350":"/zerdocs/FrontEnd/JavaScript/正则表达式#_10-断言匹配","351":"/zerdocs/FrontEnd/JavaScript/正则表达式#将链接替换为想要的网址","352":"/zerdocs/FrontEnd/JavaScript/正则表达式#将不含oss的替换","353":"/zerdocs/FrontEnd/JavaScript/正则表达式#模糊电话后四位","354":"/zerdocs/FrontEnd/JavaScript/正则表达式#案例练习","355":"/zerdocs/FrontEnd/JavaScript/正则表达式#替换练习","356":"/zerdocs/FrontEnd/JavaScript/正则表达式#给原子组起别名","357":"/zerdocs/FrontEnd/JavaScript/获取目录结构#获取目录结构-纯前端","358":"/zerdocs/FrontEnd/JavaScript/高阶函数#高阶函数之filter","359":"/zerdocs/FrontEnd/JavaScript/高阶函数#定义","360":"/zerdocs/FrontEnd/JavaScript/高阶函数#语法","361":"/zerdocs/FrontEnd/JavaScript/高阶函数#用法","362":"/zerdocs/FrontEnd/JavaScript/高阶函数#过滤小于-100","363":"/zerdocs/FrontEnd/JavaScript/高阶函数#返回奇数元素","364":"/zerdocs/FrontEnd/JavaScript/高阶函数#数组去重","365":"/zerdocs/FrontEnd/JavaScript/高阶函数#找出素数","366":"/zerdocs/FrontEnd/JavaScript/高阶函数#高阶函数之map","367":"/zerdocs/FrontEnd/JavaScript/高阶函数#定义-1","368":"/zerdocs/FrontEnd/JavaScript/高阶函数#语法-1","369":"/zerdocs/FrontEnd/JavaScript/高阶函数#用法-1","370":"/zerdocs/FrontEnd/JavaScript/高阶函数#返回数组元素平方后的新数组","371":"/zerdocs/FrontEnd/JavaScript/高阶函数#用给定函数创建新字符串","372":"/zerdocs/FrontEnd/JavaScript/高阶函数#把二维数组变字符串","373":"/zerdocs/FrontEnd/JavaScript/高阶函数#数字序列转为数组-删除符号","374":"/zerdocs/FrontEnd/JavaScript/高阶函数#拿到所有图片的图片名称并以数组形式返回","375":"/zerdocs/FrontEnd/JavaScript/高阶函数#vue中循环注册组件","376":"/zerdocs/FrontEnd/JavaScript/高阶函数#高阶函数之-reduce","377":"/zerdocs/FrontEnd/JavaScript/高阶函数#定义-2","378":"/zerdocs/FrontEnd/JavaScript/高阶函数#语法-2","379":"/zerdocs/FrontEnd/JavaScript/高阶函数#用法-2","380":"/zerdocs/FrontEnd/JavaScript/高阶函数#数组求和","381":"/zerdocs/FrontEnd/JavaScript/高阶函数#数组去重-1","382":"/zerdocs/FrontEnd/JavaScript/高阶函数#计算两个或多个数字的平均值","383":"/zerdocs/FrontEnd/JavaScript/高阶函数#将多维数组转化为一维","384":"/zerdocs/FrontEnd/JavaScript/高阶函数#对象里的属性求和","385":"/zerdocs/FrontEnd/JavaScript/高阶函数#统计数组中每个元素出现的次数","386":"/zerdocs/FrontEnd/JavaScript/高阶函数#高阶函数之-sort","387":"/zerdocs/FrontEnd/JavaScript/高阶函数#定义-3","388":"/zerdocs/FrontEnd/JavaScript/高阶函数#语法-3","389":"/zerdocs/FrontEnd/JavaScript/高阶函数#用法-3","390":"/zerdocs/FrontEnd/JavaScript/高阶函数#自定义高阶函数","391":"/zerdocs/FrontEnd/JavaScript/高阶函数#字符串数组每项长度、并转换为整数数组","392":"/zerdocs/FrontEnd/JavaScript/高阶函数#语法-4","393":"/zerdocs/FrontEnd/JavaScript/高阶函数#用法-4","394":"/zerdocs/FrontEnd/Shell/自动部署脚本#自动部署","395":"/zerdocs/FrontEnd/Shell/自动部署脚本#脚本","396":"/zerdocs/FrontEnd/Shell/自动部署脚本#action","397":"/zerdocs/FrontEnd/TypeScript/初学笔记#基础语法","398":"/zerdocs/FrontEnd/TypeScript/初学笔记#一、基础类型","399":"/zerdocs/FrontEnd/TypeScript/初学笔记#js类型","400":"/zerdocs/FrontEnd/TypeScript/初学笔记#ts新增类型","401":"/zerdocs/FrontEnd/TypeScript/初学笔记#二、类型声名","402":"/zerdocs/FrontEnd/TypeScript/初学笔记#三、as-const-断言","403":"/zerdocs/FrontEnd/TypeScript/初学笔记#面对对象","404":"/zerdocs/FrontEnd/TypeScript/初学笔记#一、类","405":"/zerdocs/FrontEnd/TypeScript/初学笔记#构造函数","406":"/zerdocs/FrontEnd/TypeScript/初学笔记#二、封装","407":"/zerdocs/FrontEnd/TypeScript/初学笔记#三、属性存取器","408":"/zerdocs/FrontEnd/TypeScript/初学笔记#静态属性","409":"/zerdocs/FrontEnd/TypeScript/初学笔记#四、继承","410":"/zerdocs/FrontEnd/TypeScript/初学笔记#重写","411":"/zerdocs/FrontEnd/TypeScript/初学笔记#五、抽象类-abstract-class","412":"/zerdocs/FrontEnd/TypeScript/初学笔记#六、接口","413":"/zerdocs/FrontEnd/TypeScript/初学笔记#基本配置","414":"/zerdocs/FrontEnd/TypeScript/初学笔记#一、ts编译配置","415":"/zerdocs/FrontEnd/TypeScript/初学笔记#二、webpack整合","416":"/zerdocs/FrontEnd/TypeScript/初学笔记#_1-初始化项目","417":"/zerdocs/FrontEnd/TypeScript/初学笔记#_2-下载构建工具","418":"/zerdocs/FrontEnd/TypeScript/初学笔记#_3-配置webpack","419":"/zerdocs/FrontEnd/TypeScript/初学笔记#_4-配置ts编译选项","420":"/zerdocs/FrontEnd/TypeScript/初学笔记#_5-修改package-json配置","421":"/zerdocs/FrontEnd/TypeScript/初学笔记#_6-项目使用","422":"/zerdocs/FrontEnd/TypeScript/初学笔记#_7-babel","423":"/zerdocs/FrontEnd/TypeScript/初学笔记#_7-2-修改webpack-config-js配置文件","424":"/zerdocs/FrontEnd/TypeScript/进阶使用技巧#松散类型自动推推导","425":"/zerdocs/FrontEnd/TypeScript/配置文件详解#typescript-配置文件-tsconfig-json-解析","426":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_1-experimentaldecorators","427":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_2-strictpropertyinitialization","428":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_3-noimplicitany","429":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_4-target","430":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_5-module","431":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_6-lib","432":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_7-moduleresolution","433":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_8-paths","434":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_9-strictnullchecks","435":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_10-nounusedlocals","436":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_11-nounusedparameters","437":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_12-allowjs","438":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_13-typeroots和types","439":"/zerdocs/FrontEnd/TypeScript/配置文件详解#_14-files、include和exclude","440":"/zerdocs/FrontEnd/TypeScript/配置文件详解#tsconfig-json全解析","441":"/zerdocs/GoodTool/#实用工具集锦","442":"/zerdocs/Interview/Brower/事件循环机制#事件循环机制","443":"/zerdocs/Interview/Brower/事件循环机制#进程与线程","444":"/zerdocs/Interview/Brower/事件循环机制#浏览器的线程与进程","445":"/zerdocs/Interview/Brower/事件循环机制#渲染进程任务","446":"/zerdocs/Interview/Brower/事件循环机制#事件循环","447":"/zerdocs/Interview/Brower/事件循环机制#如何理解异步","448":"/zerdocs/Interview/Brower/事件循环机制#消息队列","449":"/zerdocs/Interview/Brower/浏览器网页请求过程#浏览器网页请求过程","450":"/zerdocs/Interview/Brower/浏览器网页请求过程#一、域名解析","451":"/zerdocs/Interview/Brower/浏览器网页请求过程#二、与服务器建立连接","452":"/zerdocs/Interview/Brower/浏览器网页请求过程#三、发起-http-请求","453":"/zerdocs/Interview/Brower/浏览器网页请求过程#请求报文结构","454":"/zerdocs/Interview/Brower/浏览器网页请求过程#四、服务器端响应-http-请求-浏览器得到-html-代码","455":"/zerdocs/Interview/Brower/浏览器网页请求过程#五、浏览器渲染过程","456":"/zerdocs/Interview/Brower/浏览器网页请求过程#一、解析-html","457":"/zerdocs/Interview/Brower/浏览器网页请求过程#二、解析-css","458":"/zerdocs/Interview/Brower/浏览器网页请求过程#三、样式计算","459":"/zerdocs/Interview/Brower/浏览器网页请求过程#四、布局layout","460":"/zerdocs/Interview/Brower/浏览器网页请求过程#五、分层layer","461":"/zerdocs/Interview/Brower/浏览器网页请求过程#六、绘制paint","462":"/zerdocs/Interview/Brower/浏览器网页请求过程#七、分块tiling","463":"/zerdocs/Interview/Brower/浏览器网页请求过程#八、光栅化raster","464":"/zerdocs/Interview/Brower/浏览器网页请求过程#九、画draw","465":"/zerdocs/Interview/Brower/浏览器网页请求过程#回流reflow","466":"/zerdocs/Interview/Brower/浏览器网页请求过程#重绘repaint","467":"/zerdocs/Interview/Brower/浏览器网页请求过程#六、浏览器对页面进行渲染呈现给用户-关闭连接","468":"/zerdocs/Interview/Brower/浏览器网页请求过程#四次挥手","469":"/zerdocs/Interview/Brower/计算机网络#http与https区别","470":"/zerdocs/Interview/Brower/计算机网络#前端缓存","471":"/zerdocs/Interview/Brower/计算机网络#http缓存","472":"/zerdocs/Interview/Brower/计算机网络#浏览器缓存","473":"/zerdocs/Interview/CSS/基础面试题#css基础面试题","474":"/zerdocs/Interview/CSS/基础面试题#水平垂直居中","475":"/zerdocs/Interview/CSS/基础面试题#盒模型的理解","476":"/zerdocs/Interview/CSS/基础面试题#css-选择器","477":"/zerdocs/Interview/CSS/基础面试题#如何实现动画","478":"/zerdocs/Interview/CSS/基础面试题#实现渐变背景","479":"/zerdocs/Interview/CSS/基础面试题#定位position","480":"/zerdocs/Interview/CSS/基础面试题#隐藏元素的方式","481":"/zerdocs/Interview/CSS/基础面试题#用css3实现饼图","482":"/zerdocs/Interview/CSS/基础面试题#margin和padding适用场景","483":"/zerdocs/Interview/CSS/基础面试题#可替换元素","484":"/zerdocs/Interview/CSS/基础面试题#canvas和svg区别","485":"/zerdocs/Interview/CSS/基础面试题#使用base64编码的图片具有以下优点","486":"/zerdocs/Interview/CSS/基础面试题#优化大量图片的加载方法-提高用户体验","487":"/zerdocs/Interview/CSS/基础面试题#优雅降级和渐进增强","488":"/zerdocs/Interview/CSS/基础面试题#新项目css架构设计入手方向","489":"/zerdocs/Interview/CSS/基础面试题#tailwindcss断点对应设备","490":"/zerdocs/Interview/CSS/进阶面试题#实现一个元素的宽高比","491":"/zerdocs/Interview/CSS/进阶面试题#sass-中-mixin-与-extend的区别","492":"/zerdocs/Interview/JavaScript/Promise相关#前端如何做到并发请求","493":"/zerdocs/Interview/JavaScript/Promise相关#方法一-封装队列","494":"/zerdocs/Interview/JavaScript/Promise相关#方法二-函数封装","495":"/zerdocs/Interview/JavaScript/Promise相关#web-worker","496":"/zerdocs/Interview/JavaScript/Promise相关#service-worker","497":"/zerdocs/Interview/JavaScript/Promise相关#特性","498":"/zerdocs/Interview/JavaScript/原型与原型链#new-对象的执行过程","499":"/zerdocs/Interview/JavaScript/原型与原型链#原型和原型链","500":"/zerdocs/Interview/JavaScript/原型与原型链#函数的隐式原型对象","501":"/zerdocs/Interview/JavaScript/原型与原型链#js继承有哪些方式","502":"/zerdocs/Interview/JavaScript/原型与原型链#方式一-es6","503":"/zerdocs/Interview/JavaScript/原型与原型链#方式二-原型链继承","504":"/zerdocs/Interview/JavaScript/原型与原型链#方式三-借用构造函数继承","505":"/zerdocs/Interview/JavaScript/基础面试题#常见基础面试题","506":"/zerdocs/Interview/JavaScript/基础面试题#数据类型","507":"/zerdocs/Interview/JavaScript/基础面试题#类型检测方式","508":"/zerdocs/Interview/JavaScript/基础面试题#数据类型转换","509":"/zerdocs/Interview/JavaScript/基础面试题#其他类型转为数字类型","510":"/zerdocs/Interview/JavaScript/基础面试题#其他类型转为字符串","511":"/zerdocs/Interview/JavaScript/基础面试题#其他类型转为布尔类型","512":"/zerdocs/Interview/JavaScript/基础面试题#相等与全等区别","513":"/zerdocs/Interview/JavaScript/基础面试题#怎么解决精度问题","514":"/zerdocs/Interview/JavaScript/基础面试题#var-let-const-区别","515":"/zerdocs/Interview/JavaScript/基础面试题#const","516":"/zerdocs/Interview/JavaScript/基础面试题#暂存性死区","517":"/zerdocs/Interview/JavaScript/基础面试题#this指向","518":"/zerdocs/Interview/JavaScript/基础面试题#防抖与节流","519":"/zerdocs/Interview/JavaScript/基础面试题#防抖","520":"/zerdocs/Interview/JavaScript/基础面试题#节流","521":"/zerdocs/Interview/JavaScript/基础面试题#前端本地存储方式","522":"/zerdocs/Interview/JavaScript/基础面试题#区别","523":"/zerdocs/Interview/JavaScript/基础面试题#用法","524":"/zerdocs/Interview/JavaScript/基础面试题#generator","525":"/zerdocs/Interview/JavaScript/基础面试题#异步流程同步化","526":"/zerdocs/Interview/JavaScript/基础面试题#requestanimationframe","527":"/zerdocs/Interview/JavaScript/基础面试题#浅拷贝和深拷贝","528":"/zerdocs/Interview/JavaScript/基础面试题#事件捕获和冒泡机制","529":"/zerdocs/Interview/JavaScript/基础面试题#promise链式调用","530":"/zerdocs/Interview/JavaScript/字符串常用方法#字符串常用方法","531":"/zerdocs/Interview/JavaScript/字符串常用方法#charcodeat与fromcharcode","532":"/zerdocs/Interview/JavaScript/字符串常用方法#slice-与-substring区别","533":"/zerdocs/Interview/JavaScript/字符串常用方法#valueof-与-tostring-的异同","534":"/zerdocs/Interview/JavaScript/进阶面试题#常见进阶面试题","535":"/zerdocs/Interview/JavaScript/进阶面试题#模块化","536":"/zerdocs/Interview/JavaScript/进阶面试题#闭包","537":"/zerdocs/Interview/JavaScript/进阶面试题#应用","538":"/zerdocs/Interview/JavaScript/进阶面试题#弊端","539":"/zerdocs/Interview/JavaScript/进阶面试题#函数柯里化","540":"/zerdocs/Interview/JavaScript/进阶面试题#compose","541":"/zerdocs/Interview/JavaScript/进阶面试题#闭包惰性思想","542":"/zerdocs/Interview/JavaScript/进阶面试题#深度优先和广度优先","543":"/zerdocs/Interview/JavaScript/进阶面试题#深度优先遍历-dfs","544":"/zerdocs/Interview/JavaScript/进阶面试题#广度优先遍历-bfs","545":"/zerdocs/Interview/JavaScript/进阶面试题#两者的区别","546":"/zerdocs/Interview/JavaScript/进阶面试题#广度优先遍历的应用","547":"/zerdocs/Interview/JavaScript/进阶面试题#深度优先遍历的应用","548":"/zerdocs/Interview/JavaScript/进阶面试题#loader和plugin区别","549":"/zerdocs/Interview/JavaScript/进阶面试题#前端模块化规范","550":"/zerdocs/Interview/JavaScript/高级面试题#常见高级面试题","551":"/zerdocs/Interview/JavaScript/高级面试题#怎么禁止下载图片-midjourney实现","552":"/zerdocs/Interview/Vue/Vue响应式原理#数组劫持原理","553":"/zerdocs/Interview/Vue/Vue基础篇#对mvvm的理解","554":"/zerdocs/Interview/Vue/Vue基础篇#mixins的原理","555":"/zerdocs/Interview/Vue/Vue声明周期#vue声明周期","556":"/zerdocs/Interview/Vue/Vue声明周期#嵌套组件组件执行顺序","557":"/zerdocs/Interview/Vue/Vue声明周期#beforecreate-与-created-区别","558":"/zerdocs/Interview/Vue/Vue声明周期#created-与-mounted-区别","559":"/zerdocs/Interview/Vue/Vue声明周期#keep-alive内置缓存组件","560":"/zerdocs/Interview/Vue/Vue声明周期#虚拟-dom-vnode-和-dom","561":"/zerdocs/Interview/Vue/Vue声明周期#vue3-0性能提升","562":"/zerdocs/Interview/Vue/npm run xxx执行过程#npm-run-xxx执行过程","563":"/zerdocs/Interview/Vue/npm run xxx执行过程#vue-cli-项目","564":"/zerdocs/Interview/Vue/npm run xxx执行过程#vite项目","565":"/zerdocs/Interview/Vue/前端项目优化#前端项目优化","566":"/zerdocs/Interview/Vue/前端项目优化#html","567":"/zerdocs/Interview/Vue/前端项目优化#css","568":"/zerdocs/Interview/Vue/前端项目优化#javascript","569":"/zerdocs/Interview/Vue/前端项目优化#构建优化","570":"/zerdocs/Interview/Vue/前端项目优化#移除console","571":"/zerdocs/Interview/Vue/前端项目优化#分包和共享依赖","572":"/zerdocs/Interview/Vue/常见Path区别#vuerouter的-base","573":"/zerdocs/Interview/Vue/常见Path区别#vue-config-js的-publicpath","574":"/zerdocs/Interview/Vue/自定义指令#一键复制","575":"/zerdocs/Interview/#面试","576":"/zerdocs/Problem/Graphical/Antv代码片段集锦#网络拓扑图代码","577":"/zerdocs/Problem/Graphical/Antv代码片段集锦#图实例化","578":"/zerdocs/Problem/Graphical/Antv代码片段集锦#注册节点","579":"/zerdocs/Problem/Graphical/Antv使用总结#一、默认收缩二级节点","580":"/zerdocs/Problem/Graphical/Antv使用总结#二、改用iconfont文字不居中问题","581":"/zerdocs/Problem/Graphical/Antv使用总结#三、初始化画图完成后出现这个锯齿","582":"/zerdocs/Problem/Graphical/Echarts问题总结#echarts问题总结","583":"/zerdocs/Problem/Graphical/Echarts问题总结#屏幕适配问题","584":"/zerdocs/Problem/Graphical/Echarts问题总结#左侧菜单折叠响应式","585":"/zerdocs/Problem/Graphical/Echarts问题总结#地图缩放重叠问题","586":"/zerdocs/Problem/Nuxt3/Nuxt3项目踩坑#uncaught-typeerror-cannot-read-properties-of-undefined-reading-prototype","587":"/zerdocs/Problem/Nuxt3/Nuxt3项目踩坑#hidden-与自定义变体不能一起用","588":"/zerdocs/Problem/Nuxt3/Nuxt3项目踩坑#项目一直报-element-相关错误","589":"/zerdocs/Problem/Nuxt3/Nuxt3项目踩坑#跨域问题","590":"/zerdocs/Problem/Nuxt3/Nuxt3项目踩坑#nuxt-simple-sitemap插件使用问题","591":"/zerdocs/Problem/VitePress/VitePress踩坑记录#vitepress踩坑记录","592":"/zerdocs/Problem/VitePress/VitePress踩坑记录#err-invalid-file-url-host","593":"/zerdocs/Problem/VitePress/VitePress踩坑记录#形成原因-全局替换时粗心大意造成img-src属性多了个","594":"/zerdocs/Problem/VitePress/VitePress踩坑记录#解决","595":"/zerdocs/Problem/VitePress/VitePress踩坑记录#实现自动生成文章左侧侧边栏","596":"/zerdocs/Problem/VitePress/VitePress踩坑记录#痛点及需求","597":"/zerdocs/Problem/VitePress/VitePress踩坑记录#想法及实现","598":"/zerdocs/Problem/VitePress/VitePress踩坑记录#在package-json添加脚本执行命令","599":"/zerdocs/Problem/VitePress/VitePress踩坑记录#在博客根目录新建scripts目录并创建文件getsidebar-ts-添加如下代码","600":"/zerdocs/Problem/VitePress/VitePress踩坑记录#vitepress添加本地搜索功能","601":"/zerdocs/Problem/VitePress/VitePress踩坑记录#安装插件","602":"/zerdocs/Problem/VitePress/VitePress踩坑记录#添加和配置插件","603":"/zerdocs/Problem/VitePress/VitePress踩坑记录#样式覆盖","604":"/zerdocs/Problem/VitePress/VuePress踩坑记录#vuepress踩坑记录","605":"/zerdocs/Problem/VitePress/VuePress踩坑记录#坑点一、自定义目录不能根据视口固定","606":"/zerdocs/Problem/VitePress/VuePress踩坑记录#坑点二、引用的gitee图床图片没显示","607":"/zerdocs/Problem/VitePress/VuePress踩坑记录#坑点三、hexo博客源码没有备份-误点vscode放弃所有更改并且回退版本","608":"/zerdocs/Problem/VueProject/Vue项目踩坑一#vue项目踩坑一","609":"/zerdocs/Problem/VueProject/Vue项目踩坑一#点击弹窗父子传值成功-但是数据没有展示","610":"/zerdocs/Problem/VueProject/Vue项目踩坑一#确定-按钮点击失效问题","611":"/zerdocs/Problem/VueProject/Vue项目踩坑一#文本溢出隐藏处理后对不齐问题","612":"/zerdocs/Problem/VueProject/Vue项目踩坑一#路由组件切换-事件总线意外多次触发","613":"/zerdocs/Problem/VueProject/Vue项目踩坑一#前端配合-nginx-服务开启-gzip-页面加载不出来","614":"/zerdocs/Problem/VueProject/Vue项目踩坑一#tailwindcss动态绑定类不能随着渐变","615":"/zerdocs/Problem/VueProject/Vue项目踩坑一#监听非-window-resize-事件不生效问题","616":"/zerdocs/Problem/#编程踩坑积累与总结"},"fieldIds":{"title":0,"titles":1,"text":2},"fieldLength":{"0":[2,1,10],"1":[2,1,21],"2":[2,1,21],"3":[2,1,1],"4":[2,3,88],"5":[2,3,39],"6":[2,3,23],"7":[2,3,40],"8":[2,1,1],"9":[2,2,28],"10":[2,2,31],"11":[2,2,32],"12":[2,2,68],"13":[2,2,76],"14":[1,1,15],"15":[2,1,152],"16":[2,1,46],"17":[2,3,17],"18":[2,1,26],"19":[2,1,5],"20":[4,3,53],"21":[2,3,46],"22":[2,3,59],"23":[3,1,5],"24":[3,4,6],"25":[2,4,27],"26":[2,1,14],"27":[3,1,9],"28":[3,4,21],"29":[3,4,69],"30":[2,1,52],"31":[3,3,1],"32":[3,3,1],"33":[3,1,1],"34":[4,4,36],"35":[2,4,31],"36":[2,4,64],"37":[2,4,38],"38":[2,4,36],"39":[2,1,1],"40":[3,3,9],"41":[3,3,12],"42":[3,3,95],"43":[3,3,157],"44":[2,1,1],"45":[2,2,49],"46":[2,2,109],"47":[2,1,11],"48":[2,1,8],"49":[2,1,11],"50":[2,1,1],"51":[2,1,37],"52":[2,1,2],"53":[2,1,1],"54":[2,3,9],"55":[2,3,73],"56":[2,3,53],"57":[1,5,9],"58":[1,5,9],"59":[1,5,27],"60":[1,5,1],"61":[2,1,96],"62":[2,1,35],"63":[1,5,15],"64":[1,5,23],"65":[2,1,3],"66":[2,4,21],"67":[2,4,1],"68":[2,4,1],"69":[2,1,1],"70":[2,3,9],"71":[2,3,1],"72":[2,3,27],"73":[1,1,15],"74":[1,1,1],"75":[1,1,20],"76":[1,1,1],"77":[2,1,5],"78":[2,4,17],"79":[2,4,10],"80":[2,4,17],"81":[2,4,2],"82":[2,4,24],"83":[2,1,1],"84":[2,4,48],"85":[2,4,20],"86":[2,4,25],"87":[2,4,13],"88":[2,4,11],"89":[2,4,37],"90":[2,4,33],"91":[2,4,34],"92":[2,4,47],"93":[2,4,33],"94":[2,4,9],"95":[2,4,40],"96":[3,4,57],"97":[2,1,1],"98":[1,4,20],"99":[1,4,19],"100":[1,4,6],"101":[1,4,15],"102":[1,1,24],"103":[1,1,53],"104":[1,1,53],"105":[1,1,58],"106":[1,1,60],"107":[1,1,43],"108":[1,1,101],"109":[1,1,85],"110":[1,1,1],"111":[1,1,25],"112":[1,1,42],"113":[1,1,155],"114":[1,1,67],"115":[1,1,1],"116":[2,2,71],"117":[2,2,30],"118":[2,2,39],"119":[1,1,29],"120":[1,1,1],"121":[2,2,90],"122":[2,2,99],"123":[3,2,59],"124":[1,1,15],"125":[3,2,61],"126":[3,2,85],"127":[1,1,1],"128":[2,2,19],"129":[2,2,28],"130":[1,2,55],"131":[1,1,1],"132":[2,2,35],"133":[2,2,11],"134":[2,2,22],"135":[2,2,16],"136":[2,1,1],"137":[1,3,80],"138":[2,1,1],"139":[1,3,58],"140":[1,3,45],"141":[1,3,23],"142":[1,3,1],"143":[1,4,43],"144":[1,4,79],"145":[1,4,54],"146":[1,3,62],"147":[1,3,118],"148":[1,1,1],"149":[2,1,28],"150":[1,1,25],"151":[2,2,27],"152":[2,2,27],"153":[2,2,30],"154":[1,1,1],"155":[1,1,1],"156":[1,1,24],"157":[1,1,104],"158":[3,1,96],"159":[2,1,57],"160":[1,1,1],"161":[1,1,13],"162":[1,1,1],"163":[1,1,1],"164":[2,2,5],"165":[1,2,22],"166":[1,2,12],"167":[1,2,14],"168":[1,2,47],"169":[1,2,1],"170":[1,2,36],"171":[1,1,1],"172":[1,2,26],"173":[1,2,17],"174":[1,2,25],"175":[1,1,1],"176":[1,1,19],"177":[1,1,39],"178":[1,1,39],"179":[1,1,37],"180":[2,1,13],"181":[4,1,17],"182":[1,4,1],"183":[1,5,12],"184":[1,5,17],"185":[1,5,17],"186":[1,5,30],"187":[1,4,1],"188":[1,5,13],"189":[1,5,38],"190":[1,5,40],"191":[1,4,20],"192":[1,5,8],"193":[1,5,11],"194":[1,5,12],"195":[1,5,75],"196":[1,4,1],"197":[1,5,35],"198":[1,5,31],"199":[1,5,20],"200":[1,5,10],"201":[4,5,11],"202":[1,5,12],"203":[1,5,20],"204":[1,1,1],"205":[1,1,30],"206":[1,1,16],"207":[1,1,19],"208":[1,1,12],"209":[2,1,13],"210":[1,1,36],"211":[1,1,56],"212":[1,1,11],"213":[2,1,39],"214":[1,1,17],"215":[1,1,1],"216":[1,2,9],"217":[1,2,19],"218":[2,1,25],"219":[5,4,1],"220":[5,3,30],"221":[3,3,32],"222":[1,1,23],"223":[1,1,4],"224":[1,1,19],"225":[1,1,15],"226":[1,1,3],"227":[2,2,24],"228":[2,2,8],"229":[1,1,15],"230":[2,1,47],"231":[1,1,49],"232":[2,1,18],"233":[2,1,14],"234":[3,1,86],"235":[3,1,50],"236":[1,1,1],"237":[1,1,3],"238":[2,2,21],"239":[2,2,35],"240":[3,2,33],"241":[1,4,11],"242":[1,4,22],"243":[1,4,51],"244":[3,1,1],"245":[1,3,25],"246":[2,3,18],"247":[2,3,28],"248":[2,1,1],"249":[2,2,30],"250":[2,2,27],"251":[2,1,20],"252":[2,1,11],"253":[2,1,8],"254":[2,1,10],"255":[2,1,44],"256":[2,1,25],"257":[2,1,24],"258":[2,1,11],"259":[2,1,15],"260":[2,1,27],"261":[2,1,16],"262":[1,1,73],"263":[2,1,31],"264":[2,1,27],"265":[1,1,61],"266":[1,1,20],"267":[1,1,15],"268":[1,1,48],"269":[1,1,44],"270":[1,2,57],"271":[1,2,42],"272":[1,2,19],"273":[1,1,1],"274":[1,2,49],"275":[1,2,25],"276":[1,2,20],"277":[3,2,18],"278":[2,1,34],"279":[1,1,70],"280":[1,1,1],"281":[1,2,17],"282":[1,2,53],"283":[1,2,33],"284":[1,2,10],"285":[1,2,39],"286":[1,1,1],"287":[1,2,30],"288":[1,2,52],"289":[1,2,34],"290":[1,2,40],"291":[1,2,31],"292":[1,1,47],"293":[1,1,33],"294":[1,1,34],"295":[1,1,56],"296":[1,1,61],"297":[1,1,34],"298":[1,1,42],"299":[1,1,45],"300":[1,1,34],"301":[1,1,68],"302":[1,1,140],"303":[2,1,54],"304":[2,1,40],"305":[2,1,18],"306":[2,1,18],"307":[2,1,38],"308":[2,1,50],"309":[2,1,28],"310":[2,1,36],"311":[2,1,46],"312":[2,1,16],"313":[4,1,37],"314":[4,1,40],"315":[2,1,84],"316":[1,1,67],"317":[1,1,1],"318":[1,2,112],"319":[1,2,81],"320":[3,1,1],"321":[1,3,11],"322":[4,4,41],"323":[4,4,15],"324":[5,4,39],"325":[1,3,25],"326":[4,4,50],"327":[4,4,24],"328":[5,4,18],"329":[2,1,18],"330":[1,1,27],"331":[1,1,23],"332":[1,1,17],"333":[1,1,36],"334":[1,1,39],"335":[1,1,49],"336":[1,1,10],"337":[2,1,1],"338":[1,1,5],"339":[2,1,3],"340":[3,1,15],"341":[4,1,31],"342":[3,1,22],"343":[2,1,1],"344":[2,1,6],"345":[3,1,48],"346":[3,1,74],"347":[3,1,58],"348":[1,3,27],"349":[2,1,42],"350":[2,1,49],"351":[1,3,1],"352":[1,3,1],"353":[1,3,1],"354":[1,1,1],"355":[1,2,1],"356":[1,2,1],"357":[3,1,70],"358":[1,1,1],"359":[1,2,17],"360":[1,2,14],"361":[1,2,1],"362":[2,3,22],"363":[1,3,21],"364":[1,3,40],"365":[1,3,39],"366":[1,1,1],"367":[1,2,8],"368":[1,2,19],"369":[1,2,1],"370":[1,3,32],"371":[1,3,19],"372":[1,3,18],"373":[2,3,18],"374":[1,3,28],"375":[1,3,23],"376":[2,1,1],"377":[1,3,3],"378":[1,3,41],"379":[1,3,1],"380":[1,4,17],"381":[1,4,17],"382":[1,4,16],"383":[1,4,23],"384":[1,4,25],"385":[1,4,34],"386":[2,1,1],"387":[1,3,10],"388":[1,3,38],"389":[1,3,28],"390":[1,1,1],"391":[2,3,1],"392":[1,2,18],"393":[1,2,36],"394":[1,1,1],"395":[1,1,34],"396":[1,1,128],"397":[1,1,1],"398":[2,2,1],"399":[1,4,70],"400":[1,4,76],"401":[2,2,13],"402":[4,2,35],"403":[1,1,1],"404":[2,2,24],"405":[1,4,23],"406":[2,2,52],"407":[2,2,32],"408":[1,4,25],"409":[2,2,27],"410":[1,4,32],"411":[5,2,22],"412":[2,2,22],"413":[1,1,1],"414":[2,2,117],"415":[2,2,2],"416":[2,4,8],"417":[2,4,14],"418":[2,4,109],"419":[2,4,9],"420":[3,4,20],"421":[2,4,7],"422":[2,4,26],"423":[5,4,30],"424":[1,1,27],"425":[5,1,19],"426":[2,5,44],"427":[2,5,35],"428":[2,5,27],"429":[2,5,33],"430":[2,5,25],"431":[2,5,29],"432":[2,5,56],"433":[2,5,35],"434":[2,5,55],"435":[2,5,13],"436":[2,5,9],"437":[2,5,7],"438":[2,5,16],"439":[3,5,22],"440":[2,5,186],"441":[1,1,1],"442":[1,1,1],"443":[1,1,20],"444":[1,1,20],"445":[1,1,16],"446":[1,1,22],"447":[1,1,32],"448":[1,1,41],"449":[1,1,26],"450":[2,1,61],"451":[2,1,16],"452":[4,1,11],"453":[1,5,6],"454":[7,1,8],"455":[2,1,29],"456":[3,3,55],"457":[3,3,12],"458":[2,3,18],"459":[2,3,9],"460":[2,3,2],"461":[2,3,2],"462":[2,3,2],"463":[2,3,9],"464":[2,3,14],"465":[1,3,35],"466":[1,3,36],"467":[3,1,1],"468":[1,4,21],"469":[1,1,10],"470":[1,1,1],"471":[1,2,27],"472":[1,2,4],"473":[1,1,1],"474":[1,1,39],"475":[1,1,29],"476":[2,1,21],"477":[1,1,11],"478":[1,1,44],"479":[1,1,41],"480":[1,1,1],"481":[1,1,24],"482":[1,1,55],"483":[1,1,19],"484":[1,1,42],"485":[2,1,30],"486":[3,1,35],"487":[1,1,10],"488":[1,1,26],"489":[1,1,31],"490":[1,1,30],"491":[5,1,36],"492":[1,1,25],"493":[2,2,70],"494":[2,2,75],"495":[2,1,46],"496":[2,1,14],"497":[1,1,27],"498":[2,1,40],"499":[1,1,24],"500":[1,2,15],"501":[1,1,1],"502":[2,2,21],"503":[2,2,19],"504":[2,2,19],"505":[1,1,1],"506":[1,1,32],"507":[1,2,35],"508":[1,1,1],"509":[1,2,60],"510":[1,2,20],"511":[1,2,9],"512":[1,1,71],"513":[1,1,14],"514":[4,1,19],"515":[1,5,13],"516":[1,5,16],"517":[1,1,11],"518":[1,1,9],"519":[1,2,58],"520":[1,2,54],"521":[1,1,1],"522":[1,3,23],"523":[1,2,40],"524":[1,1,28],"525":[1,2,45],"526":[1,1,25],"527":[1,1,61],"528":[1,1,30],"529":[1,1,13],"530":[1,1,38],"531":[1,2,16],"532":[3,2,31],"533":[4,2,44],"534":[1,1,1],"535":[1,1,21],"536":[1,1,53],"537":[1,2,3],"538":[1,2,4],"539":[1,1,52],"540":[1,2,40],"541":[1,2,23],"542":[1,1,14],"543":[3,2,48],"544":[3,2,51],"545":[1,2,6],"546":[1,2,8],"547":[1,2,18],"548":[1,1,38],"549":[1,1,26],"550":[1,1,1],"551":[3,1,112],"552":[1,1,16],"553":[1,1,18],"554":[1,1,43],"555":[1,1,13],"556":[1,2,9],"557":[4,1,1],"558":[4,1,5],"559":[2,1,16],"560":[4,1,35],"561":[2,1,7],"562":[3,1,1],"563":[3,3,33],"564":[1,3,24],"565":[1,1,1],"566":[1,1,1],"567":[1,1,1],"568":[1,1,1],"569":[1,1,1],"570":[1,2,26],"571":[1,2,44],"572":[2,1,47],"573":[4,1,79],"574":[1,1,61],"575":[1,1,3],"576":[1,1,1],"577":[1,1,182],"578":[1,1,294],"579":[2,1,11],"580":[2,1,23],"581":[2,1,1],"582":[1,1,1],"583":[1,1,21],"584":[1,1,64],"585":[1,1,68],"586":[10,1,55],"587":[2,10,23],"588":[3,1,24],"589":[1,1,42],"590":[3,1,35],"591":[1,1,1],"592":[5,1,20],"593":[4,6,1],"594":[1,6,14],"595":[1,1,1],"596":[1,2,10],"597":[1,2,1],"598":[2,3,1],"599":[3,3,117],"600":[1,1,5],"601":[1,2,11],"602":[1,2,46],"603":[1,2,46],"604":[1,1,1],"605":[2,1,30],"606":[2,1,5],"607":[3,1,15],"608":[1,1,1],"609":[2,1,38],"610":[3,1,138],"611":[1,1,21],"612":[2,1,18],"613":[5,1,26],"614":[1,1,46],"615":[4,1,58],"616":[1,1,5]},"averageFieldLength":[1.6758508914100478,2.072933549432737,28.74068071312804],"storedFields":{"0":{"title":"一、相关概念","titles":[null]},"1":{"title":"二、数据库操作","titles":[null]},"2":{"title":"三、集合相关操作","titles":[null]},"3":{"title":"四、文档相关操作","titles":[null]},"4":{"title":"1.查询","titles":[null,"四、文档相关操作"]},"5":{"title":"2.插入","titles":[null,"四、文档相关操作"]},"6":{"title":"3.删除","titles":[null,"四、文档相关操作"]},"7":{"title":"4.更新","titles":[null,"四、文档相关操作"]},"8":{"title":"五、","titles":[null]},"9":{"title":"1.插入","titles":[null,"五、"]},"10":{"title":"2.删除","titles":[null,"五、"]},"11":{"title":"3.更新","titles":[null,"五、"]},"12":{"title":"4.查询","titles":[null,"五、"]},"13":{"title":"5.模型","titles":[null,"五、"]},"14":{"title":"Node大文件上传","titles":[]},"15":{"title":"Vue 前端代码","titles":["Node大文件上传"]},"16":{"title":"一、读取文件","titles":[null]},"17":{"title":"path 路径模块","titles":[null,"一、读取文件"]},"18":{"title":"二、写入文件","titles":[null]},"19":{"title":"三、服务器操作","titles":[null]},"20":{"title":"1.创建 web 服务器步骤","titles":[null,"三、服务器操作"]},"21":{"title":"2.动态响应内容","titles":[null,"三、服务器操作"]},"22":{"title":"3.响应文件内容","titles":[null,"三、服务器操作"]},"23":{"title":"四、Node 模块化","titles":[null]},"24":{"title":"1.module 对象","titles":[null,"四、Node 模块化"]},"25":{"title":"2.模块共享","titles":[null,"四、Node 模块化"]},"26":{"title":"五、模块加载机制","titles":[null]},"27":{"title":"六、Express 模块","titles":[null]},"28":{"title":"1.Express 创建服务器","titles":[null,"六、Express 模块"]},"29":{"title":"2.Express 中间件","titles":[null,"六、Express 模块"]},"30":{"title":"七、编写接口","titles":[null]},"31":{"title":"1. CORS 跨域资源共享","titles":[null,"七、编写接口"]},"32":{"title":"2.CORS 头部","titles":[null,"七、编写接口"]},"33":{"title":"八、Node 连接数据库","titles":[null]},"34":{"title":"1.配置 mysql 模块","titles":[null,"八、Node 连接数据库"]},"35":{"title":"2.查询数据","titles":[null,"八、Node 连接数据库"]},"36":{"title":"3.插入数据","titles":[null,"八、Node 连接数据库"]},"37":{"title":"4.更新数据","titles":[null,"八、Node 连接数据库"]},"38":{"title":"5.删除数据","titles":[null,"八、Node 连接数据库"]},"39":{"title":"九、身份认证","titles":[null]},"40":{"title":"1. http 协议的特性","titles":[null,"九、身份认证"]},"41":{"title":"2.Cookie 特性","titles":[null,"九、身份认证"]},"42":{"title":"3.Session 认证","titles":[null,"九、身份认证"]},"43":{"title":"4.JWT 认证","titles":[null,"九、身份认证"]},"44":{"title":"Node 简单上传文件","titles":[]},"45":{"title":"Vue 前端代码","titles":["Node 简单上传文件"]},"46":{"title":"Express 后端代码","titles":["Node 简单上传文件"]},"47":{"title":"一、解决痛点","titles":[null]},"48":{"title":"二、优点和应用","titles":[null]},"49":{"title":"三、基本组成","titles":[null]},"50":{"title":"四、工作原理","titles":[null]},"51":{"title":"五、CentOS安装Docker","titles":[null]},"52":{"title":"六、阿里云镜像加速","titles":[null]},"53":{"title":"七、常用命令","titles":[null]},"54":{"title":"1. Docker","titles":[null,"七、常用命令"]},"55":{"title":"2. 镜像","titles":[null,"七、常用命令"]},"56":{"title":"3. 容器","titles":[null,"七、常用命令"]},"57":{"title":"启动守护式","titles":[null,"七、常用命令","3. 容器"]},"58":{"title":"查看容器日志","titles":[null,"七、常用命令","3. 容器"]},"59":{"title":"容器备份到主机","titles":[null,"七、常用命令","3. 容器"]},"60":{"title":"容器卷","titles":[null,"七、常用命令","3. 容器"]},"61":{"title":"八、","titles":[null]},"62":{"title":"九、Docker网络","titles":[null]},"63":{"title":"共用网卡","titles":[null,"九、Docker网络","3. 容器"]},"64":{"title":"自定义网络","titles":[null,"九、Docker网络","3. 容器"]},"65":{"title":"十、","titles":[null]},"66":{"title":"1.","titles":[null,"十、","3. 容器"]},"67":{"title":"2.","titles":[null,"十、","3. 容器"]},"68":{"title":"3.","titles":[null,"十、","3. 容器"]},"69":{"title":"一、Nginx安装","titles":[null]},"70":{"title":"1.安装命令","titles":[null,"一、Nginx安装"]},"71":{"title":"2.Linux目录结构","titles":[null,"一、Nginx安装"]},"72":{"title":"3.基础命令","titles":[null,"一、Nginx安装"]},"73":{"title":"编写配置","titles":[null]},"74":{"title":"日志分析器","titles":[null]},"75":{"title":"CentOS7联网","titles":[null]},"76":{"title":"Angular基础总结一","titles":[]},"77":{"title":"一、NgModule","titles":["Angular基础总结一"]},"78":{"title":"@NgModule元数据","titles":["Angular基础总结一","一、NgModule",null]},"79":{"title":"declarations 数组","titles":["Angular基础总结一","一、NgModule",null]},"80":{"title":"imports 数组","titles":["Angular基础总结一","一、NgModule",null]},"81":{"title":"providers 数组","titles":["Angular基础总结一","一、NgModule",null]},"82":{"title":"bootstrap 数组","titles":["Angular基础总结一","一、NgModule",null]},"83":{"title":"二、模板基础语法","titles":["Angular基础总结一"]},"84":{"title":"1. 模板表达式","titles":["Angular基础总结一","二、模板基础语法",null]},"85":{"title":"2. 模板来源","titles":["Angular基础总结一","二、模板基础语法",null]},"86":{"title":"3. 属性绑定","titles":["Angular基础总结一","二、模板基础语法",null]},"87":{"title":"4. 自定义属性绑定","titles":["Angular基础总结一","二、模板基础语法",null]},"88":{"title":"5. 插值表达式属性绑定","titles":["Angular基础总结一","二、模板基础语法",null]},"89":{"title":"6. 单个class样式绑定","titles":["Angular基础总结一","二、模板基础语法",null]},"90":{"title":"7. 绑定多个class","titles":["Angular基础总结一","二、模板基础语法",null]},"91":{"title":"8. 绑定单个style","titles":["Angular基础总结一","二、模板基础语法",null]},"92":{"title":"9. 绑定多个style","titles":["Angular基础总结一","二、模板基础语法",null]},"93":{"title":"10. 绑定事件","titles":["Angular基础总结一","二、模板基础语法",null]},"94":{"title":"11. 输入与输出属性","titles":["Angular基础总结一","二、模板基础语法",null]},"95":{"title":"输入属性@Input","titles":["Angular基础总结一","二、模板基础语法",null]},"96":{"title":"输出属性@Output()","titles":["Angular基础总结一","二、模板基础语法",null]},"97":{"title":"三、组件样式","titles":["Angular基础总结一"]},"98":{"title":"宿主选择器","titles":["Angular基础总结一","三、组件样式",null]},"99":{"title":"祖先选择器","titles":["Angular基础总结一","三、组件样式",null]},"100":{"title":"样式模块化","titles":["Angular基础总结一","三、组件样式",null]},"101":{"title":"视图封装模式","titles":["Angular基础总结一","三、组件样式",null]},"102":{"title":"组件投影","titles":[null]},"103":{"title":"ViewChild","titles":[null]},"104":{"title":"ViewChildren","titles":[null]},"105":{"title":"ContentChild","titles":[null]},"106":{"title":"ContentChildren","titles":[null]},"107":{"title":"自定义管道","titles":[null]},"108":{"title":"非纯管道","titles":[null]},"109":{"title":"生命周期","titles":[null]},"110":{"title":"变更检测","titles":[null]},"111":{"title":"默认策略下触发变更检测的时机","titles":[null]},"112":{"title":"onPush下触发变更检测时机","titles":[null]},"113":{"title":"动态组件","titles":[null]},"114":{"title":"NgTemplateOutlet指令","titles":[null]},"115":{"title":"双向绑定","titles":[null]},"116":{"title":"1. 基本双向绑定","titles":[null,"双向绑定"]},"117":{"title":"2. input双向绑定","titles":[null,"双向绑定"]},"118":{"title":"3. 表单Form中双向绑定","titles":[null,"双向绑定"]},"119":{"title":"属性型指令","titles":[null]},"120":{"title":"结构型指令","titles":[null]},"121":{"title":"*ngIf指令","titles":[null,"结构型指令"]},"122":{"title":"*ngFor指令","titles":[null,"结构型指令"]},"123":{"title":"[ngSwitch]指令","titles":[null,"结构型指令"]},"124":{"title":"自定义指令","titles":[null]},"125":{"title":"自定义高亮指令（属性型）","titles":[null,"自定义指令"]},"126":{"title":"自定义unless指令（结构型）","titles":[null,"自定义指令"]},"127":{"title":"模板元素","titles":[null]},"128":{"title":"ng-template","titles":[null,"模板元素"]},"129":{"title":"ng-container","titles":[null,"模板元素"]},"130":{"title":"模板引用变量","titles":[null,"模板元素"]},"131":{"title":"操作符","titles":[null]},"132":{"title":"管道 |","titles":[null,"操作符"]},"133":{"title":"安全链?","titles":[null,"操作符"]},"134":{"title":"非空断言!","titles":[null,"操作符"]},"135":{"title":"类型转换函数$any()","titles":[null,"操作符"]},"136":{"title":"一、前置知识","titles":[null]},"137":{"title":"虚拟DOM","titles":[null,"一、前置知识"]},"138":{"title":"二、组件","titles":[null]},"139":{"title":"函数式组件","titles":[null,"二、组件"]},"140":{"title":"类式组件","titles":[null,"二、组件"]},"141":{"title":"补充","titles":[null,"二、组件"]},"142":{"title":"组实例三大属性","titles":[null,"二、组件"]},"143":{"title":"state","titles":[null,"二、组件","组实例三大属性"]},"144":{"title":"props","titles":[null,"二、组件","组实例三大属性"]},"145":{"title":"refs","titles":[null,"二、组件","组实例三大属性"]},"146":{"title":"事件处理","titles":[null,"二、组件"]},"147":{"title":"组件生命周期","titles":[null,"二、组件"]},"148":{"title":"Vite底层原理学习","titles":[]},"149":{"title":"构建工具承担：","titles":["Vite底层原理学习"]},"150":{"title":"inheritAttrs","titles":[null]},"151":{"title":"场景一：","titles":[null,"inheritAttrs"]},"152":{"title":"场景二：","titles":[null,"inheritAttrs"]},"153":{"title":"场景三：","titles":[null,"inheritAttrs"]},"154":{"title":"分页与搜索条件记录并回显优化","titles":[]},"155":{"title":"整体逻辑","titles":["分页与搜索条件记录并回显优化"]},"156":{"title":"Store","titles":["分页与搜索条件记录并回显优化"]},"157":{"title":"Mixins","titles":["分页与搜索条件记录并回显优化"]},"158":{"title":"列表页 xxxList.vue","titles":["分页与搜索条件记录并回显优化"]},"159":{"title":"一、删除最后一条数据跳转到上一页","titles":[]},"160":{"title":"Grid布局学习笔记","titles":[]},"161":{"title":"实用网站","titles":["Grid布局学习笔记"]},"162":{"title":"基本概念","titles":["Grid布局学习笔记"]},"163":{"title":"容器属性","titles":["Grid布局学习笔记"]},"164":{"title":"开启 Grid布局","titles":["Grid布局学习笔记","容器属性"]},"165":{"title":"容器划分行列","titles":["Grid布局学习笔记","容器属性"]},"166":{"title":"调整间距属性","titles":["Grid布局学习笔记","容器属性"]},"167":{"title":"容器内网格对齐方式","titles":["Grid布局学习笔记","容器属性"]},"168":{"title":"网格内项目对其方式","titles":["Grid布局学习笔记","容器属性"]},"169":{"title":"项目排列顺序","titles":["Grid布局学习笔记","容器属性"]},"170":{"title":"容器中区域定义","titles":["Grid布局学习笔记","容器属性"]},"171":{"title":"项目属性","titles":["Grid布局学习笔记"]},"172":{"title":"合并单元格属性","titles":["Grid布局学习笔记","项目属性"]},"173":{"title":"项目区域定义","titles":["Grid布局学习笔记","项目属性"]},"174":{"title":"单个项目位置","titles":["Grid布局学习笔记","项目属性"]},"175":{"title":"CSS常用代码段","titles":[]},"176":{"title":"单行与多行溢出隐藏","titles":["CSS常用代码段"]},"177":{"title":"自定义滚动条","titles":["CSS常用代码段"]},"178":{"title":"画布网状满天星背景","titles":["CSS常用代码段"]},"179":{"title":"轮播闪光","titles":["CSS常用代码段"]},"180":{"title":"flex布局子元素给了高度，实际渲染确有小数点问题","titles":["CSS常用代码段"]},"181":{"title":"妙妙怪的《CSS 揭秘》读书摘要","titles":[]},"182":{"title":"背景与边框","titles":["妙妙怪的《CSS 揭秘》读书摘要"]},"183":{"title":"多重边框","titles":["妙妙怪的《CSS 揭秘》读书摘要","背景与边框"]},"184":{"title":"灵活的背景定位","titles":["妙妙怪的《CSS 揭秘》读书摘要","背景与边框"]},"185":{"title":"边框内圆角","titles":["妙妙怪的《CSS 揭秘》读书摘要","背景与边框"]},"186":{"title":"条纹背景","titles":["妙妙怪的《CSS 揭秘》读书摘要","背景与边框"]},"187":{"title":"形状","titles":["妙妙怪的《CSS 揭秘》读书摘要"]},"188":{"title":"圆角","titles":["妙妙怪的《CSS 揭秘》读书摘要","形状"]},"189":{"title":"平行四边形","titles":["妙妙怪的《CSS 揭秘》读书摘要","形状"]},"190":{"title":"梯形","titles":["妙妙怪的《CSS 揭秘》读书摘要","形状"]},"191":{"title":"视觉效果","titles":["妙妙怪的《CSS 揭秘》读书摘要"]},"192":{"title":"双侧投影","titles":["妙妙怪的《CSS 揭秘》读书摘要","视觉效果"]},"193":{"title":"染色效果","titles":["妙妙怪的《CSS 揭秘》读书摘要","视觉效果"]},"194":{"title":"毛玻璃","titles":["妙妙怪的《CSS 揭秘》读书摘要","视觉效果"]},"195":{"title":"折角效果","titles":["妙妙怪的《CSS 揭秘》读书摘要","视觉效果"]},"196":{"title":"字体排印","titles":["妙妙怪的《CSS 揭秘》读书摘要"]},"197":{"title":"插入换行","titles":["妙妙怪的《CSS 揭秘》读书摘要","字体排印"]},"198":{"title":"文本行斑马线","titles":["妙妙怪的《CSS 揭秘》读书摘要","字体排印"]},"199":{"title":"自定义下划线","titles":["妙妙怪的《CSS 揭秘》读书摘要","字体排印"]},"200":{"title":"凹凸印刷文字效果","titles":["妙妙怪的《CSS 揭秘》读书摘要","字体排印"]},"201":{"title":"满幅背景、定宽内容（页脚）","titles":["妙妙怪的《CSS 揭秘》读书摘要","字体排印"]},"202":{"title":"紧贴底部的页脚","titles":["妙妙怪的《CSS 揭秘》读书摘要","字体排印"]},"203":{"title":"闪烁效果","titles":["妙妙怪的《CSS 揭秘》读书摘要","字体排印"]},"204":{"title":"Git常用操作","titles":[]},"205":{"title":"拉取最新提交","titles":["Git常用操作"]},"206":{"title":"删除远程分支","titles":["Git常用操作"]},"207":{"title":"删除Tag","titles":["Git常用操作"]},"208":{"title":"删除远程文件","titles":["Git常用操作"]},"209":{"title":"fork后的仓库，拉取合并原仓库的更新","titles":["Git常用操作"]},"210":{"title":"合并多次提交","titles":["Git常用操作"]},"211":{"title":"关联多个代码托管平台","titles":["Git常用操作"]},"212":{"title":"改错分支但为未提交","titles":["Git常用操作"]},"213":{"title":"提交完未推送前，需要再次提交","titles":["Git常用操作"]},"214":{"title":"修改第一次提交信息","titles":["Git常用操作"]},"215":{"title":"代码提交到了错误的分支","titles":["Git常用操作"]},"216":{"title":"方法一","titles":["Git常用操作","代码提交到了错误的分支"]},"217":{"title":"方法二","titles":["Git常用操作","代码提交到了错误的分支"]},"218":{"title":"Git 提交规范化","titles":["Git常用操作"]},"219":{"title":"注意：需要 git init后才能初始化，否则报错如下","titles":["Git常用操作","Git 提交规范化","方法二"]},"220":{"title":"@commitlint/cli与@commitlint/config-conventional","titles":["Git常用操作","Git 提交规范化"]},"221":{"title":"cz-conventional-changelog","titles":["Git常用操作","Git 提交规范化"]},"222":{"title":"安装","titles":[null]},"223":{"title":"预览所有主题命令","titles":[null]},"224":{"title":"初始化并应用主题","titles":[null]},"225":{"title":"分隔符乱码问题","titles":[null]},"226":{"title":"配置PowerShell","titles":[null]},"227":{"title":"1.打开配置文件方式一","titles":[null,"配置PowerShell"]},"228":{"title":"2.打开配置文件方式二","titles":[null,"配置PowerShell"]},"229":{"title":"自定义主题","titles":[null]},"230":{"title":"VS Code终端配置","titles":[null]},"231":{"title":"隐藏提示语","titles":[null]},"232":{"title":"1.生成公钥和私钥","titles":[null]},"233":{"title":"2.在代码托管平台设置添加公钥","titles":[null]},"234":{"title":"3.添加私钥到ssh-agent中","titles":[null]},"235":{"title":"4.创建config件，打开编辑","titles":[null]},"236":{"title":"SSH公钥私钥加密解密原理","titles":[null]},"237":{"title":"Javascript实现异步","titles":[]},"238":{"title":"方式一：回调函数","titles":["Javascript实现异步",null]},"239":{"title":"方式二：Promise","titles":["Javascript实现异步",null]},"240":{"title":"语法糖：async /await","titles":["Javascript实现异步",null]},"241":{"title":"实现fn1先执行","titles":["Javascript实现异步",null,"语法糖：async /await"]},"242":{"title":"捕获异常","titles":["Javascript实现异步",null,"语法糖：async /await"]},"243":{"title":"使用陷阱","titles":["Javascript实现异步",null,"语法糖：async /await"]},"244":{"title":"if else 多分支优化","titles":[]},"245":{"title":"简单分支","titles":["if else 多分支优化"]},"246":{"title":"条件单一,处理不同","titles":["if else 多分支优化"]},"247":{"title":"条件复杂,处理也复杂","titles":["if else 多分支优化"]},"248":{"title":"JS 图片懒加载","titles":[]},"249":{"title":"方案一：监听滚动","titles":["JS 图片懒加载"]},"250":{"title":"方案二：观察者","titles":["JS 图片懒加载"]},"251":{"title":"1.算术运算符","titles":[null,null]},"252":{"title":"2.赋值运算符","titles":[null,null]},"253":{"title":"3..运算符","titles":[null,null]},"254":{"title":"4.自增和自减","titles":[null,null]},"255":{"title":"5.逻辑运算符","titles":[null,null]},"256":{"title":"6.关系运算符","titles":[null,null]},"257":{"title":"7.相等运算符","titles":[null,null]},"258":{"title":"8.条件运算符","titles":[null,null]},"259":{"title":"9.控制语句","titles":[null,null]},"260":{"title":"10.循环语句","titles":[null,null]},"261":{"title":"11.数据类型","titles":[null,null]},"262":{"title":"this指向","titles":[null,null]},"263":{"title":"可变参数 arguments","titles":[null,null]},"264":{"title":"剩余参数 ...args","titles":[null,null]},"265":{"title":"Map","titles":[null,null]},"266":{"title":"Set","titles":[null,null]},"267":{"title":"随机数生成","titles":[null,null]},"268":{"title":"时间格式化","titles":[null,null]},"269":{"title":"面向对象之类","titles":[null,null]},"270":{"title":"封装","titles":[null,null,"面向对象之类"]},"271":{"title":"继承","titles":[null,null,"面向对象之类"]},"272":{"title":"多态","titles":[null,null,"面向对象之类"]},"273":{"title":"对象的结构","titles":[null,null]},"274":{"title":"原型","titles":[null,null,"对象的结构"]},"275":{"title":"原型链","titles":[null,null,"对象的结构"]},"276":{"title":"修改原型","titles":[null,null,"对象的结构"]},"277":{"title":"instanceof/in/hasOwn","titles":[null,null,"对象的结构"]},"278":{"title":"10.new运算符","titles":[null,null]},"279":{"title":"括号匹配","titles":[null]},"280":{"title":"简单递归","titles":[null]},"281":{"title":"计算阶乘","titles":[null,"简单递归"]},"282":{"title":"扁平化数组","titles":[null,"简单递归"]},"283":{"title":"反转字符串","titles":[null,"简单递归"]},"284":{"title":"求最大公约数","titles":[null,"简单递归"]},"285":{"title":"斐波那契数列","titles":[null,"简单递归"]},"286":{"title":"排序算法","titles":[null]},"287":{"title":"冒泡排序","titles":[null,"排序算法"]},"288":{"title":"选择排序","titles":[null,"排序算法"]},"289":{"title":"快速排序","titles":[null,"排序算法"]},"290":{"title":"插入排序","titles":[null,"排序算法"]},"291":{"title":"希尔排序","titles":[null,"排序算法"]},"292":{"title":"求两个有序数组的中位数","titles":[null]},"293":{"title":"实现EventEmitter","titles":[null]},"294":{"title":"返回给定起止字符串月份中间所有月份","titles":[null]},"295":{"title":"实现Promise的all方法","titles":[null]},"296":{"title":"LRU缓存算法","titles":[null]},"297":{"title":"不使用乘法符号乘法函数","titles":[null]},"298":{"title":"链表反转","titles":[null]},"299":{"title":"二叉树的遍历","titles":[null]},"300":{"title":"二叉搜索树的插入和查找","titles":[null]},"301":{"title":"字符串搜索算法","titles":[null]},"302":{"title":"数字转中文","titles":[null]},"303":{"title":"一、声名Promise并绑定this","titles":[null]},"304":{"title":"二、状态保护与执行者异步捕获","titles":[null]},"305":{"title":"三、then方法构建","titles":[null]},"306":{"title":"四、实现then异步","titles":[null]},"307":{"title":"五、解决同步代码需要等待执行问题","titles":[null]},"308":{"title":"六、then的链式操作","titles":[null]},"309":{"title":"七、返回值的判断与处理","titles":[null]},"310":{"title":"八、代码优化及复用","titles":[null]},"311":{"title":"九、返回类型约束","titles":[null]},"312":{"title":"十、实现resolve和reject","titles":[null]},"313":{"title":"十一、Promise.all()实现","titles":[null]},"314":{"title":"十二、实现Promise.race()","titles":[null]},"315":{"title":"十三、完整代码","titles":[null]},"316":{"title":"基本数据类型","titles":[null]},"317":{"title":"对象数组去重","titles":[null]},"318":{"title":"对象相同比较","titles":[null,"对象数组去重"]},"319":{"title":"对象数组去重","titles":[null,"对象数组去重"]},"320":{"title":"JS常用的求交集、并集、差集的方法","titles":[]},"321":{"title":"普通数组","titles":["JS常用的求交集、并集、差集的方法"]},"322":{"title":"一、并集(A∪B)","titles":["JS常用的求交集、并集、差集的方法","普通数组"]},"323":{"title":"二、交集（A∩B）","titles":["JS常用的求交集、并集、差集的方法","普通数组"]},"324":{"title":"三、差集(A-B)","titles":["JS常用的求交集、并集、差集的方法","普通数组"]},"325":{"title":"对象数组","titles":["JS常用的求交集、并集、差集的方法"]},"326":{"title":"一、并集（A∪B）","titles":["JS常用的求交集、并集、差集的方法","对象数组"]},"327":{"title":"二、交集（A∩B）","titles":["JS常用的求交集、并集、差集的方法","对象数组"]},"328":{"title":"三、差集(A-B)","titles":["JS常用的求交集、并集、差集的方法","对象数组"]},"329":{"title":"Blob与 File","titles":[null]},"330":{"title":"ArrayBuffer","titles":[null]},"331":{"title":"FileReader","titles":[null]},"332":{"title":"DataView","titles":[null]},"333":{"title":"FilePicker","titles":[null]},"334":{"title":"文件操作","titles":[null]},"335":{"title":"URL","titles":[null]},"336":{"title":"参考资料","titles":[null]},"337":{"title":"资料参考：","titles":[null]},"338":{"title":"应用场景","titles":[null]},"339":{"title":"可视化工具：","titles":[null]},"340":{"title":"1. 或者 |","titles":[null]},"341":{"title":"2. 原子表[]、原子组()","titles":[null]},"342":{"title":"3. 边界符^、$","titles":[null]},"343":{"title":"4. 元字符","titles":[null]},"344":{"title":"5. 匹配所有字符","titles":[null]},"345":{"title":"6. 模式修正符号i、g","titles":[null]},"346":{"title":"7. 原子组中的原子表([-\\\\/])","titles":[null]},"347":{"title":"8.贪婪匹配+、*、?","titles":[null]},"348":{"title":"批量验证密码","titles":[null,"8.贪婪匹配+、*、?"]},"349":{"title":"9. matchAll","titles":[null]},"350":{"title":"10. 断言匹配``","titles":[null]},"351":{"title":"将链接替换为想要的网址","titles":[null,"10. 断言匹配``"]},"352":{"title":"将不含oss的替换","titles":[null,"10. 断言匹配``"]},"353":{"title":"模糊电话后四位","titles":[null,"10. 断言匹配``"]},"354":{"title":"案例练习","titles":[null]},"355":{"title":"替换练习","titles":[null,"案例练习"]},"356":{"title":"给原子组起别名","titles":[null,"案例练习"]},"357":{"title":"获取目录结构(纯前端)","titles":[]},"358":{"title":"高阶函数之filter","titles":[null]},"359":{"title":"定义","titles":[null,"高阶函数之filter"]},"360":{"title":"语法","titles":[null,"高阶函数之filter"]},"361":{"title":"用法","titles":[null,"高阶函数之filter"]},"362":{"title":"过滤小于 100","titles":[null,"高阶函数之filter","用法",null]},"363":{"title":"返回奇数元素","titles":[null,"高阶函数之filter","用法",null]},"364":{"title":"数组去重","titles":[null,"高阶函数之filter","用法",null]},"365":{"title":"找出素数","titles":[null,"高阶函数之filter","用法",null]},"366":{"title":"高阶函数之map","titles":[null]},"367":{"title":"定义","titles":[null,"高阶函数之map"]},"368":{"title":"语法","titles":[null,"高阶函数之map"]},"369":{"title":"用法","titles":[null,"高阶函数之map"]},"370":{"title":"返回数组元素平方后的新数组","titles":[null,"高阶函数之map","用法",null]},"371":{"title":"用给定函数创建新字符串","titles":[null,"高阶函数之map","用法",null]},"372":{"title":"把二维数组变字符串","titles":[null,"高阶函数之map","用法",null]},"373":{"title":"数字序列转为数组，删除符号","titles":[null,"高阶函数之map","用法",null]},"374":{"title":"拿到所有图片的图片名称并以数组形式返回","titles":[null,"高阶函数之map","用法",null]},"375":{"title":"vue中循环注册组件","titles":[null,"高阶函数之map","用法",null]},"376":{"title":"高阶函数之 reduce","titles":[null]},"377":{"title":"定义","titles":[null,"高阶函数之 reduce"]},"378":{"title":"语法","titles":[null,"高阶函数之 reduce"]},"379":{"title":"用法","titles":[null,"高阶函数之 reduce"]},"380":{"title":"数组求和","titles":[null,"高阶函数之 reduce","用法",null]},"381":{"title":"数组去重","titles":[null,"高阶函数之 reduce","用法",null]},"382":{"title":"计算两个或多个数字的平均值","titles":[null,"高阶函数之 reduce","用法",null]},"383":{"title":"将多维数组转化为一维","titles":[null,"高阶函数之 reduce","用法",null]},"384":{"title":"对象里的属性求和","titles":[null,"高阶函数之 reduce","用法",null]},"385":{"title":"统计数组中每个元素出现的次数","titles":[null,"高阶函数之 reduce","用法",null]},"386":{"title":"高阶函数之 sort","titles":[null]},"387":{"title":"定义","titles":[null,"高阶函数之 sort"]},"388":{"title":"语法","titles":[null,"高阶函数之 sort"]},"389":{"title":"用法","titles":[null,"高阶函数之 sort"]},"390":{"title":"自定义高阶函数","titles":[null]},"391":{"title":"字符串数组每项长度、并转换为整数数组","titles":[null,"自定义高阶函数","用法"]},"392":{"title":"语法","titles":[null,"自定义高阶函数"]},"393":{"title":"用法","titles":[null,"自定义高阶函数"]},"394":{"title":"自动部署","titles":[]},"395":{"title":"脚本","titles":["自动部署"]},"396":{"title":"Action","titles":["自动部署"]},"397":{"title":"基础语法","titles":[null]},"398":{"title":"一、基础类型","titles":[null,"基础语法"]},"399":{"title":"JS类型","titles":[null,"基础语法","一、基础类型"]},"400":{"title":"TS新增类型","titles":[null,"基础语法","一、基础类型"]},"401":{"title":"二、类型声名","titles":[null,"基础语法"]},"402":{"title":"三、as const 断言","titles":[null,"基础语法"]},"403":{"title":"面对对象","titles":[null]},"404":{"title":"一、类","titles":[null,"面对对象"]},"405":{"title":"构造函数","titles":[null,"面对对象","一、类"]},"406":{"title":"二、封装","titles":[null,"面对对象"]},"407":{"title":"三、属性存取器","titles":[null,"面对对象"]},"408":{"title":"静态属性","titles":[null,"面对对象","三、属性存取器"]},"409":{"title":"四、继承","titles":[null,"面对对象"]},"410":{"title":"重写","titles":[null,"面对对象","四、继承"]},"411":{"title":"五、抽象类（abstract class）","titles":[null,"面对对象"]},"412":{"title":"六、接口","titles":[null,"面对对象"]},"413":{"title":"基本配置","titles":[null]},"414":{"title":"一、TS编译配置","titles":[null,"基本配置"]},"415":{"title":"二、webpack整合","titles":[null,"基本配置"]},"416":{"title":"1. 初始化项目","titles":[null,"基本配置","二、webpack整合"]},"417":{"title":"2. 下载构建工具","titles":[null,"基本配置","二、webpack整合"]},"418":{"title":"3. 配置webpack","titles":[null,"基本配置","二、webpack整合"]},"419":{"title":"4.配置TS编译选项","titles":[null,"基本配置","二、webpack整合"]},"420":{"title":"5 .修改package.json配置","titles":[null,"基本配置","二、webpack整合"]},"421":{"title":"6.项目使用","titles":[null,"基本配置","二、webpack整合"]},"422":{"title":"7.Babel","titles":[null,"基本配置","二、webpack整合"]},"423":{"title":"7.2 修改webpack.config.js配置文件","titles":[null,"基本配置","二、webpack整合"]},"424":{"title":"松散类型自动推推导","titles":[null]},"425":{"title":"Typescript 配置文件（tsconfig.json）解析","titles":[]},"426":{"title":"1. experimentalDecorators","titles":["Typescript 配置文件（tsconfig.json）解析"]},"427":{"title":"2. strictPropertyInitialization","titles":["Typescript 配置文件（tsconfig.json）解析"]},"428":{"title":"3. noImplicitAny","titles":["Typescript 配置文件（tsconfig.json）解析"]},"429":{"title":"4. target","titles":["Typescript 配置文件（tsconfig.json）解析"]},"430":{"title":"5. module","titles":["Typescript 配置文件（tsconfig.json）解析"]},"431":{"title":"6. lib","titles":["Typescript 配置文件（tsconfig.json）解析"]},"432":{"title":"7. moduleResolution","titles":["Typescript 配置文件（tsconfig.json）解析"]},"433":{"title":"8. paths","titles":["Typescript 配置文件（tsconfig.json）解析"]},"434":{"title":"9. strictNullChecks","titles":["Typescript 配置文件（tsconfig.json）解析"]},"435":{"title":"10. noUnusedLocals","titles":["Typescript 配置文件（tsconfig.json）解析"]},"436":{"title":"11. noUnusedParameters","titles":["Typescript 配置文件（tsconfig.json）解析"]},"437":{"title":"12. allowJs","titles":["Typescript 配置文件（tsconfig.json）解析"]},"438":{"title":"13. typeRoots和types","titles":["Typescript 配置文件（tsconfig.json）解析"]},"439":{"title":"14. files、include和exclude","titles":["Typescript 配置文件（tsconfig.json）解析"]},"440":{"title":"tsconfig.json全解析","titles":["Typescript 配置文件（tsconfig.json）解析"]},"441":{"title":"实用工具集锦","titles":[]},"442":{"title":"事件循环机制","titles":[]},"443":{"title":"进程与线程","titles":["事件循环机制"]},"444":{"title":"浏览器的线程与进程","titles":["事件循环机制"]},"445":{"title":"渲染进程任务","titles":["事件循环机制"]},"446":{"title":"事件循环","titles":["事件循环机制"]},"447":{"title":"如何理解异步","titles":["事件循环机制"]},"448":{"title":"消息队列","titles":["事件循环机制"]},"449":{"title":"浏览器网页请求过程","titles":[]},"450":{"title":"一、域名解析","titles":["浏览器网页请求过程"]},"451":{"title":"二、与服务器建立连接","titles":["浏览器网页请求过程"]},"452":{"title":"三、发起 HTTP 请求","titles":["浏览器网页请求过程"]},"453":{"title":"请求报文结构","titles":["浏览器网页请求过程","三、发起 HTTP 请求"]},"454":{"title":"四、服务器端响应 HTTP 请求，浏览器得到 HTML 代码","titles":["浏览器网页请求过程"]},"455":{"title":"五、浏览器渲染过程","titles":["浏览器网页请求过程"]},"456":{"title":"一、解析 HTML","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"457":{"title":"二、解析 CSS","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"458":{"title":"三、样式计算","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"459":{"title":"四、布局Layout","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"460":{"title":"五、分层Layer","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"461":{"title":"六、绘制Paint","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"462":{"title":"七、分块Tiling","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"463":{"title":"八、光栅化Raster","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"464":{"title":"九、画Draw","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"465":{"title":"回流reflow","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"466":{"title":"重绘repaint","titles":["浏览器网页请求过程","五、浏览器渲染过程"]},"467":{"title":"六、浏览器对页面进行渲染呈现给用户，关闭连接","titles":["浏览器网页请求过程"]},"468":{"title":"四次挥手","titles":["浏览器网页请求过程","六、浏览器对页面进行渲染呈现给用户，关闭连接"]},"469":{"title":"http与https区别","titles":[null]},"470":{"title":"前端缓存","titles":[null]},"471":{"title":"HTTP缓存","titles":[null,"前端缓存"]},"472":{"title":"浏览器缓存","titles":[null,"前端缓存"]},"473":{"title":"CSS基础面试题","titles":[]},"474":{"title":"水平垂直居中","titles":["CSS基础面试题"]},"475":{"title":"盒模型的理解","titles":["CSS基础面试题"]},"476":{"title":"CSS 选择器","titles":["CSS基础面试题"]},"477":{"title":"如何实现动画","titles":["CSS基础面试题"]},"478":{"title":"实现渐变背景","titles":["CSS基础面试题"]},"479":{"title":"定位position","titles":["CSS基础面试题"]},"480":{"title":"隐藏元素的方式","titles":["CSS基础面试题"]},"481":{"title":"用css3实现饼图","titles":["CSS基础面试题"]},"482":{"title":"margin和padding适用场景","titles":["CSS基础面试题"]},"483":{"title":"可替换元素","titles":["CSS基础面试题"]},"484":{"title":"Canvas和SVG区别","titles":["CSS基础面试题"]},"485":{"title":"使用Base64编码的图片具有以下优点：","titles":["CSS基础面试题"]},"486":{"title":"优化大量图片的加载方法，提高用户体验：","titles":["CSS基础面试题"]},"487":{"title":"优雅降级和渐进增强","titles":["CSS基础面试题"]},"488":{"title":"新项目css架构设计入手方向","titles":["CSS基础面试题"]},"489":{"title":"Tailwindcss断点对应设备","titles":["CSS基础面试题"]},"490":{"title":"实现一个元素的宽高比","titles":[null]},"491":{"title":"Sass 中@mixin 与@extend的区别","titles":[null]},"492":{"title":"前端如何做到并发请求","titles":[null]},"493":{"title":"方法一:封装队列","titles":[null,"前端如何做到并发请求"]},"494":{"title":"方法二:函数封装","titles":[null,"前端如何做到并发请求"]},"495":{"title":"Web Worker","titles":[null]},"496":{"title":"Service Worker","titles":[null]},"497":{"title":"特性","titles":[null]},"498":{"title":"new 对象的执行过程","titles":[null]},"499":{"title":"原型和原型链","titles":[null]},"500":{"title":"函数的隐式原型对象","titles":[null,"原型和原型链"]},"501":{"title":"JS继承有哪些方式","titles":[null]},"502":{"title":"方式一：ES6","titles":[null,"JS继承有哪些方式"]},"503":{"title":"方式二：原型链继承","titles":[null,"JS继承有哪些方式"]},"504":{"title":"方式三：借用构造函数继承","titles":[null,"JS继承有哪些方式"]},"505":{"title":"常见基础面试题","titles":[]},"506":{"title":"数据类型","titles":["常见基础面试题"]},"507":{"title":"类型检测方式","titles":["常见基础面试题","数据类型"]},"508":{"title":"数据类型转换","titles":["常见基础面试题"]},"509":{"title":"其他类型转为数字类型","titles":["常见基础面试题","数据类型转换"]},"510":{"title":"其他类型转为字符串","titles":["常见基础面试题","数据类型转换"]},"511":{"title":"其他类型转为布尔类型","titles":["常见基础面试题","数据类型转换"]},"512":{"title":"相等与全等区别","titles":["常见基础面试题"]},"513":{"title":"怎么解决精度问题","titles":["常见基础面试题"]},"514":{"title":"var/let/const 区别","titles":["常见基础面试题"]},"515":{"title":"const","titles":["常见基础面试题","var/let/const 区别"]},"516":{"title":"暂存性死区","titles":["常见基础面试题","var/let/const 区别"]},"517":{"title":"this指向","titles":["常见基础面试题"]},"518":{"title":"防抖与节流","titles":["常见基础面试题"]},"519":{"title":"防抖","titles":["常见基础面试题","防抖与节流"]},"520":{"title":"节流","titles":["常见基础面试题","防抖与节流"]},"521":{"title":"前端本地存储方式","titles":["常见基础面试题"]},"522":{"title":"区别","titles":["常见基础面试题","前端本地存储方式","节流"]},"523":{"title":"用法","titles":["常见基础面试题","前端本地存储方式"]},"524":{"title":"Generator","titles":["常见基础面试题"]},"525":{"title":"异步流程同步化","titles":["常见基础面试题","Generator"]},"526":{"title":"requestAnimationFrame","titles":["常见基础面试题"]},"527":{"title":"浅拷贝和深拷贝","titles":["常见基础面试题"]},"528":{"title":"事件捕获和冒泡机制","titles":["常见基础面试题"]},"529":{"title":"Promise链式调用","titles":["常见基础面试题"]},"530":{"title":"字符串常用方法","titles":[null]},"531":{"title":"charCodeAt与fromCharCode","titles":[null,"字符串常用方法"]},"532":{"title":"slice 与 substring区别","titles":[null,"字符串常用方法"]},"533":{"title":"valueOf 与 toString 的异同","titles":[null,"字符串常用方法"]},"534":{"title":"常见进阶面试题","titles":[]},"535":{"title":"模块化","titles":["常见进阶面试题"]},"536":{"title":"闭包","titles":["常见进阶面试题"]},"537":{"title":"应用","titles":["常见进阶面试题","闭包"]},"538":{"title":"弊端","titles":["常见进阶面试题","闭包"]},"539":{"title":"函数柯里化","titles":["常见进阶面试题"]},"540":{"title":"compose","titles":["常见进阶面试题","函数柯里化"]},"541":{"title":"闭包惰性思想","titles":["常见进阶面试题","函数柯里化"]},"542":{"title":"深度优先和广度优先","titles":["常见进阶面试题"]},"543":{"title":"深度优先遍历(DFS)","titles":["常见进阶面试题","深度优先和广度优先"]},"544":{"title":"广度优先遍历(BFS)","titles":["常见进阶面试题","深度优先和广度优先"]},"545":{"title":"两者的区别","titles":["常见进阶面试题","深度优先和广度优先"]},"546":{"title":"广度优先遍历的应用","titles":["常见进阶面试题","深度优先和广度优先"]},"547":{"title":"深度优先遍历的应用","titles":["常见进阶面试题","深度优先和广度优先"]},"548":{"title":"loader和plugin区别","titles":["常见进阶面试题"]},"549":{"title":"前端模块化规范","titles":["常见进阶面试题"]},"550":{"title":"常见高级面试题","titles":[]},"551":{"title":"怎么禁止下载图片（midjourney实现）","titles":["常见高级面试题"]},"552":{"title":"数组劫持原理","titles":[null]},"553":{"title":"对MVVM的理解","titles":[null]},"554":{"title":"Mixins的原理","titles":[null]},"555":{"title":"Vue声明周期","titles":[null]},"556":{"title":"嵌套组件组件执行顺序","titles":[null,"Vue声明周期"]},"557":{"title":"beforeCreate 与 created 区别","titles":[null]},"558":{"title":"created 与 mounted 区别","titles":[null]},"559":{"title":"keep-alive内置缓存组件","titles":[null]},"560":{"title":"虚拟 DOM(VNode) 和 DOM","titles":[null]},"561":{"title":"Vue3.0性能提升","titles":[null]},"562":{"title":"npm run xxx执行过程","titles":[]},"563":{"title":"vue cli 项目","titles":["npm run xxx执行过程"]},"564":{"title":"vite项目","titles":["npm run xxx执行过程"]},"565":{"title":"前端项目优化","titles":[]},"566":{"title":"HTML","titles":["前端项目优化"]},"567":{"title":"CSS","titles":["前端项目优化"]},"568":{"title":"JavaScript","titles":["前端项目优化"]},"569":{"title":"构建优化","titles":["前端项目优化"]},"570":{"title":"移除console","titles":["前端项目优化","构建优化"]},"571":{"title":"分包和共享依赖","titles":["前端项目优化","构建优化"]},"572":{"title":"VueRouter的 base","titles":[null]},"573":{"title":"vue.config.js的 publicPath","titles":[null]},"574":{"title":"一键复制","titles":[null]},"575":{"title":"面试","titles":[]},"576":{"title":"网络拓扑图代码","titles":[]},"577":{"title":"图实例化","titles":["网络拓扑图代码"]},"578":{"title":"注册节点","titles":["网络拓扑图代码"]},"579":{"title":"一、默认收缩二级节点","titles":[null,null]},"580":{"title":"二、改用iconfont文字不居中问题","titles":[null,null]},"581":{"title":"三、初始化画图完成后出现这个锯齿","titles":[null,null]},"582":{"title":"Echarts问题总结","titles":[]},"583":{"title":"屏幕适配问题","titles":["Echarts问题总结"]},"584":{"title":"左侧菜单折叠响应式","titles":["Echarts问题总结"]},"585":{"title":"地图缩放重叠问题","titles":["Echarts问题总结"]},"586":{"title":"Uncaught TypeError: Cannot read properties of undefined (reading \'prototype\')","titles":[null]},"587":{"title":"hidden 与自定义变体不能一起用","titles":[null,"Uncaught TypeError: Cannot read properties of undefined (reading \'prototype\')"]},"588":{"title":"项目一直报 Element 相关错误","titles":[null]},"589":{"title":"跨域问题","titles":[null]},"590":{"title":"nuxt-simple-sitemap插件使用问题","titles":[null]},"591":{"title":"VitePress踩坑记录","titles":[]},"592":{"title":"ERR_INVALID_FILE_URL_HOST","titles":["VitePress踩坑记录"]},"593":{"title":"形成原因：全局替换时粗心大意造成img src属性多了个\'/\'","titles":["VitePress踩坑记录","ERR_INVALID_FILE_URL_HOST"]},"594":{"title":"解决","titles":["VitePress踩坑记录","ERR_INVALID_FILE_URL_HOST"]},"595":{"title":"实现自动生成文章左侧侧边栏","titles":["VitePress踩坑记录"]},"596":{"title":"痛点及需求","titles":["VitePress踩坑记录","实现自动生成文章左侧侧边栏"]},"597":{"title":"想法及实现","titles":["VitePress踩坑记录","实现自动生成文章左侧侧边栏"]},"598":{"title":"在package.json添加脚本执行命令","titles":["VitePress踩坑记录","实现自动生成文章左侧侧边栏","想法及实现"]},"599":{"title":"在博客根目录新建scripts目录并创建文件getSidebar.ts，添加如下代码","titles":["VitePress踩坑记录","实现自动生成文章左侧侧边栏","想法及实现"]},"600":{"title":"VitePress添加本地搜索功能","titles":["VitePress踩坑记录"]},"601":{"title":"安装插件","titles":["VitePress踩坑记录","VitePress添加本地搜索功能"]},"602":{"title":"添加和配置插件","titles":["VitePress踩坑记录","VitePress添加本地搜索功能"]},"603":{"title":"样式覆盖","titles":["VitePress踩坑记录","VitePress添加本地搜索功能"]},"604":{"title":"VuePress踩坑记录","titles":[]},"605":{"title":"坑点一、自定义目录不能根据视口固定","titles":["VuePress踩坑记录"]},"606":{"title":"坑点二、引用的Gitee图床图片没显示","titles":["VuePress踩坑记录"]},"607":{"title":"坑点三、Hexo博客源码没有备份，误点VsCode放弃所有更改并且回退版本","titles":["VuePress踩坑记录"]},"608":{"title":"Vue项目踩坑一","titles":[]},"609":{"title":"点击弹窗父子传值成功，但是数据没有展示","titles":["Vue项目踩坑一"]},"610":{"title":"\'确定\'按钮点击失效问题","titles":["Vue项目踩坑一"]},"611":{"title":"文本溢出隐藏处理后对不齐问题","titles":["Vue项目踩坑一"]},"612":{"title":"路由组件切换，事件总线意外多次触发","titles":["Vue项目踩坑一"]},"613":{"title":"前端配合 Nginx 服务开启 gzip 页面加载不出来","titles":["Vue项目踩坑一"]},"614":{"title":"TailwindCSS动态绑定类不能随着渐变","titles":["Vue项目踩坑一"]},"615":{"title":"监听非 window resize 事件不生效问题","titles":["Vue项目踩坑一"]},"616":{"title":"编程踩坑积累与总结","titles":[]}},"dirtCount":0,"index":[["您需要自己编写代码来检测大小变化",{"2":{"615":1}}],["您的分支和",{"2":{"213":2}}],["背景色的变化",{"2":{"614":2}}],["背景与边框",{"0":{"182":1},"1":{"183":1,"184":1,"185":1,"186":1}}],["恰巧性能优化",{"2":{"609":1}}],["点击弹窗父子传值成功",{"0":{"609":1}}],["点了一下直接回到解放前",{"2":{"607":1}}],["领悟",{"2":{"607":1}}],["搞了好久没办法解决",{"2":{"607":1}}],["天坑",{"2":{"607":1}}],["误点vscode放弃所有更改并且回退版本",{"0":{"607":1}}],["防盗链的问题",{"2":{"606":1}}],["防抖拓展写法",{"2":{"519":1}}],["防抖",{"0":{"519":1},"2":{"518":1}}],["防抖与节流",{"0":{"518":1},"1":{"519":1,"520":1}}],["产生原因",{"2":{"605":1}}],["挠破头皮都没想明白啥原因",{"2":{"605":1}}],["巨坑",{"2":{"605":1,"609":1}}],["情输入关键词",{"2":{"602":2}}],["情输入序号",{"2":{"158":2}}],["放在",{"2":{"602":1}}],["放大",{"2":{"577":2}}],["依据经验放在根目录下不管用",{"2":{"602":1}}],["依次执行以上两步操作",{"2":{"543":1}}],["依次执行以下操作",{"2":{"543":1}}],["依次为树中的每个节点计算出它最终的样式",{"2":{"458":1}}],["想法及实现",{"0":{"597":1},"1":{"598":1,"599":1}}],["想要打开是干干净净的界面",{"2":{"231":1}}],["逐个移除文章文件夹最终才定位到出问题的文档",{"2":{"594":1}}],["又不知道那个文件有问题",{"2":{"594":1}}],["刚开始以为后端改动数据层级嵌套太深vue丢失了响应式的原因",{"2":{"609":1}}],["刚开始以为没有我常用的jetbrain",{"2":{"225":1}}],["刚开始我只能猜到某个文件路径有问题",{"2":{"594":1}}],["业务请求",{"2":{"589":2}}],["果然排除法找到是",{"2":{"588":1}}],["断点后不写自定义的",{"2":{"586":1}}],["断言",{"0":{"402":1}}],["断言匹配``",{"0":{"350":1},"1":{"351":1,"352":1,"353":1}}],["南海诸岛",{"2":{"585":2}}],["延伸会有抖动问题",{"2":{"584":2}}],["延迟加载",{"2":{"486":1}}],["折腾了三遍algolia都没能添加上搜索功能",{"2":{"600":1}}],["折叠时",{"2":{"584":1}}],["折角效果",{"0":{"195":1},"2":{"195":1}}],["侧边栏按钮点击展开",{"2":{"584":1}}],["屏幕适配问题",{"0":{"583":1}}],["弹窗特有节点注册",{"2":{"578":2}}],["箭头动画",{"2":{"578":2}}],["箭头函数指向声明时所在外部作用域",{"2":{"517":1}}],["箭头函数设置函数结构",{"2":{"399":2}}],["箭头函数中没有arguments",{"2":{"262":1}}],["箭头函数没有自身的this",{"2":{"262":1}}],["箭头函数没有自己的this",{"2":{"262":1}}],["箭头函数传参",{"2":{"146":2}}],["线条动画",{"2":{"578":2}}],["线程中",{"2":{"495":1}}],["线程",{"2":{"495":2}}],["线程操纵者一般为程序员",{"2":{"443":1}}],["线程快",{"2":{"443":1}}],["线程可以共享同一个进程间的资源",{"2":{"443":1}}],["线程可以看做轻量级的进程",{"2":{"443":1}}],["线程不能包含进程",{"2":{"443":1}}],["线程是操作系统调度的基本单位",{"2":{"443":1}}],["居中",{"2":{"577":2}}],["缩小",{"2":{"577":2}}],["缩放",{"2":{"464":1}}],["假设你的应用被部署在http",{"2":{"572":1}}],["假设无法确定item的类型",{"2":{"135":1}}],["你就需要手动指定base属性的值",{"2":{"572":1}}],["软链接",{"2":{"564":1}}],["软删除成功",{"2":{"38":2}}],["软删除",{"2":{"38":1}}],["版本",{"2":{"563":1}}],["版本不一样",{"2":{"47":1}}],["环境变量",{"2":{"563":1,"564":1}}],["环境不一致",{"2":{"47":1}}],["源码体积减小",{"2":{"561":1}}],["源仓库地址",{"2":{"396":2}}],["移动端",{"2":{"560":1}}],["移除console",{"0":{"570":1}}],["移除所有",{"2":{"523":1}}],["移除所有localstorage",{"2":{"523":1}}],["移除单个",{"2":{"523":2}}],["移除和插入dom节点",{"2":{"121":1}}],["跨域问题",{"0":{"589":1}}],["跨域资源共享",{"0":{"31":1}}],["跨平台",{"2":{"560":1}}],["性能优化",{"2":{"560":1}}],["性别",{"2":{"144":4}}],["精简许多",{"2":{"560":1}}],["孙子组件",{"2":{"556":2}}],["孙悟空",{"2":{"265":2,"406":6,"407":2}}],["嵌套组件组件执行顺序",{"0":{"556":1}}],["策略中没有定义的策略",{"2":{"554":1}}],["充当数据模型与视图界面的桥梁",{"2":{"553":1}}],["怎么禁止下载图片",{"0":{"551":1}}],["怎么解决精度问题",{"0":{"513":1}}],["采用静态加载模块的方式",{"2":{"549":1}}],["采用同步加载模块的方式",{"2":{"549":1}}],["功能的函数",{"2":{"548":1}}],["广度优先遍历可以用于许多问题",{"2":{"546":1}}],["广度优先遍历的应用",{"0":{"546":1}}],["广度优先遍历的空间复杂度比深度优先遍历高",{"2":{"545":1}}],["广度优先遍历需要使用队列逐层扫描节点",{"2":{"545":1}}],["广度优先遍历",{"0":{"544":1},"2":{"544":1,"547":1}}],["节点文本溢出省略处理",{"2":{"578":2}}],["节点2",{"2":{"542":4}}],["节点1",{"2":{"542":6}}],["节流阀",{"2":{"520":2}}],["节流",{"0":{"520":1},"1":{"522":1},"2":{"518":1}}],["深度优先遍历的应用",{"0":{"547":1}}],["深度优先遍历",{"0":{"543":1},"2":{"543":1}}],["深度优先和广度优先",{"0":{"542":1},"1":{"543":1,"544":1,"545":1,"546":1,"547":1}}],["深拷贝",{"2":{"319":2,"527":1}}],["考虑不传函数",{"2":{"540":2}}],["供其夏季上下文后期使用",{"2":{"540":1}}],["供实例使用",{"2":{"140":2}}],["思想",{"2":{"540":1,"552":1}}],["柯里化",{"2":{"539":2}}],["弊端",{"0":{"538":1}}],["闭包惰性思想",{"0":{"541":1}}],["闭包案例",{"2":{"536":1}}],["闭包",{"0":{"536":1},"1":{"537":1,"538":1},"2":{"536":1}}],["混用",{"2":{"535":1}}],["现在到1970年1月1日的毫秒数",{"2":{"533":1}}],["现在短视频时代",{"2":{"181":1}}],["码对应的字符",{"2":{"531":2}}],["码",{"2":{"531":2}}],["码点",{"2":{"387":1}}],["删",{"2":{"530":1}}],["删除多余的",{"2":{"594":1}}],["删除这个属性",{"2":{"585":2}}],["删除所有",{"2":{"523":1}}],["删除所有sessionstorage",{"2":{"523":1}}],["删除所有文档",{"2":{"6":2}}],["删除编译后的所有的注释",{"2":{"440":2}}],["删除符号",{"0":{"373":1}}],["删除最久未被使用的元素",{"2":{"296":2}}],["删除最后一条数据跳转到上一页",{"0":{"159":1}}],["删除元素",{"2":{"266":2}}],["删除全部的键值对",{"2":{"265":2}}],["删除指定数据",{"2":{"265":2}}],["删除本地所有",{"2":{"207":2}}],["删除本地库tag",{"2":{"207":2}}],["删除本地库分支",{"2":{"206":2}}],["删除tag",{"0":{"207":1}}],["删除远程文件",{"0":{"208":1}}],["删除远程库tag",{"2":{"207":2}}],["删除远程库分支",{"2":{"206":1}}],["删除远程库分支git",{"2":{"206":1}}],["删除远程分支",{"0":{"206":1}}],["删除远程",{"2":{"205":1}}],["删除失败`",{"2":{"159":2}}],["删除成功`",{"2":{"159":2}}],["删除网络",{"2":{"62":2}}],["删除已停止容器",{"2":{"56":2}}],["删除数据",{"0":{"38":1}}],["删除数据库",{"2":{"1":1}}],["删除满足条件的数据db",{"2":{"6":1}}],["删除满足条件的数据",{"2":{"6":3}}],["删除某一条",{"2":{"6":4}}],["删除",{"0":{"6":1,"10":1},"2":{"55":1,"296":4,"523":2}}],["删除集合",{"2":{"2":1}}],["删除集合show",{"2":{"2":1}}],["删除当前所在库",{"2":{"1":1}}],["删除当前所在库use",{"2":{"1":1}}],["阻止同一节点其他后绑定事件执行",{"2":{"528":1}}],["阻止默认行为",{"2":{"528":1}}],["阻止冒泡",{"2":{"528":1}}],["途中会触发绑定事件冒泡元素的回调",{"2":{"528":1}}],["途中会触发绑定事件捕获元素的回调",{"2":{"528":1}}],["浅拷贝",{"2":{"527":2}}],["浅拷贝和深拷贝",{"0":{"527":1}}],["右侧的结果",{"2":{"525":2}}],["跳转的页面可以共享",{"2":{"522":1}}],["跳过第一个索引",{"2":{"378":2}}],["跳过40条数据查30条数据",{"2":{"4":2}}],["存储时间",{"2":{"522":1}}],["存储大小",{"2":{"522":1}}],["存在",{"2":{"514":2}}],["地图缩放重叠问题",{"0":{"585":1}}],["地铁发车时间",{"2":{"520":1}}],["地址",{"2":{"450":1}}],["滚动到底部加载更多",{"2":{"520":1}}],["滚动到元素top小于设定值",{"2":{"479":1}}],["王者荣耀技能冷却",{"2":{"520":1}}],["王者荣耀回城操作",{"2":{"520":1}}],["王五",{"2":{"122":2}}],["设定到期时间自动清除",{"2":{"523":1}}],["设定到期时间自动清除let",{"2":{"523":1}}],["设定时间",{"2":{"520":2}}],["设置这个属性",{"2":{"585":2}}],["设置的时间间隔没办法保证",{"2":{"526":1}}],["设置到期时间",{"2":{"522":1}}],["设置对象的原型",{"2":{"498":1}}],["设置为true",{"2":{"435":1,"436":1}}],["设置为",{"2":{"429":1,"573":1}}],["设置预定义的环境",{"2":{"418":2}}],["设置babel",{"2":{"418":2}}],["设置属性的方法叫做getter方法",{"2":{"407":1}}],["设置属性的方法",{"2":{"407":1}}],["设置高度",{"2":{"91":4}}],["设置文件名称",{"2":{"46":2}}],["设置文件存储位置",{"2":{"46":2}}],["设置浏览器运行最大并发数",{"2":{"15":2}}],["已经解决方案",{"2":{"616":1}}],["已经在处理",{"2":{"520":2}}],["已经有值",{"2":{"519":2}}],["已经检测完的组件",{"2":{"111":1}}],["频繁触发某个事件时",{"2":{"518":2}}],["立即执行函数必定指向window",{"2":{"517":1}}],["区别",{"0":{"514":1,"522":1,"557":1,"558":1},"1":{"515":1,"516":1}}],["区域的对齐方式",{"2":{"168":1}}],["题2",{"2":{"512":2}}],["题1",{"2":{"512":2}}],["剩下的都是转为数字",{"2":{"512":1}}],["剩余参数写到最后",{"2":{"264":2}}],["剩余参数可以接收任意数量实参",{"2":{"264":2}}],["剩余参数",{"0":{"264":1},"2":{"264":2}}],["宇符串转换为数宇",{"2":{"509":1}}],["局限性",{"2":{"507":1}}],["局部变量",{"2":{"121":2}}],["局部中间件",{"2":{"29":1}}],["唯一标识统一管理",{"2":{"506":1}}],["唯一一个需要用额外的",{"2":{"150":1}}],["借用构造函数继承",{"0":{"504":1}}],["顶级构造器",{"2":{"499":2}}],["向内传播",{"2":{"528":1}}],["向服务器发起请求等先关操作",{"2":{"496":1}}],["向客户端发送消息",{"2":{"496":1}}],["向map中添加键值对",{"2":{"265":2}}],["❌",{"2":{"493":2,"494":2}}],["释放占用空间",{"2":{"493":2}}],["异步流程同步化",{"0":{"525":1}}],["异步编程",{"2":{"492":1}}],["异步与事件循环理解",{"2":{"446":1}}],["维持正方形",{"2":{"490":1}}],["维护俩者状态需要消耗额外资源",{"2":{"147":1}}],["维护好主机和ip的关系",{"2":{"64":2}}],["宽度发生改变时",{"2":{"490":1}}],["宽高比",{"2":{"490":2}}],["宽字节匹配",{"2":{"345":2}}],["电脑显示器",{"2":{"489":1}}],["栅格",{"2":{"488":1}}],["公共变量",{"2":{"488":1}}],["公司gitlab主机地址",{"2":{"235":2}}],["针对自己想个兼容的最低版本进行开发",{"2":{"487":1}}],["渐进增强",{"2":{"487":1}}],["渐变",{"2":{"478":2}}],["影响页面加载速度",{"2":{"485":1}}],["尤其是超过几百kb的图片",{"2":{"485":1}}],["海报",{"2":{"484":1}}],["制作标志",{"2":{"484":1}}],["曲线",{"2":{"484":1}}],["矢量图形在放大或缩小时不会失真",{"2":{"486":1}}],["矢量图形还可以编辑和修改",{"2":{"484":1}}],["矢量图形不会失真或模糊",{"2":{"484":1}}],["矢量图形是由数学方程描述的二维图形",{"2":{"484":1}}],["矢量图形",{"2":{"484":1}}],["图实例化",{"0":{"577":1}}],["图文详解深度优先",{"2":{"547":1}}],["图标跟随鼠标",{"2":{"520":1}}],["图表或图标等",{"2":{"484":1}}],["图片初始化完成后调用",{"2":{"551":2}}],["图片等",{"2":{"548":1}}],["图片大小增大",{"2":{"485":1}}],["图片",{"2":{"449":1}}],["图片懒加载",{"0":{"248":1},"1":{"249":1,"250":1}}],["图片压缩",{"2":{"149":1}}],["另外",{"2":{"484":1}}],["另一方面导致页面无法及时更新",{"2":{"447":1}}],["另一个容器名",{"2":{"63":2}}],["额外增加两个声明周期",{"2":{"559":1}}],["额外包一层并加上",{"2":{"482":2}}],["额外的检查",{"2":{"440":2}}],["兄弟相邻元素",{"2":{"482":1}}],["留白处需要背景色时",{"2":{"482":1}}],["留白处不需要背景色时",{"2":{"482":1}}],["黏性定位sticky",{"2":{"479":1}}],["固定定位fixed",{"2":{"479":1}}],["伪元素选择器",{"2":{"476":1}}],["伪类",{"2":{"476":1}}],["伪数组",{"2":{"263":2}}],["权重",{"2":{"476":1}}],["外边距",{"2":{"475":1}}],["外部样式",{"2":{"456":1}}],["外部主机端口",{"2":{"56":2}}],["盒模型从内到外由",{"2":{"475":1}}],["盒模型的理解",{"0":{"475":1}}],["行内元素",{"2":{"474":1}}],["行内样式均会包含在",{"2":{"456":1}}],["协商缓存主要有四个头字段",{"2":{"471":1}}],["协商缓存",{"2":{"471":1}}],["协议隔离",{"2":{"522":1}}],["协议传输数据",{"2":{"452":1}}],["协议",{"2":{"451":1,"452":1}}],["协议的特性",{"0":{"40":1}}],["具体步骤如下",{"2":{"543":1,"544":1}}],["具体做法是当某些任务发生时",{"2":{"447":1}}],["具有生命周期",{"2":{"497":1}}],["具有安全性的ssl加密传输协议",{"2":{"469":1}}],["明文传输",{"2":{"469":1}}],["超过10kb的文件就压缩",{"2":{"613":2}}],["超过",{"2":{"513":1}}],["超过安全数宇的",{"2":{"509":1}}],["超文本传输协议",{"2":{"469":1}}],["超类",{"2":{"271":1}}],["确定更新",{"2":{"610":2}}],["确定",{"0":{"610":1},"2":{"610":2}}],["确定无误后删除文件",{"2":{"208":1}}],["确定无误后删除文件git",{"2":{"208":1}}],["确保服务端关闭再",{"2":{"468":1}}],["风格",{"2":{"466":1}}],["阶段在合成线程中",{"2":{"466":1}}],["阶段由于",{"2":{"466":1}}],["既不会影响布局也不会影响绘制指令",{"2":{"466":1}}],["激活css伪类",{"2":{"465":1}}],["效率高的本质原因",{"2":{"464":1}}],["效果",{"2":{"211":2}}],["倾斜",{"2":{"464":1}}],["旋转",{"2":{"464":1}}],["变量私有化",{"2":{"537":1}}],["变量声明",{"2":{"516":1}}],["变量指向的内存地址",{"2":{"515":1}}],["变量的值不能修改",{"2":{"514":2,"515":1}}],["变量提升",{"2":{"514":1}}],["变形",{"2":{"464":1}}],["变更检测",{"0":{"110":1}}],["很多预设值会变成绝对值",{"2":{"458":1}}],["很多库都有用到该特性",{"2":{"426":1}}],["称之为",{"2":{"458":1}}],["称其为新对象",{"2":{"278":1}}],["率先下载",{"2":{"456":1}}],["率先改变的",{"2":{"314":1}}],["遇到一个非有效数字字符",{"2":{"509":2}}],["遇到",{"2":{"456":1}}],["光栅化raster",{"0":{"463":1}}],["光栅化",{"2":{"455":1}}],["绘制paint",{"0":{"461":1}}],["绘制",{"2":{"455":1}}],["整个渲染流程分为多个阶段",{"2":{"455":1}}],["整体逻辑",{"0":{"155":1}}],["布局完成后形成布局树",{"2":{"459":1}}],["布局layout",{"0":{"459":1}}],["布局",{"2":{"455":2,"482":1}}],["布局方向",{"2":{"176":2}}],["树形图哪个需要收缩则把属性collapsed设置为true",{"2":{"579":2}}],["树阶段",{"2":{"459":1}}],["树中",{"2":{"456":1}}],["树和",{"2":{"456":1}}],["树的生成必须暂停",{"2":{"456":1}}],["树",{"2":{"455":2,"456":2,"458":2,"465":1}}],["树叶形状",{"2":{"188":2}}],["空间复杂度为",{"2":{"543":1,"544":1}}],["空串",{"2":{"511":1}}],["空宇符串变为0",{"2":{"509":1}}],["空行",{"2":{"453":1,"454":1}}],["空白会被浏览器保留",{"2":{"197":2}}],["试探一下对方是否遵循",{"2":{"451":1}}],["首先就是三次握手建立",{"2":{"451":1}}],["首先判断两个值的类型是否相同",{"2":{"318":1}}],["客户端在发送",{"2":{"468":1}}],["客户端的请求到达服务器",{"2":{"451":1}}],["客户端就读取",{"2":{"450":1}}],["客户端就要进行广播查找",{"2":{"450":1}}],["那就可以成功和目标计算机进行通信",{"2":{"450":1}}],["那就无法跟目标计算机进行通信",{"2":{"450":1}}],["那么你就需要设置如下的base属性",{"2":{"572":1}}],["那么后续的then方法会等待该promise对象的状态发生改变后再执行",{"2":{"529":1}}],["那么后续的then方法会被跳过",{"2":{"529":1}}],["那么就宣告这次解析失败",{"2":{"450":1}}],["那么数组会按照该函数的返回值排序",{"2":{"388":1}}],["那么不用在模版里声明",{"2":{"113":1}}],["个变异方法进行重写",{"2":{"552":1}}],["个",{"2":{"507":1,"555":2}}],["个步骤",{"2":{"450":1}}],["个网格",{"2":{"172":2}}],["经过以上的",{"2":{"450":1}}],["‪c",{"2":{"450":1}}],["系统内核",{"2":{"450":1}}],["系统的",{"2":{"450":1}}],["系统",{"2":{"450":1}}],["因学习配置博客用git",{"2":{"607":1}}],["因此",{"2":{"491":1}}],["因此可能会影响页面加载速度",{"2":{"485":1}}],["因此可以更快地加载页面",{"2":{"485":1}}],["因此会使得图片的大小增加约1",{"2":{"485":1}}],["因此相对较难掌握",{"2":{"484":1}}],["因此又带来了偏差",{"2":{"448":1}}],["因而产生错误",{"2":{"451":1}}],["因为vue",{"2":{"572":1}}],["因为广度优先遍历需要使用队列来存储节点",{"2":{"545":1}}],["因为字符串是不可变的",{"2":{"530":1}}],["因为不会阻塞主线程运行",{"2":{"495":1}}],["因为不是字符串",{"2":{"137":2}}],["因为它们是基于数学公式创建的",{"2":{"484":1}}],["因为它们可以被任意的修改",{"2":{"270":1}}],["因为客户端发送完",{"2":{"468":1}}],["因为有操作系统计时函数偏差",{"2":{"448":1}}],["因为有些选项如果你没配置",{"2":{"425":1}}],["因为这个更符合平时我们的书写习惯以及认知",{"2":{"432":1}}],["因为现代大部分应用项目都会使用webpack",{"2":{"429":1}}],["因为没有赋值默认值",{"2":{"427":2}}],["因为应用的主题只在当前窗口有效果",{"2":{"226":1}}],["因为babel编译后开启了严格模式",{"2":{"139":2}}],["因为虚拟dom是react内部在用",{"2":{"137":1}}],["因为",{"2":{"129":2,"466":1}}],["受限制",{"2":{"522":2}}],["受事件循环的影响",{"2":{"448":1}}],["受控组件",{"2":{"141":1}}],["毫秒",{"2":{"448":2}}],["间隔时间少于",{"2":{"448":1}}],["层",{"2":{"448":1}}],["微队列中的任务优先所有其他任务执行",{"2":{"448":1}}],["微风",{"2":{"143":2}}],["消息队列有优先级",{"2":{"448":1}}],["消息队列",{"0":{"448":1}}],["持续进行",{"2":{"446":1}}],["次",{"2":{"445":1}}],["次提交的",{"2":{"210":2}}],["次提交",{"2":{"210":2}}],["浏览器会自动跟踪窗口的大小变化并触发",{"2":{"615":1}}],["浏览器会合并这些操作",{"2":{"465":1}}],["浏览器窗口关闭时",{"2":{"522":1}}],["浏览器窗口大小发生改变",{"2":{"465":1}}],["浏览器可以同时消费多个数据流",{"2":{"492":1}}],["浏览器可以根据实际情况从不同的队列中取出任务执行",{"2":{"448":1}}],["浏览器缓存",{"0":{"472":1}}],["浏览器根据",{"2":{"471":1}}],["浏览器的渲染引擎会根据标准",{"2":{"475":1}}],["浏览器的默认样式",{"2":{"456":1}}],["浏览器的线程与进程",{"0":{"444":1}}],["浏览器在开始解析前",{"2":{"456":1}}],["浏览器在适当的位置自动插入连字符换行",{"2":{"197":2}}],["浏览器渲染过程",{"0":{"455":1},"1":{"456":1,"457":1,"458":1,"459":1,"460":1,"461":1,"462":1,"463":1,"464":1,"465":1,"466":1}}],["浏览器就会发起一个",{"2":{"450":1}}],["浏览器",{"2":{"450":1,"535":1}}],["浏览器对页面进行渲染呈现给用户",{"0":{"467":1},"1":{"468":1},"2":{"449":1}}],["浏览器解析",{"2":{"449":1}}],["浏览器得到",{"0":{"454":1},"2":{"449":1}}],["浏览器网页请求过程",{"0":{"449":1},"1":{"450":1,"451":1,"452":1,"453":1,"454":1,"455":1,"456":1,"457":1,"458":1,"459":1,"460":1,"461":1,"462":1,"463":1,"464":1,"465":1,"466":1,"467":1,"468":1}}],["浏览器实现计时器时",{"2":{"448":1}}],["浏览器必须准备好一个微队列",{"2":{"448":1}}],["浏览器永不阻塞",{"2":{"447":1}}],["浏览器进程内部会启动多个线程处理不同的任务",{"2":{"444":1}}],["浏览器进程",{"2":{"444":1}}],["浏览器是一个多进程多线程的应用程序",{"2":{"444":1}}],["操纵者不同",{"2":{"443":1}}],["操作",{"2":{"560":1}}],["操作非常耗费性能",{"2":{"560":1}}],["操作浏览器样式表",{"2":{"457":1}}],["操作系统就会查找",{"2":{"450":1}}],["操作系统的计时函数本身就有少量偏差",{"2":{"448":1}}],["操作符",{"0":{"131":1},"1":{"132":1,"133":1,"134":1,"135":1}}],["操作dom备用选择",{"2":{"125":2}}],["操作dom",{"2":{"125":2}}],["操作界面",{"2":{"46":2}}],["描述",{"2":{"443":1}}],["描述语言和国家信息的字符串",{"2":{"268":2}}],["支持相互之间的",{"2":{"535":1}}],["支持commonjs",{"2":{"535":1}}],["支持",{"2":{"514":1}}],["支持消息推送",{"2":{"497":1}}],["支持这个特性需要visual",{"2":{"440":2}}],["支持的目标版本",{"2":{"423":2}}],["禁止拖拽",{"2":{"551":1}}],["禁止右键",{"2":{"551":1}}],["禁止贪婪",{"2":{"347":2}}],["禁用函数参数双向协变检查",{"2":{"440":2}}],["抛出错误",{"2":{"440":6}}],["抛出异常或死循环",{"2":{"400":2}}],["抛出异常的级别",{"2":{"7":2}}],["报相关错误",{"2":{"590":1}}],["报文结构参考",{"2":{"454":1}}],["报告",{"2":{"440":4}}],["报错提示",{"2":{"609":1}}],["报错",{"2":{"234":2,"586":2}}],["允许",{"2":{"514":1}}],["允许从没有设置默认导出的模块中默认导入",{"2":{"440":2}}],["允许编译",{"2":{"440":2}}],["允许跨域资源共享",{"2":{"43":2}}],["详细内容可看此处",{"2":{"438":1}}],["详细的说",{"2":{"147":2}}],["理由同上",{"2":{"436":1}}],["顾名思义",{"2":{"435":1}}],["省的每次在不同层级文件import模块时",{"2":{"433":1}}],["平时都是webpack打包",{"2":{"432":1}}],["平行四边形",{"0":{"189":1}}],["笔者建议开启该选项",{"2":{"434":1}}],["笔者建议大家使用node",{"2":{"432":1}}],["笔者根据项目实战经历来解释一些常用的编译选项",{"2":{"425":1}}],["说直白点",{"2":{"432":1}}],["说明插入位置找到",{"2":{"290":2}}],["决定如何处理模块",{"2":{"432":1}}],["然而2016年1月以前",{"2":{"430":1}}],["然而",{"2":{"429":1}}],["然后才能执行后续代码",{"2":{"549":1}}],["然后再一次性渲染到真实",{"2":{"560":1}}],["然后再执行代码",{"2":{"549":1}}],["然后再",{"2":{"509":2}}],["然后再访问左子树和右子树",{"2":{"299":1}}],["然后在后续对高版本的新特性开发",{"2":{"487":1}}],["然后在后续对低版本进行兼容",{"2":{"487":1}}],["然后调用kmp函数来查找匹配位置",{"2":{"301":2}}],["然后逐个字符地扫描文本串和模式串",{"2":{"301":1}}],["然后访问右子树",{"2":{"299":1}}],["然后访问节点",{"2":{"299":1}}],["然后执行后面同步代码",{"2":{"238":2}}],["然后",{"2":{"217":1}}],["绝对定位absolute",{"2":{"479":1}}],["绝对定位",{"2":{"474":2}}],["绝对能省很多事",{"2":{"427":1}}],["绝对路径不利于维护移植",{"2":{"16":1}}],["建议正式项目开启该选项",{"2":{"436":1}}],["建议正式项目将该选项开启",{"2":{"435":1}}],["建议初次上手typescript",{"2":{"428":1}}],["建议请把这个值设为false",{"2":{"427":1}}],["建议把strictpropertyinitialization设置为false",{"2":{"427":1}}],["建议将密钥命名为",{"2":{"43":2}}],["启用装饰器",{"2":{"440":2}}],["启用严格的",{"2":{"440":2}}],["启用所有严格类型检查选项",{"2":{"440":2}}],["启用",{"2":{"426":1,"434":1}}],["启动服务执行命令",{"2":{"563":1}}],["启动服务器",{"2":{"20":1}}],["启动node环境",{"2":{"396":1}}],["启动两个网桥模式容器",{"2":{"64":2}}],["启动守护式",{"0":{"57":1}}],["启动",{"2":{"51":2,"72":1}}],["及settimeout",{"2":{"492":1}}],["及",{"2":{"426":1}}],["及其内容替换为一个注释",{"2":{"128":2}}],["官方解释",{"2":{"426":1,"432":1}}],["稍不留神就会书写出不符合规则的代码",{"2":{"425":1}}],["松散类型自动推推导",{"0":{"424":1}}],["告诉webpack不使用箭头函数",{"2":{"418":2}}],["打包时报错",{"2":{"590":1}}],["打包后文件的名字",{"2":{"418":2}}],["打击自信心",{"2":{"425":1}}],["打开文件",{"2":{"334":2}}],["打开编辑",{"0":{"235":1}}],["打开终端",{"2":{"234":1}}],["打开配置文件方式二",{"0":{"228":1}}],["打开配置文件方式一",{"0":{"227":1}}],["打开并添加需要power",{"2":{"227":1}}],["清除最后一个定时器",{"2":{"519":2}}],["清除上一次",{"2":{"519":4}}],["清除margin塌陷",{"2":{"482":1}}],["清楚dist目录旧文件",{"2":{"418":2}}],["清空",{"2":{"42":2}}],["步骤如下",{"2":{"415":1}}],["严格模式指向window的变为undefined",{"2":{"517":1}}],["严格的类型检查选项",{"2":{"440":2}}],["严格检查空值",{"2":{"414":2}}],["严格要求",{"2":{"399":2}}],["狗在跑~",{"2":{"411":2}}],["抽象方法没有方法体只能定义在抽象类中",{"2":{"411":1}}],["抽象类是专门用来被其他类所继承的类",{"2":{"411":1}}],["抽象类",{"0":{"411":1}}],["抽取方法",{"2":{"310":2}}],["栗子",{"2":{"404":1}}],["永远不返回结果",{"2":{"400":2}}],["任何会改变元素几何信息",{"2":{"465":1}}],["任意类型",{"2":{"400":2}}],["任务没有优先级",{"2":{"448":1}}],["任务",{"2":{"396":2}}],["联合类型",{"2":{"400":2}}],["联合写法",{"2":{"116":1}}],["枚举值",{"2":{"429":1,"430":1}}],["枚举类型",{"2":{"400":2}}],["枚举的值得到它的名字",{"2":{"399":1}}],["枚举的值得到它的名字enum",{"2":{"399":1}}],["枚举",{"2":{"399":1}}],["✅",{"2":{"396":2,"493":4,"494":4}}],["🔁",{"2":{"396":2}}],["📲",{"2":{"396":2}}],["🔧",{"2":{"396":2}}],["🛎️",{"2":{"396":2}}],["📝tmp",{"2":{"114":2}}],["📝alert",{"2":{"113":1}}],["📝appcomponent",{"2":{"119":1}}],["📝app",{"2":{"102":1,"114":1}}],["📝content",{"2":{"105":3,"106":2}}],["📝parent",{"2":{"103":1,"104":2}}],["📝shadow",{"2":{"102":1}}],["📝子组件",{"2":{"95":1,"96":1,"116":3}}],["📝父组件",{"2":{"95":1,"96":1,"116":3}}],["📝model",{"2":{"13":4}}],["部署运行环境搭建",{"2":{"396":2}}],["到",{"2":{"396":2}}],["主要用于服务器端的javascript编程",{"2":{"549":1}}],["主要区别在于代码生成的方式",{"2":{"491":1}}],["主要字号字体等",{"2":{"488":1}}],["主要空隙",{"2":{"488":1}}],["主要流程",{"2":{"396":1}}],["主题色",{"2":{"488":1}}],["主线程",{"2":{"495":4}}],["主线程使用复杂的策略对布局树进行分层",{"2":{"460":1}}],["主线程会遍历得到的dom",{"2":{"458":1}}],["主线程不会等待",{"2":{"456":1}}],["主线程将任务交给其他线程去处理",{"2":{"447":1}}],["主进程负责执行",{"2":{"444":1}}],["主动向原型中添加的属性或方法",{"2":{"274":1}}],["脚本",{"0":{"395":1}}],["脚本方式",{"2":{"5":1}}],["规则",{"2":{"509":3}}],["规定排序顺序",{"2":{"388":2}}],["规范提示用户输入提交信息",{"2":{"221":1}}],["规范提交信息",{"2":{"218":1}}],["统计数组中每个元素出现的次数",{"0":{"385":1}}],["统一存储到原型中",{"2":{"275":1}}],["统一开发标准",{"2":{"149":1}}],["作为第一次调用",{"2":{"378":2}}],["作用域的一种特殊应用",{"2":{"536":1}}],["作用域内被声明",{"2":{"516":1}}],["作用和arguments基本是一致",{"2":{"264":2}}],["作用",{"2":{"132":1,"221":1,"499":1}}],["拿到所有图片的图片名称并以数组形式返回",{"0":{"374":1}}],["值就保存在变量指向的那个内存地址",{"2":{"515":1}}],["值也需相同才返回",{"2":{"512":1}}],["值只能为string",{"2":{"402":2}}],["值",{"2":{"368":2,"573":1}}],["过度使用闭包会造成内存占用过多",{"2":{"538":1}}],["过期清除",{"2":{"522":1}}],["过期时限",{"2":{"41":1}}],["过滤小于",{"0":{"362":1}}],["排除法",{"2":{"594":1}}],["排除的文件夹",{"2":{"357":2,"599":2}}],["排序动画图解",{"2":{"288":1}}],["排序算法现在是稳定的",{"2":{"387":1}}],["排序算法",{"0":{"286":1},"1":{"287":1,"288":1,"289":1,"290":1,"291":1}}],["排序",{"2":{"4":1}}],["纯前端",{"0":{"357":1}}],["给对象加上新增的文章映射",{"2":{"596":1}}],["给父元素添加display",{"2":{"482":1}}],["给父元素添加position",{"2":{"482":1}}],["给父元素添加overflow",{"2":{"482":1}}],["给父元素添加透明边框",{"2":{"482":1}}],["给用户造成卡死现象",{"2":{"447":1}}],["给原子组起别名",{"0":{"356":1}}],["给控件加上name属性",{"2":{"118":1}}],["替换练习",{"0":{"355":1}}],["替换操作",{"2":{"346":2}}],["限定不包含关键词",{"2":{"350":2}}],["限制类型在几个值之间",{"2":{"400":2}}],["限制最后一位不是数字",{"2":{"350":2}}],["限制不是",{"2":{"350":2}}],["限制speak为函数",{"2":{"144":2}}],["限制sex为字符串",{"2":{"144":4}}],["限制age为数值",{"2":{"144":4}}],["限制name必传",{"2":{"144":4}}],["限制",{"2":{"41":1}}],["符合",{"2":{"350":2}}],["批量验证密码",{"0":{"348":1}}],["批量获取投影中到组件或指令",{"2":{"106":1}}],["贪婪到最后",{"2":{"347":2}}],["贪婪匹配+",{"0":{"347":1},"1":{"348":1}}],["往少的一方倾斜",{"2":{"347":2}}],["往不存在的集合插入数据",{"2":{"2":2}}],["校验用户名",{"2":{"346":2}}],["校验规范",{"2":{"220":2}}],["式",{"2":{"345":2}}],["达到平滑动画效果",{"2":{"526":1}}],["达到跨平台无缝接轨运作",{"2":{"47":1}}],["达",{"2":{"345":2}}],["哈",{"2":{"345":4}}],["哈哈",{"2":{"265":2}}],["正",{"2":{"345":2}}],["正则表达式",{"2":{"345":2}}],["正经人谁看书啊",{"2":{"181":1}}],["匹配到一个就停止let",{"2":{"347":2}}],["匹配到的第一个",{"2":{"346":2}}],["匹配所有字母",{"2":{"345":1}}],["匹配所有字母let",{"2":{"345":1}}],["匹配所有字符",{"0":{"344":1}}],["匹配所有标点符号",{"2":{"345":2}}],["匹配完不匹配后面",{"2":{"345":2}}],["匹配文本串和模式串",{"2":{"301":2}}],["边框",{"2":{"475":1}}],["边框内圆角",{"0":{"185":1}}],["边界符^",{"0":{"342":1}}],["特殊符号放在原子表里就是普通符号",{"2":{"341":2}}],["特性",{"0":{"41":1,"497":1}}],["资料参考",{"0":{"337":1}}],["谈谈js二进制",{"2":{"336":1}}],["找了好多博客参考",{"2":{"605":1}}],["找符合",{"2":{"509":2}}],["找出素数",{"0":{"365":1}}],["找出arr1数组中",{"2":{"328":2}}],["找到项目根目录",{"2":{"563":1,"564":1}}],["找到内容本身",{"2":{"346":2}}],["找到arr",{"2":{"288":2}}],["找到这个文件位置",{"2":{"227":1}}],["找到了mycomponent组件",{"2":{"139":2,"140":1}}],["找到根元素",{"2":{"99":1}}],["属于a不属于b的元素",{"2":{"324":2}}],["属性比真实",{"2":{"560":1}}],["属性相同则后者覆盖前者",{"2":{"554":1}}],["属性为对象时只复制值",{"2":{"527":1}}],["属性会被设置为构造函数的原型对象prototype",{"2":{"498":1}}],["属性非",{"2":{"479":1}}],["属性无效",{"2":{"479":1}}],["属性来实现",{"2":{"478":1}}],["属性存取器",{"0":{"407":1},"1":{"408":1}}],["属性去修改",{"2":{"276":1}}],["属性名",{"2":{"270":4,"277":2,"404":4}}],["属性私有化",{"2":{"270":2}}],["属性设置私有",{"2":{"270":1}}],["属性设置单元格内容的垂直位置",{"2":{"174":1}}],["属性设置单元格内容的水平位置",{"2":{"174":1}}],["属性和方法",{"2":{"265":2}}],["属性的用法完全一致",{"2":{"174":2}}],["属性还可用作",{"2":{"173":1}}],["属性型",{"0":{"125":1}}],["属性型指令",{"0":{"119":1}}],["属性选择器",{"2":{"119":2,"476":1}}],["属性",{"2":{"106":2,"270":4,"274":1,"440":2}}],["属性绑定",{"0":{"86":1}}],["属性将用户信息发送给客户端",{"2":{"43":2}}],["属性发送给客户端",{"2":{"43":2}}],["属性上",{"2":{"43":2}}],["差集",{"0":{"324":1,"328":1},"2":{"324":2}}],["差集的方法",{"0":{"320":1},"1":{"321":1,"322":1,"323":1,"324":1,"325":1,"326":1,"327":1,"328":1}}],["虽然问题解决的的过程有点费劲",{"2":{"594":1}}],["虽然ts在编译时也支持代码转换",{"2":{"422":1}}],["虽然",{"2":{"322":2}}],["虽然也可以在宿主页面中放多个组件",{"2":{"82":2}}],["示例没有引入flexsearchindexoptions",{"2":{"602":1}}],["示例数组",{"2":{"321":1,"325":1}}],["示例",{"2":{"318":2,"407":1}}],["键值对以字符串形式存储",{"2":{"522":1}}],["键值对一样",{"2":{"266":2}}],["键名",{"2":{"318":2}}],["谁快用谁",{"2":{"314":1}}],["马到功成",{"2":{"308":2}}],["负责加载网络资源",{"2":{"444":1}}],["负责浏览器界面展示",{"2":{"444":1}}],["负",{"2":{"302":2}}],["负载查看",{"2":{"54":1}}],["负载查看systemctl",{"2":{"54":1}}],["仟",{"2":{"302":4}}],["佰",{"2":{"302":4}}],["拾億零壹拾萬零壹",{"2":{"302":2}}],["拾",{"2":{"302":4}}],["億零",{"2":{"302":2}}],["億",{"2":{"302":6}}],["萬",{"2":{"302":6}}],["千",{"2":{"302":6}}],["千万不要把密码加密到",{"2":{"43":2}}],["百度地图",{"2":{"350":2}}],["百度",{"2":{"350":4}}],["百度一下",{"2":{"349":4,"350":2}}],["百",{"2":{"302":6}}],["亿零",{"2":{"302":2}}],["亿",{"2":{"302":8}}],["万",{"2":{"302":8}}],["元组",{"2":{"399":1,"400":2}}],["元字符",{"0":{"343":1}}],["元",{"2":{"302":6}}],["元素默认不会触发",{"2":{"615":1}}],["元素会被移出正常文档流",{"2":{"479":1}}],["元素来实现",{"2":{"478":1}}],["元素字体大小变化",{"2":{"465":1}}],["元素尺寸或位置发生改变",{"2":{"465":1}}],["元素的大小变化",{"2":{"615":2}}],["元素的宽度和高度可以直接指定为内容区域的尺寸",{"2":{"475":1}}],["元素的位置和尺寸大小",{"2":{"465":1}}],["元素的值",{"2":{"141":1}}],["元素",{"2":{"128":2,"130":1}}],["元素中",{"2":{"99":1,"141":1}}],["玖",{"2":{"302":4}}],["捌",{"2":{"302":4}}],["柒",{"2":{"302":4}}],["陆",{"2":{"302":4}}],["伍",{"2":{"302":4}}],["肆",{"2":{"302":4}}],["叁",{"2":{"302":4}}],["贰",{"2":{"302":4}}],["壹",{"2":{"302":4}}],["零元",{"2":{"302":2}}],["零$",{"2":{"302":2}}],["零",{"2":{"302":26}}],["总结",{"2":{"586":1}}],["总的来说",{"2":{"484":1}}],["总之",{"2":{"301":1}}],["总进度",{"2":{"15":2}}],["接着去执行软连接指向的",{"2":{"563":1}}],["接收数组的当前元素并返回该元素的长度",{"2":{"392":1}}],["接下来",{"2":{"301":1}}],["接口把数据传递给其他js",{"2":{"497":1}}],["接口地址为",{"2":{"46":2}}],["接口",{"0":{"412":1},"2":{"42":2,"43":2}}],["接口服务器",{"2":{"27":2}}],["先解绑该事件",{"2":{"612":2}}],["先调用原来对应方法",{"2":{"552":1}}],["先调用对線的",{"2":{"509":1}}],["先转为",{"2":{"324":2}}],["先b筛选a中没有的",{"2":{"322":2}}],["先访问左子树",{"2":{"299":2}}],["先访问节点",{"2":{"299":1}}],["先执行一次循环体",{"2":{"260":2}}],["先执行",{"2":{"240":2}}],["链表反转",{"0":{"298":1}}],["链表头部是最久未使用的元素",{"2":{"296":2}}],["缓存也没有找到",{"2":{"450":1}}],["缓存",{"2":{"450":2}}],["缓存是",{"2":{"296":8}}],["缓存最大容量",{"2":{"296":2}}],["缓存固定大小",{"2":{"296":2}}],["归并排序合并两个有序数组",{"2":{"292":2}}],["扫描所有组",{"2":{"291":2}}],["希望执行一个动画",{"2":{"526":1}}],["希望添加新的远程库",{"2":{"211":1}}],["希尔排序",{"0":{"291":1}}],["让客户端直接",{"2":{"471":1}}],["让ide在保存文件的时候根据tsconfig",{"2":{"440":2}}],["让前端开发也变得严谨而流畅",{"2":{"425":1}}],["让初始状态只能修改一次",{"2":{"304":1}}],["让后面每一个数比较找位置并插入有序数组里",{"2":{"290":1}}],["让访问",{"2":{"22":2}}],["小于0从后面计数的原则",{"2":{"532":1}}],["小型笔记本",{"2":{"489":1}}],["小的放在左数组",{"2":{"289":2}}],["小游戏",{"2":{"161":1}}],["选中心轴索引",{"2":{"289":2}}],["选择器",{"0":{"476":1}}],["选择模块解析策略",{"2":{"440":2}}],["选择排序",{"0":{"288":1}}],["选择themes目录下的一款主题文件",{"2":{"224":1}}],["选择themes目录下的一款主题文件oh",{"2":{"224":1}}],["选择文件夹",{"2":{"357":2}}],["选择文件",{"2":{"15":2}}],["快速笔记",{"2":{"588":1}}],["快速排序",{"0":{"289":1}}],["快速停止",{"2":{"72":1}}],["交互行为相关配置",{"2":{"577":2}}],["交互式提交工具",{"2":{"218":1}}],["交互式",{"2":{"56":2}}],["交给",{"2":{"464":1}}],["交集取反",{"2":{"324":2}}],["交集",{"0":{"323":1,"327":1}}],["交换",{"2":{"288":2}}],["冒泡排序",{"0":{"287":1}}],["递归按照最后一级目录生成侧边栏",{"2":{"599":2}}],["递归方式",{"2":{"543":2}}],["递归获取文件夹下的所有文件",{"2":{"357":2}}],["递归",{"2":{"297":2}}],["递归实现",{"2":{"285":2,"300":1}}],["递归+concat",{"2":{"282":2}}],["斐波那契数列",{"0":{"285":1}}],["求两个有序数组的中位数",{"0":{"292":1}}],["求最大公约数",{"0":{"284":1}}],["求删除后还有几页",{"2":{"159":2}}],["仅限二维数组",{"2":{"282":2}}],["仅用于渲染列表用于展示",{"2":{"147":2}}],["扁平化数组",{"0":{"282":1}}],["计算机通过网络进行通信的规则",{"2":{"452":1}}],["计算机硬件没有原子钟",{"2":{"448":1}}],["计算",{"2":{"445":1,"455":1}}],["计算两个或多个数字的平均值",{"0":{"382":1}}],["计算斐波那契数列",{"2":{"281":1}}],["计算阶乘",{"0":{"281":1}}],["计时器的回调函数只能在主线程空闲时运行",{"2":{"448":1}}],["计时器",{"2":{"109":2}}],["遍历前者的属性或方法",{"2":{"554":1}}],["遍历所有的",{"2":{"548":1}}],["遍历距离起点最近的节点",{"2":{"546":1}}],["遍历到的当前元素值",{"2":{"360":2}}],["遍历每一个promise并执行",{"2":{"315":2}}],["遍历回调函数数组",{"2":{"315":4}}],["遍历字符串中的每个字符",{"2":{"279":1}}],["遍历map",{"2":{"265":2}}],["出这两个有序数组的中位数",{"2":{"292":2}}],["出完栈",{"2":{"279":2}}],["出现此错误",{"2":{"592":1}}],["出现此提示表示未配置成功",{"2":{"234":1}}],["出现在其中就匹配成功",{"2":{"341":2}}],["出现identity",{"2":{"234":1}}],["出现了偏离",{"2":{"213":2}}],["栈顶出栈的左括号",{"2":{"279":2}}],["括号匹配",{"0":{"279":1}}],["通配符",{"2":{"476":1}}],["通常可以在根目录配置环境变量",{"2":{"573":1}}],["通常使用直线",{"2":{"484":1}}],["通常使用es6的模块来写ts代码",{"2":{"430":1}}],["通常改为怪异盒模型box",{"2":{"475":1}}],["通常我们也的确这么做",{"2":{"429":1}}],["通常不会为构造函数指定返回值",{"2":{"278":1}}],["通过判断滚动的距离",{"2":{"614":2}}],["通过对",{"2":{"560":1}}],["通过require函数同步加载该模块",{"2":{"549":1}}],["通过深度优先遍历",{"2":{"547":1}}],["通过css定位显示指定位置的小图片",{"2":{"486":1}}],["通过call方法调用函数",{"2":{"262":1}}],["通过call和apply调用的函数",{"2":{"262":1}}],["通过定义一个",{"2":{"478":1}}],["通过引入装饰器模式",{"2":{"426":1}}],["通过继承可以在不修改类的情况下完成对类的扩展",{"2":{"409":1}}],["通过继承可以将其他类中的属性和方法引入到当前类中",{"2":{"409":1}}],["通过类即可直接使用",{"2":{"408":1}}],["通过类来调用",{"2":{"269":2}}],["通过提供函数实现的依次测试的所有元素",{"2":{"359":1}}],["通过利用前缀表来避免不必要的比较",{"2":{"301":3}}],["通过getter和setter方法来操作属性",{"2":{"270":2}}],["通过getter",{"2":{"270":1}}],["通过arguments",{"2":{"263":2}}],["通过bind返回的函数",{"2":{"262":1}}],["通过",{"2":{"242":2,"276":1,"478":1,"572":1}}],["通过函数调用继续返回函数的方式",{"2":{"146":1}}],["通过event",{"2":{"146":1}}],["通过onxxx属性指定事件处理函数",{"2":{"146":1}}],["修改失败`",{"2":{"610":2}}],["修改成功`",{"2":{"610":2}}],["修改themeconfig的sidebar属性",{"2":{"596":1}}],["修改webpack",{"0":{"423":1}}],["修改package",{"0":{"420":1},"2":{"418":2}}],["修改原型",{"0":{"276":1}}],["修改第一次提交信息",{"0":{"214":1}}],["直到最后一个",{"2":{"548":1}}],["直到根元素",{"2":{"528":1}}],["直到目标元素",{"2":{"528":1}}],["直到",{"2":{"479":1}}],["直到找到object对象的原型",{"2":{"275":1}}],["直白点",{"2":{"427":1}}],["直接写在类名上不生效",{"2":{"586":2}}],["直接支持es6module",{"2":{"535":1}}],["直接执行catch方法",{"2":{"529":1}}],["直接针对最高级",{"2":{"487":1}}],["直接从缓存获取资源",{"2":{"471":1}}],["直接将其设置为private将导致无法再通过对象修改其中的属性",{"2":{"407":1}}],["直接通过对象所添加的属性",{"2":{"274":1}}],["直接添加到对象中的属性",{"2":{"270":1}}],["直接回车",{"2":{"232":1}}],["直接回车ssh",{"2":{"232":1}}],["直接指定项目的位置",{"2":{"173":1}}],["直接使用之前的真实dom",{"2":{"147":2}}],["访问该子节点",{"2":{"543":1}}],["访问根节点",{"2":{"543":1}}],["访问一个对象的原型对象",{"2":{"274":1}}],["访问地址为",{"2":{"46":2}}],["旺财",{"2":{"271":2,"409":2,"410":2}}],["汪汪汪",{"2":{"271":2}}],["私有化方案",{"2":{"488":1}}],["私有化数据",{"2":{"270":1}}],["私有属性只能在类内部访问",{"2":{"270":2}}],["私钥地址host",{"2":{"235":1}}],["私钥地址",{"2":{"235":3}}],["灵活性",{"2":{"269":1}}],["灵活的背景定位",{"0":{"184":1}}],["扩大系数法",{"2":{"513":1}}],["扩展性",{"2":{"269":1}}],["扩张半径取圆角的一半",{"2":{"185":2}}],["继续解析后续的",{"2":{"456":1}}],["继续下一次循环",{"2":{"260":1}}],["继承抽象类时抽象方法必须要实现",{"2":{"411":1}}],["继承的类称为",{"2":{"271":1}}],["继承发生时",{"2":{"271":1}}],["继承",{"0":{"271":1,"409":1},"1":{"410":1},"2":{"269":1,"271":1}}],["继承和多态",{"2":{"269":1}}],["封装队列",{"0":{"493":1}}],["封装为",{"2":{"424":2}}],["封装",{"0":{"270":1,"406":1},"2":{"269":2}}],["大屏手机",{"2":{"489":1}}],["大功告成",{"2":{"303":2,"307":2,"308":2}}],["大写中文",{"2":{"302":2}}],["大的放在右数组",{"2":{"289":2}}],["大家好",{"2":{"269":2}}],["大于等于",{"2":{"194":2}}],["面试",{"0":{"575":1}}],["面试题总结与归纳",{"2":{"575":1}}],["面试题",{"2":{"512":1}}],["面试相关题",{"2":{"147":2}}],["面对对象",{"0":{"403":1},"1":{"404":1,"405":1,"406":1,"407":1,"408":1,"409":1,"410":1,"411":1,"412":1}}],["面向对象的特点",{"2":{"269":1}}],["面向对象之类",{"0":{"269":1},"1":{"270":1,"271":1,"272":1}}],["英文美国",{"2":{"268":2}}],["得到35px的空白",{"2":{"482":1}}],["得到20px的空白",{"2":{"482":1}}],["得到键值对",{"2":{"266":2}}],["得到的永远是module",{"2":{"25":1}}],["猪八戒",{"2":{"265":2,"406":6,"407":2}}],["嘻嘻",{"2":{"265":2}}],["配合其他参数一起使用",{"2":{"264":2}}],["配置完后发现打包报错",{"2":{"607":1}}],["配置中的路径和",{"2":{"572":1}}],["配置文件",{"0":{"425":1},"1":{"426":1,"427":1,"428":1,"429":1,"430":1,"431":1,"432":1,"433":1,"434":1,"435":1,"436":1,"437":1,"438":1,"439":1,"440":1}}],["配置ts编译选项",{"0":{"419":1}}],["配置信息",{"2":{"418":2}}],["配置babel",{"2":{"418":2}}],["配置webpack",{"0":{"418":1},"2":{"418":2}}],["配置参数",{"2":{"231":1}}],["配置powershell",{"0":{"226":1},"1":{"227":1,"228":1}}],["配置费力费时",{"2":{"47":1}}],["配置不一致",{"2":{"47":1}}],["配置对象",{"2":{"43":2}}],["配置",{"0":{"34":1},"2":{"42":2,"221":1,"396":4,"573":1,"590":1}}],["配置解析urlencoded请求体中间件",{"2":{"30":2}}],["构造函数原型对象的原型",{"2":{"500":1}}],["构造函数会被执行",{"2":{"498":1}}],["构造函数",{"0":{"405":1},"2":{"303":2,"304":2,"315":2,"500":1}}],["构造函数的第一行代码必须为super",{"2":{"271":2}}],["构造函数执行了~",{"2":{"269":2}}],["构造函数中指向对象实例",{"2":{"517":1}}],["构造函数中",{"2":{"262":1}}],["构建优化",{"0":{"569":1},"1":{"570":1,"571":1}}],["构建静态文件",{"2":{"396":1}}],["构建前缀表",{"2":{"301":2}}],["构建工具承担",{"0":{"149":1}}],["构建参数",{"2":{"61":2}}],["构建或删除过程中产生的仓库名和标签都为none的镜像",{"2":{"55":1}}],["死循环",{"2":{"260":2}}],["再遍历后者的属性或方法",{"2":{"554":1}}],["再对新增的每一项进行数据劫持",{"2":{"552":1}}],["再比较",{"2":{"512":1}}],["再进行比较",{"2":{"512":2}}],["再调用对線的",{"2":{"509":1}}],["再调用对泉的",{"2":{"509":1}}],["再连接数组",{"2":{"322":2}}],["再递归对比每个项是否相等",{"2":{"318":1}}],["再判断条件是否执行循环体",{"2":{"260":2}}],["再执行上面代码",{"2":{"234":1}}],["成立返回true",{"2":{"256":2}}],["成功添加上了本地搜索功能",{"2":{"600":1}}],["成功2",{"2":{"314":2}}],["成功1",{"2":{"314":2}}],["成功",{"2":{"313":2,"315":2}}],["成功状态",{"2":{"303":2,"304":2}}],["成功执行",{"2":{"239":2}}],["成功为null",{"2":{"16":2}}],["左侧菜单折叠响应式",{"0":{"584":1}}],["左右有true",{"2":{"255":2}}],["左右都为true返回true",{"2":{"255":2}}],["左中右",{"2":{"174":1}}],["逻辑或",{"2":{"255":2}}],["逻辑与",{"2":{"255":2}}],["逻辑非",{"2":{"255":2}}],["逻辑运算符",{"0":{"255":1}}],["其中",{"2":{"543":2,"544":2}}],["其中最重要且广泛的的作用就是离线资源缓存",{"2":{"496":1}}],["其余都是",{"2":{"511":1}}],["其他类型转为布尔类型",{"0":{"511":1}}],["其他类型转为字符串",{"0":{"510":1}}],["其他类型转为数字类型",{"0":{"509":1}}],["其他所有线程",{"2":{"446":1}}],["其他选项",{"2":{"440":2}}],["其他运算它先将其他值转为数字",{"2":{"251":1}}],["其组合内容表示项目运行时的结构内容",{"2":{"440":2}}],["其实早期可以通过关闭一些规则设置",{"2":{"425":1}}],["其它小写",{"2":{"132":1}}],["除了上述的情况之外",{"2":{"572":1}}],["除了以上情况",{"2":{"512":1}}],["除了falsy值",{"2":{"511":1}}],["除了never本身之外",{"2":{"400":2}}],["除了1和自身",{"2":{"365":2}}],["除了加法和其他字符串运算时",{"2":{"251":1}}],["除了本身的依赖项",{"2":{"80":2}}],["算术运算符",{"0":{"251":1}}],["观察者",{"0":{"250":1}}],["老鸡咯咯叫",{"2":{"245":2}}],["老鸡",{"2":{"245":4,"246":2}}],["老虎嗷嗷叫",{"2":{"245":2}}],["老虎",{"2":{"245":4,"246":2}}],["老牛咯咯叫",{"2":{"245":2}}],["老牛嗷嗷叫",{"2":{"245":2}}],["老牛哞哞叫",{"2":{"245":4}}],["老牛",{"2":{"245":6,"246":2}}],["老刘",{"2":{"144":2}}],["循环完成后",{"2":{"392":1}}],["循环实现",{"2":{"300":2}}],["循环三要素",{"2":{"260":2}}],["循环语句",{"0":{"260":1}}],["循环中执行异步操作",{"2":{"243":1}}],["循环上传切片",{"2":{"14":1}}],["利用闭包预先存储",{"2":{"540":1}}],["利用闭包存储实参",{"2":{"539":2}}],["利用==会进行类型转换",{"2":{"512":2}}],["利用伪元素撑开高度",{"2":{"490":1}}],["利用浏览器缓存",{"2":{"486":1}}],["利用前缀表来确定匹配的位置",{"2":{"301":1}}],["利用栈来实现括号匹配",{"2":{"279":1}}],["利用",{"2":{"243":2,"552":1}}],["利用宿主机内核",{"2":{"48":1}}],["走catch",{"2":{"239":2}}],["走then",{"2":{"239":2}}],["做一些清理工作",{"2":{"239":2}}],["做的修改合并到最近的提交中",{"2":{"213":2}}],["声明必须初始化",{"2":{"515":1}}],["声明为static的属性或方法不再属于实例",{"2":{"406":1}}],["声明模板引用变量",{"2":{"130":1}}],["声名string类型变量",{"2":{"401":2}}],["声名promise并绑定this",{"0":{"303":1}}],["声名promise",{"2":{"239":1}}],["容易造成内存泄漏",{"2":{"538":1}}],["容易形成回调地狱",{"2":{"238":1}}],["容器由视口改为该祖先",{"2":{"479":1}}],["容器内网格垂直居中",{"2":{"474":2}}],["容器内网格对齐方式",{"0":{"167":1}}],["容器中区域定义",{"0":{"170":1}}],["容器划分行列",{"0":{"165":1}}],["容器属性",{"0":{"163":1},"1":{"164":1,"165":1,"166":1,"167":1,"168":1,"169":1,"170":1}}],["容器启动后",{"2":{"61":2}}],["容器卷",{"0":{"60":1}}],["容器文件路径",{"2":{"59":2}}],["容器备份到主机",{"0":{"59":1}}],["容器名",{"2":{"56":2,"62":4,"63":2}}],["容器id或容器名",{"2":{"56":4}}],["容器id",{"2":{"55":2,"56":2,"58":4,"59":4}}],["容器",{"0":{"56":1},"1":{"57":1,"58":1,"59":1,"60":1,"63":1,"64":1,"66":1,"67":1,"68":1},"2":{"49":1,"137":2,"139":2}}],["缺点",{"2":{"238":1,"485":1}}],["编程踩坑积累与总结",{"0":{"616":1}}],["编辑框实时保存",{"2":{"520":1}}],["编辑完保存前记得去掉注释",{"2":{"235":1}}],["编码和解码需要计算资源",{"2":{"485":1}}],["编译器",{"2":{"488":1}}],["编译器默认包含当前目录和子目录下所有的typescript文件",{"2":{"439":1}}],["编译器的选项",{"2":{"414":2}}],["编译文件包含哪些文件以及排除哪些文件",{"2":{"439":1}}],["编译不报错",{"2":{"435":1}}],["编译过程中需要引入的库文件的列表",{"2":{"431":1}}],["编写tsconfig",{"2":{"418":2}}],["编写webpack配置文件",{"2":{"418":2}}],["编写配置",{"0":{"73":1}}],["编写接口",{"0":{"30":1},"1":{"31":1,"32":1}}],["管理员身份",{"2":{"234":1}}],["管道名称",{"2":{"132":1}}],["管道时",{"2":{"122":2}}],["管道",{"0":{"132":1},"2":{"78":1}}],["复制成功",{"2":{"574":2}}],["复制公钥所有内容",{"2":{"233":1}}],["复杂数据",{"2":{"4":2}}],["密码不用填",{"2":{"232":2}}],["密钥",{"2":{"43":2}}],["换浏览器后没报错",{"2":{"588":1}}],["换成自己邮箱",{"2":{"232":2}}],["换行符",{"2":{"197":1}}],["乱码问题解决方式",{"2":{"225":1}}],["钩子工具",{"2":{"218":1}}],["位部分被丢弃",{"2":{"513":1}}],["位二进制",{"2":{"507":1}}],["位于",{"2":{"450":1}}],["位于原型中",{"2":{"274":1}}],["位于对象自身中",{"2":{"274":2}}],["位于分支",{"2":{"213":2}}],["位置",{"2":{"191":1,"456":2}}],["还好碰到一篇博客解决了疑惑",{"2":{"605":1}}],["还没有解析成功",{"2":{"450":1}}],["还是",{"2":{"433":1}}],["还要负责数据的安全",{"2":{"270":1}}],["还需要修改再提交",{"2":{"213":1}}],["还可以用来指定函数中的this",{"2":{"262":1}}],["还可以元数据中声名输入",{"2":{"96":1}}],["还可能需要其他模块导出的依赖项",{"2":{"80":2}}],["暂存性死区",{"0":{"516":1},"2":{"514":1,"516":2}}],["暂存更改到stash",{"2":{"212":2}}],["暂无文章",{"2":{"12":2}}],["运算符",{"0":{"253":1}}],["运用",{"2":{"211":2}}],["运行效果和ngifelese案例一样",{"2":{"121":1}}],["运行效果和ngifelese案例一样import",{"2":{"121":1}}],["运行时一直生效后续可以引用",{"2":{"61":2}}],["运行时无效",{"2":{"61":2}}],["运行",{"2":{"25":1}}],["运行在localhost",{"2":{"21":2}}],["同源下获取所有cookie",{"2":{"523":2}}],["同源策略",{"2":{"522":1}}],["同一个类型的任务必须在一个队列",{"2":{"448":1}}],["同一个仓库关联",{"2":{"211":1}}],["同",{"2":{"402":2}}],["同步到gitee",{"2":{"396":2}}],["同步代码",{"2":{"307":4,"308":2}}],["同步更新两边代码",{"2":{"211":1}}],["同时也影响",{"2":{"573":1}}],["同时也减轻了原始服务器的负载",{"2":{"486":1}}],["同时也会删除",{"2":{"205":1}}],["同时还有any类型",{"2":{"428":1}}],["同时在stage",{"2":{"426":1}}],["同时设置",{"2":{"112":1}}],["同时使用and和or条件",{"2":{"4":1}}],["完全拷贝一份新的",{"2":{"527":1}}],["完成了",{"2":{"494":2}}],["完成合并",{"2":{"210":1}}],["完整的",{"2":{"449":1}}],["完整代码",{"0":{"315":1}}],["完整配置参考",{"2":{"231":1}}],["完整写法",{"2":{"117":2,"121":1}}],["完整形式",{"2":{"86":2}}],["填第2",{"2":{"210":2}}],["添加和配置插件",{"0":{"602":1}}],["添加如下代码",{"0":{"599":1}}],["添加label",{"2":{"578":6}}],["添加图标",{"2":{"578":4}}],["添加",{"2":{"523":2}}],["添加数据",{"2":{"523":2}}],["添加或者删除可见的dom元素",{"2":{"465":1}}],["添加一个元素到缓存中",{"2":{"296":2}}],["添加方法",{"2":{"269":2}}],["添加方法的一种方式",{"2":{"269":2}}],["添加元素",{"2":{"266":2}}],["添加私钥到ssh",{"0":{"234":1},"2":{"234":1}}],["添加安装脚本呢",{"2":{"220":2}}],["添加上游分支路径",{"2":{"209":2}}],["添加到body最后",{"2":{"113":2}}],["原数组中的每个元素依次调用一个指定方法后",{"2":{"367":1}}],["原始类型",{"2":{"506":1}}],["原始数组不发生改变",{"2":{"359":1,"367":1,"377":1}}],["原始值或对象本身",{"2":{"533":1}}],["原始值",{"2":{"261":2}}],["原子组中使用",{"2":{"346":2}}],["原子组中的原子表",{"0":{"346":1}}],["原子组2",{"2":{"346":2,"349":2}}],["原子组1",{"2":{"346":2,"349":2}}],["原子组",{"0":{"341":1},"2":{"341":2}}],["原子表",{"0":{"341":1},"2":{"341":2}}],["原生的会报错",{"2":{"311":2}}],["原则",{"2":{"276":1}}],["原型和原型链",{"0":{"499":1},"1":{"500":1}}],["原型尽量不要手动改",{"2":{"276":1}}],["原型就相当于是一个公共的区域",{"2":{"275":1}}],["原型的作用",{"2":{"275":1}}],["原型链继承",{"0":{"503":1}}],["原型链属性查找规则",{"2":{"275":1}}],["原型链的长度也不同",{"2":{"274":1}}],["原型链",{"0":{"275":1},"2":{"274":1}}],["原型对象也有原型",{"2":{"274":1}}],["原型对象也负责为对象存储属性",{"2":{"274":1}}],["原型对象中的数据",{"2":{"274":1}}],["原型对象",{"2":{"274":2}}],["原型",{"0":{"274":1},"2":{"274":1}}],["原仓库url",{"2":{"209":2}}],["原理",{"2":{"43":1,"121":1}}],["拉取上游分支更新并合并",{"2":{"209":1}}],["拉取上游分支更新并合并git",{"2":{"209":1}}],["拉取合并原仓库的更新",{"0":{"209":1}}],["拉取最新提交",{"0":{"205":1}}],["远程tag",{"2":{"207":2}}],["远程分支",{"2":{"206":2}}],["例",{"2":{"205":1,"400":2}}],["例如生成",{"2":{"548":1}}],["例如",{"2":{"147":8,"233":1,"301":1,"414":2,"465":1,"528":1,"546":1,"572":2,"573":1}}],["命令查看",{"2":{"450":1}}],["命令将提交移动到正确的分支上",{"2":{"217":1}}],["命令会替换掉原有的链接",{"2":{"211":1}}],["命令用于将远程仓库中的最新提交记录拉取到本地仓库中",{"2":{"205":1}}],["命令用于从远程仓库中拉取最新的提交记录",{"2":{"205":1}}],["命令",{"2":{"205":2,"211":1}}],["真实闪烁",{"2":{"203":2}}],["真实dom比较",{"2":{"137":1}}],["普通数组",{"0":{"321":1},"1":{"322":1,"323":1,"324":1}}],["普通值的情况",{"2":{"309":1}}],["普通闪烁",{"2":{"203":2}}],["普通写法",{"2":{"117":1}}],["闪烁效果",{"0":{"203":1}}],["紧贴底部的页脚",{"0":{"202":1}}],["满足条件的留下",{"2":{"359":1}}],["满足组合才行",{"2":{"341":2}}],["满足则执行代码",{"2":{"259":2}}],["满足下列两个条件之一",{"2":{"118":1}}],["满幅背景",{"0":{"201":1}}],["凹",{"2":{"200":1}}],["凹text",{"2":{"200":1}}],["凹凸印刷文字效果",{"0":{"200":1}}],["凸",{"2":{"200":2}}],["~",{"2":{"197":1,"211":1,"221":1,"234":2,"235":4}}],["­",{"2":{"197":2}}],["至",{"2":{"194":1}}],["毛玻璃",{"0":{"194":1}}],["染色效果",{"0":{"193":1}}],["双重循环遍历数组去重",{"2":{"316":2}}],["双侧投影",{"0":{"192":1}}],["双向绑定语法",{"2":{"116":2}}],["双向绑定",{"0":{"115":1},"1":{"116":1,"117":1,"118":1}}],["切换到输入框模式",{"2":{"610":2}}],["切换到错误分支上",{"2":{"217":1}}],["切换到正确的分支并使用",{"2":{"216":1}}],["切换分支",{"2":{"212":2}}],["切换数据库",{"2":{"1":1}}],["切换数据库show",{"2":{"1":1}}],["切除与原始元素交集部分",{"2":{"191":1}}],["进而找到",{"2":{"564":1}}],["进制",{"2":{"509":2}}],["进程",{"2":{"463":1}}],["进程操纵者是操作系统",{"2":{"443":1}}],["进程慢",{"2":{"443":1}}],["进程是操作系统分配资源的基本单位",{"2":{"443":1}}],["进程与线程",{"0":{"443":1}}],["进程号",{"2":{"72":4}}],["进行求和处理",{"2":{"539":2}}],["进行存储的",{"2":{"507":1}}],["进行判断",{"2":{"496":1}}],["进行线程间通信",{"2":{"495":1}}],["进行呈现",{"2":{"464":1}}],["进行打包",{"2":{"429":1}}],["进行水平垂直位移",{"2":{"191":1}}],["进入项目根目录",{"2":{"416":1}}],["画饼图",{"2":{"481":2}}],["画draw",{"0":{"464":1}}],["画",{"2":{"455":1}}],["画该元素相同尺寸",{"2":{"191":1}}],["画布网状满天星背景",{"0":{"178":1}}],["投影大致原理",{"2":{"191":1}}],["视频摘要",{"2":{"588":1}}],["视觉效果",{"0":{"191":1},"1":{"192":1,"193":1,"194":1,"195":1}}],["视图封装模式",{"0":{"101":1}}],["梯形",{"0":{"190":1}}],["按钮点击失效问题",{"0":{"610":1}}],["按钮内容不行变解决方案",{"2":{"189":2}}],["按最后一级目录分组",{"2":{"599":2}}],["按照",{"2":{"448":1}}],["按语言系统匹配中文",{"2":{"345":2}}],["按指定模糊半径",{"2":{"191":1}}],["按指定的",{"2":{"191":1}}],["按域名ping不通",{"2":{"64":2}}],["半椭圆",{"2":{"188":2}}],["圆角",{"0":{"188":1}}],["形成原因",{"0":{"593":1}}],["形成闭包",{"2":{"536":2}}],["形成",{"2":{"455":1,"482":2}}],["形状",{"0":{"187":1},"1":{"188":1,"189":1,"190":1}}],["形式",{"2":{"43":1}}],["斜向",{"2":{"186":2}}],["横向",{"2":{"186":2}}],["条件表达式",{"2":{"260":2}}],["条件表达式\\t3",{"2":{"260":2}}],["条件运算符",{"0":{"258":1}}],["条件3",{"2":{"247":2}}],["条件2",{"2":{"247":2}}],["条件1",{"2":{"247":2}}],["条件",{"2":{"247":2}}],["条件复杂",{"0":{"247":1}}],["条件单一",{"0":{"246":1}}],["条纹背景",{"0":{"186":1}}],["条数",{"2":{"4":1}}],["下的所有文件夹",{"2":{"599":2}}],["下一个请求的下标",{"2":{"494":2}}],["下一步填写合并提交信息",{"2":{"210":1}}],["下载构建工具",{"0":{"417":1}}],["下载镜像",{"2":{"55":2}}],["下边10px",{"2":{"184":2}}],["离右侧20px",{"2":{"184":2}}],["离线",{"2":{"158":2}}],["故摘抄以便往后快捷运用",{"2":{"181":1}}],["挺有趣的",{"2":{"181":1}}],["似乎有一点香",{"2":{"181":1}}],["看到vscode有个快捷按钮",{"2":{"607":1}}],["看了这本书知识浅显易懂",{"2":{"181":1}}],["看完这本后",{"2":{"181":1}}],["看书",{"2":{"181":1}}],["看这本书前",{"2":{"181":1}}],["揭秘",{"0":{"181":1},"1":{"182":1,"183":1,"184":1,"185":1,"186":1,"187":1,"188":1,"189":1,"190":1,"191":1,"192":1,"193":1,"194":1,"195":1,"196":1,"197":1,"198":1,"199":1,"200":1,"201":1,"202":1,"203":1}}],["妙妙怪的",{"0":{"181":1},"1":{"182":1,"183":1,"184":1,"185":1,"186":1,"187":1,"188":1,"189":1,"190":1,"191":1,"192":1,"193":1,"194":1,"195":1,"196":1,"197":1,"198":1,"199":1,"200":1,"201":1,"202":1,"203":1}}],["轮播闪光",{"0":{"179":1}}],["上报错",{"2":{"586":1}}],["上",{"2":{"560":1}}],["上次执行时间",{"2":{"520":2}}],["上下相连的元素",{"2":{"482":2}}],["上下文切换",{"2":{"443":1}}],["上海",{"2":{"399":2}}],["上一次调用回调返回的值",{"2":{"378":1}}],["上中下",{"2":{"174":1}}],["上传",{"2":{"46":2}}],["上传分片",{"2":{"15":2}}],["上传完成",{"2":{"14":1}}],["跟",{"2":{"174":2}}],["项目一直报",{"0":{"588":1}}],["项目",{"0":{"563":1}}],["项目使用",{"0":{"421":1}}],["项目区域定义",{"0":{"173":1}}],["项目属性",{"0":{"171":1},"1":{"172":1,"173":1,"174":1}}],["项目排列顺序",{"0":{"169":1}}],["项目相对于网格",{"2":{"168":1}}],["垂直半径",{"2":{"188":2}}],["垂直",{"2":{"168":2,"186":2}}],["水平垂直居中",{"0":{"474":1}}],["水平半径",{"2":{"188":2}}],["水平",{"2":{"168":2}}],["案例练习",{"0":{"354":1},"1":{"355":1,"356":1},"2":{"347":2}}],["案例",{"2":{"167":1,"168":1}}],["调整间距属性",{"0":{"166":1}}],["调用的路径",{"2":{"572":1}}],["调用时依次执行",{"2":{"554":1}}],["调用父类的构造函数",{"2":{"271":2}}],["调用组件的某个方法执行逻辑",{"2":{"113":2}}],["调用",{"2":{"42":2,"43":2,"113":1,"126":1,"378":1}}],["学到了码农必备技能",{"2":{"607":1}}],["学习导航",{"2":{"161":1}}],["学号等唯一值",{"2":{"147":2}}],["全等",{"2":{"512":1}}],["全部",{"2":{"158":2}}],["全局替换时粗心大意造成img",{"0":{"593":1}}],["全局对象",{"2":{"535":1}}],["全局作用域中或者普通函数中指向全局对象window",{"2":{"517":1}}],["全局匹配拿不到它每个原子组",{"2":{"349":2}}],["全局匹配",{"2":{"345":2,"346":2}}],["全局安装",{"2":{"221":2}}],["全局样式能进来",{"2":{"101":1}}],["全局中间件被执行了",{"2":{"29":4}}],["状态绑定成功",{"2":{"308":2}}],["状态保护与执行者异步捕获",{"0":{"304":1}}],["状态",{"2":{"158":2}}],["请输入",{"2":{"610":2}}],["请输入esn",{"2":{"158":2}}],["请输入名称",{"2":{"158":2}}],["请求问题",{"2":{"558":1}}],["请求再次发起",{"2":{"471":1}}],["请求体",{"2":{"453":1}}],["请求体中的数据",{"2":{"43":2}}],["请求头",{"2":{"453":1}}],["请求行",{"2":{"453":1}}],["请求报文包括四个部分",{"2":{"453":1}}],["请求报文结构",{"0":{"453":1}}],["请求",{"0":{"452":1,"454":1},"1":{"453":1},"2":{"449":2}}],["请求过程",{"2":{"449":1}}],["请求资源",{"2":{"449":1}}],["请求的状态",{"2":{"40":1}}],["请求成功",{"2":{"30":4}}],["请求路径和方式",{"2":{"22":4}}],["请求方法",{"2":{"20":2}}],["请求url",{"2":{"20":2}}],["名片",{"2":{"484":1}}],["名字去重",{"2":{"374":1}}],["名字去重const",{"2":{"374":1}}],["名字可以自己指定",{"2":{"264":2}}],["名称",{"2":{"158":2,"610":2}}],["名为ngmodelchange的输出属性",{"2":{"117":1}}],["名为ngmodel的输入属性",{"2":{"117":1}}],["序号",{"2":{"158":2}}],["列出所有本地",{"2":{"206":2,"207":2}}],["列出正在运行容器",{"2":{"56":2}}],["列表页",{"0":{"158":1}}],["页脚",{"0":{"201":1}}],["页码改变",{"2":{"157":2}}],["页面加载不出来",{"0":{"613":1}}],["页面操作触发数据更新",{"2":{"553":1}}],["页面首次渲染",{"2":{"465":1}}],["页面布局",{"2":{"445":1}}],["页面",{"2":{"111":1,"590":1}}],["搜索结果预览长度",{"2":{"602":2}}],["搜索",{"2":{"157":2,"602":2}}],["搜索镜像",{"2":{"55":2}}],["某些页面特殊需要特殊处理",{"2":{"157":2}}],["某个类或样式绑定越具体",{"2":{"92":1}}],["某个作者的文章",{"2":{"12":2}}],["回流reflow",{"0":{"465":1}}],["回调函数则等预定时间才执行",{"2":{"238":1}}],["回调函数则等预定时间才执行let",{"2":{"238":1}}],["回调函数",{"0":{"238":1},"2":{"392":1}}],["回调函数形式执行次数",{"2":{"145":1}}],["回调函数形式",{"2":{"145":4}}],["回显搜索条件",{"2":{"157":2}}],["回显开关",{"2":{"157":2}}],["场景三",{"0":{"153":1}}],["场景二",{"0":{"152":1}}],["场景一",{"0":{"151":1}}],["透传",{"2":{"150":1}}],["块级作用域",{"2":{"514":1}}],["块级元素",{"2":{"474":1}}],["块书写的选项",{"2":{"150":1}}],["块中的花括号",{"2":{"129":2}}],["代表业务逻辑层",{"2":{"553":1}}],["代表用户操作的界面",{"2":{"553":1}}],["代表数据模型",{"2":{"553":1}}],["代表设备",{"2":{"489":1}}],["代理服务器",{"2":{"149":1}}],["代码示例",{"2":{"573":1}}],["代码全部完成后再进行统一计算",{"2":{"465":1}}],["代码的执行过程可能会修改当前的dom",{"2":{"456":1}}],["代码的生成",{"2":{"440":2}}],["代码中的资源",{"2":{"449":1}}],["代码优化及复用",{"0":{"310":1}}],["代码提交到了错误的分支",{"0":{"215":1},"1":{"216":1,"217":1}}],["代码分割",{"2":{"149":1}}],["代码",{"0":{"454":1},"2":{"7":2,"137":2,"444":1,"445":1,"449":2}}],["热更新",{"2":{"149":1}}],["预览所有主题命令",{"0":{"223":1}}],["预览要删除的文件列表",{"2":{"208":2}}],["预加载等",{"2":{"149":1}}],["预处理器",{"2":{"195":1}}],["预处理",{"2":{"29":1}}],["懒加载可以避免在页面中加载不必要的图片",{"2":{"486":1}}],["懒加载",{"2":{"149":1,"486":1}}],["合并多个小图片成一张大图",{"2":{"486":1}}],["合并多次提交",{"0":{"210":1}}],["合并形成",{"2":{"455":1}}],["合并数组并遍历",{"2":{"326":2}}],["合并两个有序数组",{"2":{"292":2}}],["合并最近的",{"2":{"210":2}}],["合并单元格属性",{"0":{"172":1}}],["合并代码",{"2":{"149":1}}],["合成线程计算出每个位图在屏幕上的位置",{"2":{"464":1}}],["合成线程将信息交给",{"2":{"463":1}}],["合成",{"2":{"146":1}}],["压缩图片",{"2":{"486":1}}],["压缩代码",{"2":{"149":1,"548":1}}],["压根不会把它放进",{"2":{"129":2}}],["身份证号",{"2":{"147":2}}],["身份认证",{"0":{"39":1},"1":{"40":1,"41":1,"42":1,"43":1}}],["手机息屏策略",{"2":{"520":1}}],["手机",{"2":{"489":1}}],["手机号",{"2":{"147":2}}],["手动触发window",{"2":{"584":1}}],["手动清空可解决问题",{"2":{"538":1}}],["手动控制元素的位置和样式来实现动画效果",{"2":{"477":1}}],["手动调用",{"2":{"112":1}}],["手工设定",{"2":{"197":2}}],["最稳定的版本进行开发",{"2":{"487":1}}],["最终决定获取属性立即",{"2":{"465":1}}],["最后才发现是前端element",{"2":{"609":1}}],["最后才发现自己把图床项目设为私有的项目了",{"2":{"606":1}}],["最后发现祖先元素有transform",{"2":{"605":1}}],["最后挨个试才发现需要放在docs",{"2":{"602":1}}],["最后在找到了这个issus里大佬提供的解决方案",{"2":{"600":1}}],["最后用上了",{"2":{"594":1}}],["最后再把宇符串基于number方法转换为数字",{"2":{"509":1}}],["最后返回新对象",{"2":{"498":2}}],["最后访问节点",{"2":{"299":1}}],["最后访问右子树",{"2":{"299":1}}],["最后",{"2":{"279":1}}],["最后一个区快",{"2":{"15":2}}],["最后一个区块数据全要",{"2":{"15":2}}],["最好不要直接给prototype去赋值",{"2":{"276":1}}],["最好使用每条数据的唯一标识作为key",{"2":{"147":2}}],["界面有问题",{"2":{"147":2}}],["界面效果没问题",{"2":{"147":2}}],["逆序删除等破坏顺序操作",{"2":{"147":4}}],["逆序添加",{"2":{"147":2}}],["若为立即执行",{"2":{"519":2}}],["若不是数字则默认",{"2":{"519":2}}],["若二进制前三位是",{"2":{"507":1}}],["若命中",{"2":{"471":1}}],["若第小于有序数组的最后一个数",{"2":{"290":1}}],["若后面待插入的数大于有序数组的最后一个数",{"2":{"290":1}}],["若提示",{"2":{"234":1}}],["若报错",{"2":{"220":2}}],["若跨度为",{"2":{"172":2}}],["若删除后页数小于当前页",{"2":{"159":2}}],["若对数据进行",{"2":{"147":2}}],["若虚拟dom中内容变了",{"2":{"147":2}}],["若虚拟dom中内容没变",{"2":{"147":2}}],["则合并",{"2":{"599":2}}],["则构建出的静态文件实际上会被部署到类似于",{"2":{"573":1}}],["则继续进行合并",{"2":{"554":1}}],["则以后者的属性值为准",{"2":{"554":1}}],["则第一次",{"2":{"519":2}}],["则报错",{"2":{"516":1}}],["则是由最后的一个函数声明覆盖之前所有的声明",{"2":{"514":1}}],["则是添加一个标识对应的远程库链接",{"2":{"211":1}}],["则停止查找",{"2":{"509":2}}],["则svg更适合",{"2":{"484":1}}],["则转为固定定位",{"2":{"479":1}}],["则读取",{"2":{"450":1}}],["则会自动将其调换后截取",{"2":{"532":1}}],["则会增加到",{"2":{"448":1}}],["则会将其唤醒以绁续循环拿取任务",{"2":{"446":1}}],["则这里会报错",{"2":{"427":2}}],["则需要严格按照typescript的规则来书写",{"2":{"425":1}}],["则属性便成了只读属性无法修改",{"2":{"406":1}}],["则填",{"2":{"396":2}}],["则失败",{"2":{"359":1}}],["则表示通过",{"2":{"359":1}}],["则表示合并",{"2":{"210":2}}],["则",{"2":{"345":2,"346":2,"605":1}}],["则用m",{"2":{"345":2}}],["则收集",{"2":{"326":2}}],["则进入休眠状态",{"2":{"446":1}}],["则进入while循环",{"2":{"290":1}}],["则进行收集",{"2":{"326":2}}],["则直接比较值",{"2":{"318":2}}],["则直接返回第二个值",{"2":{"255":2}}],["则直接返回第一个值的原值1",{"2":{"255":2}}],["则加零",{"2":{"302":2}}],["则删除最久未被使用的元素",{"2":{"296":2}}],["则先删除这个节点",{"2":{"296":2}}],["则判断栈顶元素是否匹配",{"2":{"279":1}}],["则入栈",{"2":{"279":1}}],["则新的对象将会作为返回值返回",{"2":{"278":1}}],["则该值会作为new运算的返回值返回",{"2":{"278":1}}],["则返回该对象",{"2":{"498":1}}],["则返回空数组",{"2":{"359":1}}],["则返回",{"2":{"279":1,"318":1,"507":1}}],["则返回undefined",{"2":{"275":1}}],["则返回true的原值",{"2":{"255":2}}],["则使用",{"2":{"275":2}}],["则不看第二个值",{"2":{"255":2}}],["则可简写第二根网格线",{"2":{"172":2}}],["则生成新的真实dom",{"2":{"147":2}}],["则从40开始",{"2":{"4":2}}],["比较的是内存地址是否相同",{"2":{"512":1}}],["比较对象是否相等",{"2":{"318":2}}],["比较规则如下",{"2":{"147":2}}],["比完第一位则结束",{"2":{"256":2}}],["比settimeout回调函数先执行",{"2":{"238":2}}],["比如浏览器",{"2":{"560":1}}],["比如数组",{"2":{"509":1}}],["比如耗时计算",{"2":{"495":1}}],["比如head默认样式display",{"2":{"459":1}}],["比如计时器",{"2":{"447":1}}],["比如我们经常使用",{"2":{"433":1}}],["比如array",{"2":{"431":1}}],["比如vue",{"2":{"426":1}}],["比如id",{"2":{"147":2}}],["比如在使用",{"2":{"122":2}}],["比如下面这个传参",{"2":{"113":2}}],["比如",{"2":{"98":2,"112":1,"113":1,"458":2}}],["比如判断或运算",{"2":{"84":1}}],["比如ng内置",{"2":{"80":2}}],["旧虚拟dom中未找到与新虚拟dom相同的key",{"2":{"147":2}}],["旧虚拟dom中找到了与新虚拟dom相同的key",{"2":{"147":2}}],["旧虚拟dom",{"2":{"147":2}}],["旧版",{"2":{"147":1}}],["每一次循环会检查消息队列中是否有任务存在",{"2":{"446":1}}],["每一行单独处理",{"2":{"345":2}}],["每秒把页面渲染",{"2":{"445":1}}],["每个",{"2":{"548":1}}],["每个then方法都可以接收上一个promise对象的返回值",{"2":{"529":1}}],["每个任务都有一个任务类型",{"2":{"448":1}}],["每个匹配项信息",{"2":{"349":2}}],["每个组件都会进行变更检测",{"2":{"111":1}}],["每次触发事件时",{"2":{"519":2,"520":2}}],["每次打开都会有这四句提示语",{"2":{"231":1}}],["每次render都会调用",{"2":{"147":1}}],["每页数量改变",{"2":{"157":2}}],["增",{"2":{"530":1}}],["增加服务器开销",{"2":{"451":1}}],["增加复杂度",{"2":{"147":1}}],["增删改",{"2":{"108":1,"132":1,"530":1}}],["尽量不使用",{"2":{"147":1}}],["典型场景表单获取默认值",{"2":{"147":1}}],["典型场景",{"2":{"147":1}}],["关闭",{"2":{"520":2}}],["关闭客户端",{"2":{"468":1}}],["关闭的时候却是四次握手",{"2":{"468":1}}],["关闭连接",{"0":{"467":1},"1":{"468":1}}],["关闭定时器",{"2":{"147":4}}],["关系运算符",{"0":{"256":1}}],["关联多个代码托管平台",{"0":{"211":1}}],["关键字",{"2":{"172":2}}],["关于虚拟dom",{"2":{"137":1}}],["卸载组件",{"2":{"147":4}}],["订阅消息",{"2":{"147":4}}],["订阅事件",{"2":{"112":1}}],["初始态把回调函数存入数组",{"2":{"315":2}}],["初始态",{"2":{"303":2,"304":2,"315":2}}],["初始值为",{"2":{"279":1}}],["初始化画图完成后出现这个锯齿",{"0":{"581":1}}],["初始化实例",{"2":{"577":2}}],["初始化",{"2":{"418":2}}],["初始化项目",{"0":{"416":1}}],["初始化变量\\t2",{"2":{"260":2}}],["初始化并应用主题",{"0":{"224":1}}],["初始化阶段",{"2":{"147":4}}],["初始化状态",{"2":{"143":2}}],["初次渲染",{"2":{"147":4}}],["触发条件",{"2":{"396":2}}],["触发gitee自动部署",{"2":{"396":2}}],["触发gitee",{"2":{"396":1}}],["触发gh",{"2":{"396":1}}],["触发事件",{"2":{"293":2}}],["触发",{"2":{"147":8}}],["触发变更检测",{"2":{"108":2}}],["由",{"2":{"553":1}}],["由事件驱动的",{"2":{"497":1}}],["由通过测试为",{"2":{"359":1}}],["由于之前没有备份博客源码",{"2":{"607":1}}],["由于真实",{"2":{"560":1}}],["由于被内层函数引用",{"2":{"536":1}}],["由于编码和解码都需要进行大量的计算",{"2":{"485":1}}],["由于base64编码会将图片转换成文本形式",{"2":{"485":1}}],["由于base64编码后的图片是直接嵌入在html或css中的",{"2":{"485":1}}],["由于使用base64编码的图片无需额外的文件下载",{"2":{"485":1}}],["由于svg是基于矢量图形的绘图技术",{"2":{"484":1}}],["由于元素的布局信息也属于可见样式",{"2":{"466":1}}],["由于",{"2":{"448":1}}],["由于模式串出现在文本串的位置是7",{"2":{"301":1}}],["由于模式串出现在文本串的位置是5",{"2":{"301":1}}],["由于引用没有变化",{"2":{"108":1}}],["由开发人员自己创建的对象",{"2":{"278":1}}],["由浏览器提供的对象",{"2":{"278":1}}],["由es标准所定义的对象",{"2":{"278":1}}],["由外层作用域决定",{"2":{"262":1}}],["由组件内部this",{"2":{"147":4}}],["由reactdom",{"2":{"147":8}}],["等同于常量",{"2":{"515":1}}],["等属性",{"2":{"466":1}}],["等发生在合成线程",{"2":{"464":1}}],["等待主线程调度执行",{"2":{"447":1}}],["等待所有异步操作执行完毕在执行后面代码",{"2":{"243":4}}],["等诸多的任务",{"2":{"447":1}}],["等等",{"2":{"146":1}}],["等值查询",{"2":{"4":1}}],["委托给组件最外层的元素",{"2":{"146":1}}],["女",{"2":{"144":4}}],["年龄",{"2":{"144":4}}],["姓名",{"2":{"144":4}}],["且不是最后一位不是零",{"2":{"302":2}}],["且没有被子组件声明为",{"2":{"150":1}}],["且为字符串",{"2":{"144":4}}],["且会自动处理url和解压tar压缩包",{"2":{"61":2}}],["必须是字符串",{"2":{"509":2}}],["必须是函数",{"2":{"388":2}}],["必须由进程启动和管理",{"2":{"443":1}}],["必须开启experimentaldecorators",{"2":{"426":1}}],["必须调用父类的构造方法",{"2":{"405":1}}],["必须",{"2":{"360":2}}],["必须以字母结束",{"2":{"350":2}}],["必须保留一个",{"2":{"210":1}}],["必须使用的一个",{"2":{"147":2}}],["必须在路径指定",{"2":{"26":1}}],["必要性的限制",{"2":{"144":2}}],["凉爽",{"2":{"143":2}}],["炎热",{"2":{"143":2}}],["今天天气很",{"2":{"143":2}}],["控制语句",{"0":{"259":1}}],["控制的",{"2":{"141":1}}],["控制",{"2":{"141":1}}],["补充",{"0":{"141":1}}],["随机生成测试数组",{"2":{"288":1}}],["随机数生成",{"0":{"267":1}}],["随机分配主机端口映射到内部容器端口",{"2":{"56":2}}],["随后渲染到到页面",{"2":{"147":2}}],["随后替换掉页面中之前的真实dom",{"2":{"147":2}}],["随后react进行",{"2":{"147":2}}],["随后new出来该类的实例",{"2":{"140":1}}],["随后呈现在页面中",{"2":{"139":2,"140":1}}],["随后调用该函数",{"2":{"139":2}}],["之前符合的字符串",{"2":{"509":2}}],["之前",{"2":{"388":2}}],["之前的promise状态并不会影响之后的promise状态",{"2":{"308":1}}],["之前在模版中调用的组件为静态组件",{"2":{"113":1}}],["之间的随机数",{"2":{"267":2}}],["之后",{"2":{"139":2,"140":1,"210":2}}],["渲染数据",{"2":{"577":2}}],["渲染",{"2":{"449":1}}],["渲染主线程无论如何忙碌",{"2":{"466":1}}],["渲染主线程永不阻塞",{"2":{"447":1}}],["渲染主线程会进入一个无限循环",{"2":{"446":1}}],["渲染进程任务",{"0":{"445":1}}],["渲染进程启动后",{"2":{"444":1}}],["渲染进程",{"2":{"444":1}}],["渲染组件到页面",{"2":{"139":2,"140":2,"143":2,"144":2}}],["渲染虚拟dom到页面",{"2":{"137":2}}],["语句贯穿",{"2":{"440":2}}],["语句的",{"2":{"440":2}}],["语句",{"2":{"137":1}}],["语法糖",{"0":{"240":1},"1":{"241":1,"242":1,"243":1}}],["语法",{"0":{"360":1,"368":1,"378":1,"388":1,"392":1},"2":{"7":1}}],["表",{"2":{"345":2}}],["表示最新的es语法",{"2":{"440":2}}],["表示按需加载",{"2":{"418":2}}],["表示任意目录",{"2":{"414":2}}],["表示任意文件",{"2":{"414":2}}],["表示且",{"2":{"400":1}}],["表示或",{"2":{"400":1}}],["表示没有返回值",{"2":{"400":2}}],["表示元素重复并且过滤",{"2":{"364":2}}],["表示是同一个元素",{"2":{"364":2}}],["表示强制等待的意思",{"2":{"240":1}}],["表示项目的左边框距离右边框跨越",{"2":{"172":2}}],["表示跨越",{"2":{"172":2}}],["表达式值为",{"2":{"440":2}}],["表达式进行全等比较",{"2":{"259":2}}],["表达式2\\t",{"2":{"258":2}}],["表达式1",{"2":{"258":2}}],["表达式",{"2":{"137":1,"259":4,"260":2}}],["表单按钮数据提交至服务器",{"2":{"528":1}}],["表单校验",{"2":{"338":1}}],["表单元素的值存储于",{"2":{"141":1}}],["表单元素的值是完全交由组件的",{"2":{"141":1}}],["表单元素的状态并不受",{"2":{"141":1}}],["表单中使用",{"2":{"118":1}}],["表单form中双向绑定",{"0":{"118":1}}],["表单数据的中间件",{"2":{"43":2}}],["要求同时设置了",{"2":{"440":2}}],["要排除的文件",{"2":{"418":2}}],["要兼容的目标浏览器及版本",{"2":{"418":2}}],["要使用的loader",{"2":{"418":2}}],["要先在项目根目录下创建一个ts的配置文件",{"2":{"414":1}}],["要部署的分支",{"2":{"396":2}}],["要改也不要通过实例对象去改",{"2":{"276":1}}],["要看也是看视频教程和大佬博客啊",{"2":{"181":1}}],["要用赋值语句的形式+箭头函数",{"2":{"143":2}}],["要用classname",{"2":{"137":1}}],["要发送给客户端的用户信息",{"2":{"43":2}}],["要发送给客户端的",{"2":{"43":2}}],["呈现在页面上",{"2":{"137":1}}],["轻松有趣",{"2":{"181":1}}],["轻",{"2":{"137":1}}],["本来想执行git",{"2":{"607":1}}],["本身",{"2":{"500":2}}],["本身会立刻返回",{"2":{"238":2}}],["本质采用的是系统时间间隔",{"2":{"526":1}}],["本质上充当web应用程序",{"2":{"497":1}}],["本质是object类型的对象",{"2":{"137":1}}],["本地打包预览环境变量",{"2":{"573":2}}],["本地的远程分支也会被清理",{"2":{"205":1}}],["本地不存在的远程分支",{"2":{"205":1}}],["本地镜像推送到阿里云",{"2":{"55":1}}],["准备好一个",{"2":{"137":2,"139":2}}],["此外",{"2":{"484":1}}],["此过程会用到",{"2":{"463":1}}],["此时",{"2":{"479":1}}],["此时服务端未收到",{"2":{"468":1}}],["此时外部的css",{"2":{"456":1}}],["此时组件的样式是全局生效的",{"2":{"101":1}}],["此",{"2":{"326":2}}],["此值不可枚举",{"2":{"261":2}}],["此处的this是undefined",{"2":{"139":2}}],["此处一定不要写引号",{"2":{"137":2}}],["虚拟",{"0":{"560":1},"2":{"560":2}}],["虚拟dom中key的作用",{"2":{"147":2}}],["虚拟dom最终会被react转化为真实dom",{"2":{"137":1}}],["虚拟dom比较",{"2":{"137":1}}],["虚拟dom",{"0":{"137":1}}],["虚悬镜像",{"2":{"55":1}}],["避免其报错",{"2":{"135":1}}],["也不会影响",{"2":{"466":1}}],["也不会换行",{"2":{"197":2}}],["也同样因为如此",{"2":{"465":1}}],["也被包含进来",{"2":{"439":1}}],["也称为类属性",{"2":{"408":1}}],["也就携带了此偏养",{"2":{"448":1}}],["也就是运营商的",{"2":{"450":1}}],["也就是遇到import",{"2":{"432":1}}],["也就是arr",{"2":{"290":1}}],["也就不能确定item是否有bestbydate",{"2":{"135":1}}],["也可以通过for循环变量",{"2":{"263":2}}],["也可以用这个函数绑定组件中不存在的变量",{"2":{"135":1}}],["也可以用内置指令ngclass",{"2":{"90":2}}],["也无法通过call",{"2":{"262":1}}],["也是只作用于单个项目",{"2":{"174":1}}],["我们在开发环境和生产环境使用不同的",{"2":{"573":1}}],["我们在service",{"2":{"496":1}}],["我们可以将",{"2":{"573":1}}],["我们可以通过设置",{"2":{"573":1}}],["我们可以在类中定义一组读取",{"2":{"407":1}}],["我们可以使用这个函数来测试一下",{"2":{"301":1}}],["我们将文本串设置为",{"2":{"301":2}}],["我们首先计算出模式串的前缀表",{"2":{"301":1}}],["我们断定变量一定不是undefined或null",{"2":{"134":1}}],["我在飞",{"2":{"276":2}}],["我是$",{"2":{"404":2,"406":6}}],["我是静态方法",{"2":{"269":2}}],["我是",{"2":{"269":2}}],["我是传入的字符串",{"2":{"95":2}}],["保证设定的时间内只会执行一次",{"2":{"518":1}}],["保证数据请求前能正常渲染模板",{"2":{"133":1}}],["保留原来位置进行定位",{"2":{"479":1}}],["保留模版类型提示",{"2":{"424":4}}],["保留字符本意",{"2":{"341":2}}],["保持简洁",{"2":{"213":1}}],["保存数据到",{"2":{"523":2}}],["保存的只是一个指向实际数据的指针",{"2":{"515":1}}],["保存序号",{"2":{"494":2}}],["保存为文件",{"2":{"334":2}}],["保存文件",{"2":{"334":2}}],["保存文件重新打开terminal看效果",{"2":{"227":1}}],["保存",{"2":{"315":2}}],["保存重启就生效啦",{"2":{"225":1}}],["保存退出",{"2":{"210":1}}],["保存到",{"2":{"42":2}}],["保存隐私数据",{"2":{"41":1}}],["安全性",{"2":{"269":1}}],["安全链",{"0":{"133":1}}],["安装插件",{"0":{"601":1}}],["安装依赖包",{"2":{"422":1}}],["安装四个依赖",{"2":{"418":2}}],["安装nerd",{"2":{"225":1}}],["安装完",{"2":{"222":1}}],["安装winget",{"2":{"222":1}}],["安装校验脚手架",{"2":{"220":2}}],["安装命令",{"0":{"70":1}}],["安装并导入",{"2":{"43":2}}],["安装jsonwebtoken",{"2":{"43":1}}],["安装",{"0":{"222":1},"2":{"34":1}}],["截取array或string",{"2":{"132":1}}],["使result和tasks相对应",{"2":{"494":2}}],["使得对于每个有向边",{"2":{"547":1}}],["使得代码更加清晰易读",{"2":{"529":1}}],["使得代码干净整洁",{"2":{"435":1}}],["使得它们在设计",{"2":{"484":1}}],["使ngfor可以循环object或map对象",{"2":{"132":1}}],["使用scss函数计算比例",{"2":{"583":1}}],["使用stream",{"2":{"492":1}}],["使用static开头",{"2":{"408":1}}],["使用遮罩层",{"2":{"551":1}}],["使用时相当于",{"2":{"512":1}}],["使用定时器setinterval",{"2":{"492":1}}],["使用websocket技术",{"2":{"492":1}}],["使用web",{"2":{"492":1}}],["使用promise",{"2":{"492":1}}],["使用ajax及其各种高级封装的异步技术",{"2":{"492":1}}],["使用abstract开头的方法叫做抽象方法",{"2":{"411":1}}],["使用矢量图形代替位图",{"2":{"486":1}}],["使用图片cdn",{"2":{"486":1}}],["使用图片压缩工具",{"2":{"486":1}}],["使用base64编码会导致html或css文件变得非常大",{"2":{"485":1}}],["使用base64编码的图片无需考虑图片路径等问题",{"2":{"485":1}}],["使用base64编码的图片具有以下优点",{"0":{"485":1}}],["使用expires",{"2":{"471":1}}],["使用异步的方式",{"2":{"447":1}}],["使用chrome启动",{"2":{"420":2}}],["使用corejs的方式",{"2":{"418":2}}],["使用静态属性无需创建实例",{"2":{"408":1}}],["使用matchall",{"2":{"349":2}}],["使用map来存储key",{"2":{"296":2}}],["使用module",{"2":{"24":1}}],["使用示例",{"2":{"295":2,"296":1}}],["使用递归函数",{"2":{"283":2}}],["使用for循环遍历字符串",{"2":{"283":2}}],["使用数组的reverse",{"2":{"283":2}}],["使用实参来执行构造函数",{"2":{"278":1}}],["使用in运算符检查属性时",{"2":{"277":1}}],["使用index作为key是没有问题的",{"2":{"147":2}}],["使用方式",{"2":{"266":2}}],["使用后回事原来的变量立刻增加1",{"2":{"254":2}}],["使用后在拉取代码会出现",{"2":{"213":2}}],["使用陷阱",{"0":{"243":1}}],["使用此命令",{"2":{"205":1}}],["使用高斯模糊算法进行处理",{"2":{"191":1}}],["使用非空断言的两个步骤",{"2":{"134":1}}],["使用井号",{"2":{"130":1}}],["使用outlet中的value",{"2":{"114":2}}],["使用outlet中的context",{"2":{"114":2}}],["使用tem",{"2":{"114":2}}],["使用构造函数新建一个组件或指令后",{"2":{"109":1}}],["使用全局错误处理中间件",{"2":{"43":2}}],["使用",{"2":{"43":3,"46":2,"124":1,"147":1,"172":2,"213":2,"217":1,"221":1,"477":1,"478":2,"516":1,"552":1}}],["使用require",{"2":{"25":1}}],["格式化",{"2":{"218":1}}],["格式化日期",{"2":{"132":1}}],["格式化查询",{"2":{"4":2}}],["引起回流属性和方法",{"2":{"465":1}}],["引用的gitee图床图片没显示",{"0":{"606":1}}],["引用类型",{"2":{"506":1,"515":1}}],["引用类型返回",{"2":{"498":1}}],["引用值",{"2":{"261":2}}],["引用没有变化",{"2":{"132":1}}],["引入后发现之前搜索框样式没了",{"2":{"602":1}}],["引入当前目录下的图片",{"2":{"551":2}}],["引入clean插件",{"2":{"418":2}}],["引入html插件",{"2":{"418":2}}],["引入一个包",{"2":{"418":2}}],["引入babel",{"2":{"139":2}}],["引入react",{"2":{"139":2}}],["引入react核心库",{"2":{"139":2}}],["引导过程还会创建",{"2":{"82":2}}],["事实上",{"2":{"128":2}}],["事件不生效问题",{"0":{"615":1}}],["事件总线意外多次触发",{"0":{"612":1}}],["事件比confirmupdate先执行",{"2":{"610":2}}],["事件冒泡",{"2":{"528":2}}],["事件捕获",{"2":{"528":2}}],["事件捕获和冒泡机制",{"0":{"528":1}}],["事件传播过程",{"2":{"528":1}}],["事件绑定指向事件源对象",{"2":{"517":1}}],["事件监听",{"2":{"447":1}}],["事件循环是异步的实现方式",{"2":{"446":1}}],["事件循环解释",{"2":{"446":1}}],["事件循环",{"0":{"446":1}}],["事件循环机制的损耗",{"2":{"448":1}}],["事件循环机制",{"0":{"442":1},"1":{"443":1,"444":1,"445":1,"446":1,"447":1,"448":1}}],["事件处理函数",{"2":{"150":1}}],["事件处理",{"0":{"146":1}}],["事件",{"2":{"20":1,"109":2,"111":1,"112":2,"146":1,"495":1,"615":2}}],["是",{"2":{"589":2,"615":2}}],["是用来指定应用程序部署的基础",{"2":{"573":1}}],["是用来处理单个模块的转换",{"2":{"548":1}}],["是ecmascript",{"2":{"549":1}}],["是扩展",{"2":{"548":1}}],["是树的宽度",{"2":{"544":1}}],["是树的高度",{"2":{"543":1}}],["是节点数",{"2":{"543":1,"544":1}}],["是一种逐层扫描节点的算法",{"2":{"544":1}}],["是一种递归或栈的思想来遍历所有节点的算法",{"2":{"543":1}}],["是一个基于请求与响应",{"2":{"452":1}}],["是一个数组",{"2":{"264":2}}],["是一个由",{"2":{"129":2}}],["是一个分组元素",{"2":{"129":2}}],["是一个",{"2":{"128":2}}],["是异步完成的",{"2":{"465":1}}],["是指在一个promise对象上多次调用then方法",{"2":{"529":1}}],["是指其内容不受文档流影响",{"2":{"483":1}}],["是指tc39最新的es",{"2":{"429":1}}],["是指由父组件传入",{"2":{"150":1}}],["是ts编译器的配置文件",{"2":{"414":2}}],["是两个要比较的元素",{"2":{"388":1}}],["是对原数组的过滤",{"2":{"359":1}}],["是函数的方法",{"2":{"262":1}}],["是否允许编译javascript文件",{"2":{"437":1}}],["是否抛出错误",{"2":{"435":1,"436":1}}],["是否启用严格的",{"2":{"434":1}}],["是否启用实验性的es装饰器",{"2":{"426":1}}],["是否类的非undefined属性已经在构造函数里初始化",{"2":{"427":1}}],["是否移除注释",{"2":{"414":2}}],["是否检查js代码是否符合语法规范",{"2":{"414":2}}],["是否对js文件进行编译",{"2":{"414":2}}],["是否存在",{"2":{"326":2}}],["是否含有某个属性",{"2":{"277":2}}],["是否已显示",{"2":{"126":2}}],["是否连接成功",{"2":{"34":1}}],["隐式转换",{"2":{"510":1}}],["隐式类型转换",{"2":{"251":1}}],["隐式创建集合",{"2":{"2":2}}],["隐藏元素的方式",{"0":{"480":1}}],["隐藏提示语",{"0":{"231":1}}],["隐藏滚动条",{"2":{"177":2}}],["隐藏",{"2":{"126":2}}],["显示屏每毫秒刷新频率",{"2":{"526":1}}],["显示出这句话表示成功啦",{"2":{"235":1}}],["显示三行文本",{"2":{"176":2}}],["显示",{"2":{"126":2}}],["显式创建集合",{"2":{"2":2}}],["别名",{"2":{"126":2}}],["实用工具集锦",{"0":{"441":1}}],["实用网站",{"0":{"161":1}}],["实际通过调用setter方法修改name属性",{"2":{"407":2}}],["实际通过调用getter方法读取name属性",{"2":{"407":2}}],["实际渲染确有小数点问题",{"0":{"180":1}}],["实例",{"2":{"615":4}}],["实例的返回值",{"2":{"314":1}}],["实例使用",{"2":{"270":2}}],["实例方法中this就是当前实例",{"2":{"269":2}}],["实例方法",{"2":{"269":2}}],["实例上的中间件",{"2":{"29":2}}],["实参都会存储到arguments对象中",{"2":{"263":2}}],["实参需要通过一个数组传递",{"2":{"262":1}}],["实现自动生成文章左侧侧边栏",{"0":{"595":1},"1":{"596":1,"597":1,"598":1,"599":1}}],["实现模块之间的相互引用",{"2":{"535":1}}],["实现三",{"2":{"520":2}}],["实现原理",{"2":{"519":2,"520":2}}],["实现对象属性和方法的共享",{"2":{"499":1}}],["实现多个请求的并发",{"2":{"492":1}}],["实现多次接收参数最后统一处理的函数编码形式",{"2":{"146":1}}],["实现一个元素的宽高比",{"0":{"490":1}}],["实现渐变背景",{"0":{"478":1}}],["实现promise",{"0":{"314":1}}],["实现promise的all方法",{"0":{"295":1}}],["实现",{"0":{"313":1},"2":{"539":2}}],["实现resolve和reject",{"0":{"312":1}}],["实现then异步",{"0":{"306":1}}],["实现eventemitter",{"0":{"293":1}}],["实现封装的方式",{"2":{"270":2}}],["实现fn1先执行",{"0":{"241":1}}],["实现在元素后面添加",{"2":{"197":1}}],["实战中可以通过一个input属性传入模版",{"2":{"126":2}}],["起因",{"2":{"526":1}}],["起别名",{"2":{"125":2}}],["起别名后",{"2":{"124":2}}],["起始0",{"2":{"4":2}}],["展开写法",{"2":{"123":1}}],["展示stars排名前五条",{"2":{"55":2}}],["展示本地镜像",{"2":{"55":2}}],["啥都不是",{"2":{"123":4}}],["葡萄",{"2":{"123":2}}],["梨",{"2":{"123":2}}],["苹果",{"2":{"123":2}}],["🎬",{"2":{"396":2}}],["🎉deploy",{"2":{"395":2}}],["🍇",{"2":{"123":2}}],["🍐",{"2":{"123":2}}],["🍎",{"2":{"123":2}}],["🎖️结果展示",{"2":{"102":1}}],["迭代表达式的值",{"2":{"122":2}}],["迭代目标",{"2":{"122":2}}],["追踪id",{"2":{"122":2}}],["赋值给变量person",{"2":{"498":2}}],["赋值运算符",{"0":{"252":1}}],["赋值",{"2":{"118":2}}],["加入到",{"2":{"563":1,"564":1}}],["加入到消息队列的未尾排队",{"2":{"447":1}}],["加载判断样式兼容问题",{"2":{"541":2}}],["加速",{"2":{"463":1}}],["加",{"2":{"116":2,"270":2}}],["加密的秘钥",{"2":{"43":2}}],["减少了服务器的负载",{"2":{"485":1}}],["减少http请求",{"2":{"485":1}}],["减小增量",{"2":{"291":2}}],["减",{"2":{"116":2}}],["传多个",{"2":{"540":2}}],["传一个",{"2":{"540":2}}],["传参会赋值给上一次yield的的返回值",{"2":{"524":1}}],["传单",{"2":{"484":1}}],["传入的是函数对象本身",{"2":{"370":2}}],["传值并执行onrejected函数",{"2":{"315":2}}],["传值并执行onfulfilled函数",{"2":{"315":2}}],["传递事件对象",{"2":{"125":2}}],["传递出去tem",{"2":{"114":2}}],["传过未传完",{"2":{"14":1}}],["传过",{"2":{"14":1}}],["监听",{"2":{"615":2}}],["监听非",{"0":{"615":1}}],["监听焦点不在此组件时",{"2":{"610":2}}],["监听div容器的无效",{"2":{"584":2}}],["监听窗口大小",{"2":{"584":2}}],["监听窗口大小变化",{"2":{"577":2}}],["监听事件",{"2":{"577":2}}],["监听图片顶部到达视口底部",{"2":{"249":1}}],["监听滚动",{"0":{"249":1}}],["监听输入属性变化",{"2":{"126":2}}],["监听组件到output事件",{"2":{"113":2}}],["监听组件销毁事件",{"2":{"113":2}}],["监听客户端请求",{"2":{"20":1}}],["根本原因",{"2":{"513":1}}],["根文件夹列表",{"2":{"440":2}}],["根据兼容情况",{"2":{"541":2}}],["根据对象的复杂程度不同",{"2":{"274":1}}],["根据key获取值",{"2":{"265":2}}],["根据函数调用方式的不同",{"2":{"262":1}}],["根据数据创建新的真实dom",{"2":{"147":2}}],["根据指定的类型",{"2":{"113":2}}],["根组件",{"2":{"78":1,"82":2}}],["×",{"2":{"113":2}}],["而虚拟",{"2":{"560":1}}],["而深度优先遍历只需要使用递归或栈",{"2":{"545":1}}],["而深度优先遍历需要使用递归或栈来遍历节点",{"2":{"545":1}}],["而",{"2":{"491":2}}],["而如果需要制作高质量的静态图形",{"2":{"484":1}}],["而svg是基于矢量图形的绘图技术",{"2":{"484":1}}],["而无需考虑内边距和边框",{"2":{"475":1}}],["而无需在文件开头添加`",{"2":{"414":2}}],["而渲染主线程承担渲染页面",{"2":{"447":1}}],["而渲染主线程只有一个",{"2":{"447":1}}],["而module选项就是指定编译使用对应的模块系统",{"2":{"430":1}}],["而是使用import和export关键字来实现",{"2":{"549":1}}],["而是由外部资源定义的元素",{"2":{"483":1}}],["而是属于类的属性",{"2":{"406":1}}],["而是通过ts动态插入到dom中到组件",{"2":{"113":1}}],["而且提示event",{"2":{"584":2}}],["而且也不是所有浏览器都会遵守",{"2":{"388":1}}],["而且可以接收cmd传的参数",{"2":{"61":2}}],["而不需要额外的文件下载",{"2":{"485":1}}],["而不是",{"2":{"526":1}}],["而不是将",{"2":{"440":2}}],["而不是创建一个新的提交",{"2":{"213":2}}],["而不是使用的原生dom事件",{"2":{"146":1}}],["而不会执行管道的逻辑",{"2":{"132":1}}],["如使用axios",{"2":{"492":1}}],["如jquery的$",{"2":{"492":1}}],["如jpeg",{"2":{"484":1}}],["如何实现动画",{"0":{"477":1}}],["如何理解异步",{"0":{"447":1}}],["如何确保数据的安全",{"2":{"270":1}}],["如此循环往复",{"2":{"446":1}}],["如",{"2":{"430":1,"449":1,"548":1}}],["如关闭加载动画",{"2":{"239":2}}],["如下命令可以直接打开power",{"2":{"228":1}}],["如果该元素的先祖容器中存在transform特性值为非none的元素",{"2":{"605":1}}],["如果pathpice",{"2":{"599":2}}],["如果你需要从你的实际路径下查看",{"2":{"572":1}}],["如果你的应用被部署在一个子目录下",{"2":{"572":1}}],["如果两者的值是对象",{"2":{"554":1}}],["如果then方法中返回了一个promise对象",{"2":{"529":1}}],["如果then方法中抛出了异常",{"2":{"529":1}}],["如果获取的值不是原始值",{"2":{"509":1}}],["如果出现任何非有效数宇宇符",{"2":{"509":1}}],["如果执行消耗大量资源的操作也不会堵塞主线程",{"2":{"497":1}}],["如果可以直接使用缓存的就直接返回缓存不再转给服务器",{"2":{"496":1}}],["如果需要向服务器发起请求的就转给服务器",{"2":{"496":1}}],["如果需要制作交互式和复杂的图形应用程序",{"2":{"484":1}}],["如果网站中注册了service",{"2":{"496":1}}],["如果主线程解析到",{"2":{"456":2}}],["如果主线程是休眠状态",{"2":{"446":1}}],["如果还没有解析成功",{"2":{"450":1}}],["如果在声明前使用",{"2":{"516":1}}],["如果在声明属性时添加一个readonly",{"2":{"406":1}}],["如果在",{"2":{"450":1}}],["如果浏览器自身的缓存里面没有找到对应的条目",{"2":{"450":1}}],["如果嵌套层级超过",{"2":{"448":1}}],["如果使用同步的方式",{"2":{"447":1}}],["如果allowjs被设置成true",{"2":{"439":1}}],["如果指定了types",{"2":{"438":1}}],["如果指定了typeroots",{"2":{"438":1}}],["如果指明了参数",{"2":{"388":1}}],["如果设置为true",{"2":{"437":1}}],["如果设置该选项为true",{"2":{"427":1}}],["如果只是练手typescirpt",{"2":{"434":1}}],["如果遇到属于这些标准库的class或api时",{"2":{"431":1}}],["如果开启该值",{"2":{"428":1}}],["如果开启strictpropertyinitialization",{"2":{"427":2}}],["如果子类中的方法会替换掉父类中的同名方法",{"2":{"410":1}}],["如果子类中也定义了构造方法",{"2":{"405":1}}],["如果",{"2":{"388":3}}],["如果提供initialvalue",{"2":{"378":2}}],["如果没有",{"2":{"446":1}}],["如果没有提供initialvalue",{"2":{"378":2}}],["如果没有任何数组元素通过测试",{"2":{"359":1}}],["如果为",{"2":{"359":1}}],["如果想要它在每行的开头和结尾生效",{"2":{"345":2}}],["如果想终止在某个执行链的位置",{"2":{"239":1}}],["如果不同",{"2":{"318":1}}],["如果不存在这个方法",{"2":{"509":1}}],["如果不存在则返回",{"2":{"296":2}}],["如果不存在对数据的逆序添加",{"2":{"147":2}}],["如果要去重一个包含不同数据类型的数组",{"2":{"316":1}}],["如果缓存超出容量",{"2":{"296":2}}],["如果key已经存在",{"2":{"296":2}}],["如果栈为空说明所有括号都匹配",{"2":{"279":1}}],["如果字符不是括号",{"2":{"279":1}}],["如果匹配则出栈",{"2":{"279":1}}],["如果是",{"2":{"525":2}}],["如果是正式项目",{"2":{"434":1}}],["如果是0",{"2":{"302":2}}],["如果是右括号",{"2":{"279":1}}],["如果是左括号",{"2":{"279":1}}],["如果构造函数返回了一个对象",{"2":{"498":1}}],["如果构造函数返回的是一个非原始值",{"2":{"278":1}}],["如果构造函数没有显式地返回对象",{"2":{"498":1}}],["如果构造函数的返回值是一个原始值或者没有指定返回值",{"2":{"278":1}}],["如果依然没有找到",{"2":{"275":1}}],["如果原型中有",{"2":{"275":1}}],["如果对象中有",{"2":{"275":1}}],["如果传递了一个其他类型的属性名",{"2":{"265":1}}],["如果第一个值为ture",{"2":{"255":2}}],["如果安装了vs",{"2":{"228":1}}],["如果有多个函数声明",{"2":{"514":1}}],["如果有",{"2":{"217":1,"446":1}}],["如果确定只是简单的展示数据",{"2":{"147":2}}],["如果结构中还包含输入类的dom",{"2":{"147":2}}],["如果数组中的元素变化",{"2":{"132":1}}],["如果当前条目在可迭代对象中的索引号为奇数则为",{"2":{"122":2}}],["如果当前条目在可迭代对象中的索引号为偶数则为",{"2":{"122":2}}],["如果当前条目是可迭代对象中的最后一个条目则为",{"2":{"122":2}}],["如果当前条目是可迭代对象中的第一个条目则为",{"2":{"122":2}}],["如果说",{"2":{"113":1}}],["如图",{"2":{"82":2}}],["强缓存",{"2":{"471":2}}],["强行检测",{"2":{"112":2}}],["强制删除",{"2":{"56":2}}],["强制删除镜像",{"2":{"55":1}}],["强制删除镜像docker",{"2":{"55":1}}],["强制停止",{"2":{"56":2,"72":1}}],["结束索引大于0从前面计数",{"2":{"532":1}}],["结束索引大于等于",{"2":{"532":1}}],["结束边界触发",{"2":{"519":2}}],["结果都是nan",{"2":{"509":1}}],["结果",{"2":{"370":2}}],["结构",{"2":{"455":1}}],["结构型",{"0":{"126":1}}],["结构型指令",{"0":{"120":1},"1":{"121":1,"122":1,"123":1}}],["结构图",{"2":{"82":1}}],["结合使用可以实现局部变更检测",{"2":{"112":2}}],["与自定义变体不能一起用",{"0":{"587":1}}],["与生命周期钩子函数类似",{"2":{"554":1}}],["与其他模块化规范不同的是",{"2":{"549":1}}],["与其他",{"2":{"512":1}}],["与其他任何值都不相等",{"2":{"512":1}}],["与浏览器之间的代理服务器",{"2":{"497":1}}],["与渲染主线程无关",{"2":{"464":1}}],["与服务器建立连接",{"0":{"451":1},"2":{"449":1}}],["与中心轴比较",{"2":{"289":2}}],["与调用方式无关",{"2":{"262":2}}],["与",{"0":{"491":1,"532":1,"533":1,"557":1,"558":1},"2":{"112":2,"137":1,"147":2,"440":2,"474":1,"532":1}}],["与方法结合",{"2":{"84":2}}],["以便以后回顾或找到更优解",{"2":{"616":1}}],["以便它下一轮再次进行检查",{"2":{"112":2}}],["以下是使用",{"2":{"615":1}}],["以下是一些常见的",{"2":{"573":1}}],["以下的四种写法",{"2":{"495":1}}],["以及防止已失效的连接请求报文段突然又传送到了服务端",{"2":{"451":1}}],["以保证标签页之间不互相影响",{"2":{"444":1}}],["以严格模式检查每个模块",{"2":{"440":2}}],["以ts结尾的文件",{"2":{"418":2}}],["以8位数结尾",{"2":{"342":1}}],["以8位数结尾let",{"2":{"342":1}}],["以010开头",{"2":{"342":2}}],["以第一个数为有序数组",{"2":{"290":1}}],["以方法形式调用",{"2":{"262":3}}],["以函数形式调用指向window",{"2":{"262":2}}],["以函数形式调用",{"2":{"262":1}}],["以管理员身份运行",{"2":{"234":1}}],["以此来实现对代码的验证",{"2":{"218":1}}],["以内容盒为准",{"2":{"184":1}}],["以内容盒为准background",{"2":{"184":1}}],["以激活变更检测",{"2":{"113":2}}],["以最后一个为查询条件",{"2":{"4":2}}],["脏的",{"2":{"112":2}}],["包装类型",{"2":{"506":1}}],["包刷新等待时间",{"2":{"468":1}}],["包",{"2":{"468":1}}],["包会重发",{"2":{"468":1}}],["包会在编译过程中被包含进来",{"2":{"438":1}}],["包后中途可能丢失",{"2":{"468":1}}],["包含被观察的元素的信息",{"2":{"615":2}}],["包含类型声明的文件列表",{"2":{"440":2}}],["包含四个参数",{"2":{"378":4}}],["包括",{"2":{"572":1}}],["包括其他进程的线程",{"2":{"446":1}}],["包括还处在stage",{"2":{"440":2}}],["包括常规键名和",{"2":{"318":2}}],["包括它自身",{"2":{"257":2}}],["包括它子组件的",{"2":{"112":1}}],["包括app",{"2":{"113":2}}],["包裹",{"2":{"95":2}}],["他和他的子组件都不会检测了",{"2":{"112":1}}],["子组件写在created中",{"2":{"558":1}}],["子组件",{"2":{"556":2}}],["子组件不能修改检测完的父组件数据",{"2":{"111":1}}],["子构造函数原型对象指向父构造函数实例",{"2":{"503":2}}],["子元素",{"2":{"476":1}}],["子进程管理等",{"2":{"444":1}}],["子类中不能修改",{"2":{"406":2}}],["子类中可以修改",{"2":{"406":4}}],["子类中修改",{"2":{"406":1}}],["子类和对象中修改",{"2":{"406":1}}],["子类继承父类时",{"2":{"405":1}}],["子类",{"2":{"271":1}}],["子传父",{"2":{"94":1}}],["检测未被声明的变量",{"2":{"507":1}}],["检测字符串的开头或结尾",{"2":{"345":2}}],["检测组件中的值是否应该改变",{"2":{"111":1}}],["检查",{"2":{"440":2}}],["检查代码",{"2":{"396":1}}],["检查对象属性",{"2":{"277":1}}],["检查元素",{"2":{"266":2}}],["检查map中是否包含指定键",{"2":{"265":2}}],["检查两个值是否全等",{"2":{"257":2}}],["检查该视图及其子视图",{"2":{"112":2}}],["检查配置文件括号配对问题",{"2":{"73":2}}],["检查配置文件有没有问题",{"2":{"73":2}}],["检查容易的健康状态",{"2":{"61":2}}],["检查文件是否存在",{"2":{"15":2,"234":1}}],["定位到可能是浏览器插件的原因",{"2":{"588":1}}],["定位祖先元素的偏移",{"2":{"479":1}}],["定位时相对于原来位置进行定位",{"2":{"479":1}}],["定位position",{"0":{"479":1}}],["定宽内容",{"0":{"201":1}}],["定时器存在则什么都不做",{"2":{"520":2}}],["定时器回调为普通函数指向window",{"2":{"517":1}}],["定时器会触发变更检测",{"2":{"112":1}}],["定时器",{"2":{"111":1}}],["定义递归函数",{"2":{"525":2}}],["定义不同的内部状态",{"2":{"524":1}}],["定义该变量之前的区域",{"2":{"516":1}}],["定义一个对象",{"2":{"554":1}}],["定义一个平方函数",{"2":{"370":2}}],["定义一个函数",{"2":{"263":2}}],["定义三个状态",{"2":{"303":2,"304":2,"315":2}}],["定义二叉树节点类",{"2":{"299":2}}],["定义了",{"2":{"218":1}}],["定义虚拟dom时",{"2":{"137":1}}],["定义运行时环境变量",{"2":{"61":2}}],["定义",{"0":{"359":1,"367":1,"377":1,"387":1},"2":{"43":2,"126":1}}],["定义与使用全局中间件",{"2":{"29":1}}],["父组件",{"2":{"556":2}}],["父组件发生变更检测后都会调用这三个钩子",{"2":{"109":1}}],["父子相邻",{"2":{"482":1}}],["父类",{"2":{"271":1}}],["父传子",{"2":{"94":1}}],["反败为胜",{"2":{"307":4}}],["反转字符串",{"0":{"283":1}}],["反之",{"2":{"121":2,"466":1}}],["反注册该指令在全局或应用服务中注册过的所有回调",{"2":{"109":2}}],["反斜杠",{"2":{"16":1}}],["停止",{"2":{"109":2,"615":2}}],["停止nginx",{"2":{"72":1}}],["取值为百分比",{"2":{"165":1}}],["取值为数值",{"2":{"165":1}}],["取删除后的页数",{"2":{"159":2}}],["取消",{"2":{"610":2}}],["取消之前的定时器",{"2":{"519":2}}],["取消继承",{"2":{"152":2,"153":2}}],["取消订阅消息",{"2":{"147":4}}],["取消订阅可观察对象和",{"2":{"109":2}}],["取决于绑定的值是否为真",{"2":{"121":2}}],["取前中后各2各字节",{"2":{"15":2}}],["适合理一些残存的状态操作",{"2":{"109":2}}],["适合请求数据初始化组件",{"2":{"109":2}}],["适用于长",{"2":{"4":2}}],["但在其他元素上",{"2":{"615":1}}],["但值不相等",{"2":{"554":1}}],["但它们有着不同的工作原理和适用场景",{"2":{"484":1}}],["但它不会污染样式或元素布局",{"2":{"129":2}}],["但typescript不是原生的javascript代码",{"2":{"425":1}}],["但模版中使用失去类型提示",{"2":{"424":2}}],["但会发现分隔符会有乱码的问题",{"2":{"225":1}}],["但只作用于单个项目",{"2":{"174":1}}],["但效率低",{"2":{"147":2}}],["但组件内部改变输入属性是不会触发的",{"2":{"109":2}}],["但是数据没有展示",{"0":{"609":1}}],["但是线上环境访问不到",{"2":{"590":1}}],["但是折线图左侧收缩",{"2":{"584":2}}],["但是本身的标签和属性并不能直接控制其显示效果",{"2":{"483":1}}],["但是",{"2":{"448":1}}],["但是只支持简单的代码转换",{"2":{"422":1}}],["但是能直接使用tsc命令的前提时",{"2":{"414":1}}],["但是在",{"2":{"322":2}}],["但是也具有一些不同点",{"2":{"264":2}}],["但是它不是一个数组对象",{"2":{"263":2}}],["但是最终返回原值",{"2":{"255":2}}],["但是不支持es6module",{"2":{"535":1}}],["但是不支持commonjs",{"2":{"535":1}}],["但是不想新增垃圾提交信息",{"2":{"213":1}}],["但是不会自动合并",{"2":{"205":1}}],["但是不会",{"2":{"61":2}}],["但是依然会跳过onpush策略组件",{"2":{"112":1}}],["但是大多数应用只有一个组件树",{"2":{"82":2}}],["写在",{"2":{"586":1}}],["写在类名上不生效",{"2":{"586":1}}],["写或什么都不写都是public",{"2":{"406":2}}],["写法",{"2":{"495":8}}],["写法四",{"2":{"172":2}}],["写法三",{"2":{"166":2,"172":2}}],["写法二",{"2":{"166":2,"172":2,"326":2}}],["写法一",{"2":{"166":2,"172":2,"326":2}}],["写简单的逻辑和数据初始化操作",{"2":{"109":2}}],["写入到docs",{"2":{"599":2}}],["写入同一个文件",{"2":{"18":1}}],["写入成功",{"2":{"18":4}}],["写入失败",{"2":{"18":2}}],["写入文件",{"0":{"18":1}}],["生成侧边栏",{"2":{"599":2}}],["生成一级分组",{"2":{"599":2}}],["生成一个错误",{"2":{"440":2}}],["生成到一个文件中",{"2":{"440":2}}],["生成不同的文件",{"2":{"440":2}}],["生成单个",{"2":{"440":2}}],["生成相应的",{"2":{"440":4}}],["生成公钥和私钥",{"0":{"232":1}}],["生成工具",{"2":{"218":1}}],["生成",{"2":{"147":2,"267":4,"455":1,"588":1}}],["生成新镜像",{"2":{"55":1}}],["生产指定类型的组件",{"2":{"113":2}}],["生命周期钩子函数",{"2":{"109":1,"554":1}}],["生命周期函数",{"2":{"109":1}}],["生命周期",{"0":{"109":1}}],["改用iconfont文字不居中问题",{"0":{"580":1}}],["改用",{"2":{"536":2}}],["改",{"2":{"530":1}}],["改动属性造成的",{"2":{"465":1}}],["改变内部的引用类型两者都会有影响",{"2":{"527":1}}],["改变内部的引用类型两者都会有影响let",{"2":{"527":1}}],["改变",{"2":{"466":1}}],["改变状态前先判断",{"2":{"304":1}}],["改变引用",{"2":{"108":2}}],["改错分支但为未提交",{"0":{"212":1}}],["改为",{"2":{"210":1,"214":2}}],["改为yes",{"2":{"75":2}}],["keep",{"0":{"559":1}}],["keyarr",{"2":{"599":12}}],["key=",{"2":{"523":2}}],["key=value",{"2":{"523":2}}],["keyshape",{"2":{"578":22}}],["keys2",{"2":{"318":4}}],["keys1",{"2":{"318":6}}],["keys",{"2":{"265":2,"296":6,"318":6,"603":2}}],["key",{"2":{"265":19,"296":22,"318":6,"319":8,"396":6,"434":4,"523":12,"527":8,"536":8,"599":8}}],["keygen",{"2":{"232":2}}],["keyframes关键帧",{"2":{"477":1}}],["keyframes",{"2":{"179":2,"203":2}}],["key是虚拟dom对象的标识",{"2":{"147":2}}],["key最好不要用index",{"2":{"147":2}}],["key的内部原理是什么",{"2":{"147":2}}],["keyvaluepipe",{"2":{"132":1}}],["keyup",{"2":{"108":2}}],["koala",{"2":{"389":2}}],["koala=",{"2":{"389":2}}],["kind",{"2":{"357":6}}],["kill",{"2":{"56":2,"72":4}}],["know",{"2":{"347":4}}],["kmp",{"2":{"301":6}}],["kmp算法是一种高效的字符串搜索算法",{"2":{"301":3}}],["泰达米尔",{"2":{"108":2}}],["易大师",{"2":{"108":2}}],["嘉文",{"2":{"108":2}}],["赵信",{"2":{"108":2}}],["赵六",{"2":{"5":2}}],["盖伦",{"2":{"108":2}}],["赛选会飞的英雄",{"2":{"108":2}}],["即在编译时就确定模块之间的依赖关系",{"2":{"549":1}}],["即在需要使用某个模块时",{"2":{"549":1}}],["即任意两点之间都存在一条路径的最大子图",{"2":{"547":1}}],["即节点的一个线性序列",{"2":{"547":1}}],["即",{"2":{"440":2}}],["即交换参数",{"2":{"388":1}}],["即参数",{"2":{"388":1}}],["即链表尾部元素",{"2":{"296":2}}],["即可被所有实例访问",{"2":{"275":1}}],["即使单词中有换行符",{"2":{"197":2}}],["即手工在单词中插入",{"2":{"197":2}}],["即管道只会检查原始值或对象引用",{"2":{"108":1,"132":1}}],["即模版中的逻辑不能改变组件的变量",{"2":{"84":1}}],["会忽略undefined",{"2":{"527":2}}],["会忽略复合对象中的变化",{"2":{"108":1,"132":1}}],["会话结束自动清除",{"2":{"522":1}}],["会重新清除上一次定时器",{"2":{"518":1}}],["会重写父类中的run方法",{"2":{"410":2}}],["会按照科学计数法处理",{"2":{"509":1}}],["会去除",{"2":{"509":1}}],["会创建一个新的对象",{"2":{"498":2}}],["会累加15px+20px的padding",{"2":{"482":1}}],["会相互抵消15px+20px的margin",{"2":{"482":1}}],["会引发",{"2":{"465":1,"466":1}}],["会变成",{"2":{"458":2}}],["会得到一棵带有样式的dom",{"2":{"458":1}}],["会得到",{"2":{"456":1}}],["会阳塞",{"2":{"456":1}}],["会停止解析",{"2":{"456":1}}],["会启动一个预解析的线程",{"2":{"456":1}}],["会启动一个渲染主进程",{"2":{"444":1}}],["会搜索操作系统自身的",{"2":{"450":1}}],["会首先搜索浏览器自身的",{"2":{"450":1}}],["会被排列到",{"2":{"388":2}}],["会被docker",{"2":{"61":2}}],["会优先对象自身属性",{"2":{"275":1}}],["会优先访问对象自身的属性",{"2":{"274":1}}],["会添加到原型对象中的情况",{"2":{"274":1}}],["会存储到其他的对象里",{"2":{"274":1}}],["会立即执行",{"2":{"262":4}}],["会立刻返回",{"2":{"243":2}}],["会先把",{"2":{"563":1,"564":1}}],["会先进行类型转换",{"2":{"512":1}}],["会先转为布尔值后运算",{"2":{"255":2}}],["会先将其转为布尔值值再取反",{"2":{"255":2}}],["会打破异步操作并行",{"2":{"243":1}}],["会在c",{"2":{"222":1}}],["会比较方便",{"2":{"222":1}}],["会自动类型推断",{"2":{"401":2}}],["会自动将提交信息转换成符合规范的格式",{"2":{"221":1}}],["会自动启动",{"2":{"221":1}}],["会自动销毁",{"2":{"125":1}}],["会产生错误dom更新",{"2":{"147":2}}],["会产生没有必要的真实dom更新",{"2":{"147":2}}],["会报错",{"2":{"134":1,"428":1,"509":1}}],["会把",{"2":{"128":2}}],["会改变dom结构",{"2":{"121":1}}],["非对象",{"2":{"554":1}}],["非递归方式",{"2":{"543":2}}],["非标准特殊对象",{"2":{"506":1}}],["非数值与数值比较会先非数值转为数值再比较",{"2":{"256":2}}],["非布尔值运算",{"2":{"255":2}}],["非受控组件",{"2":{"141":1}}],["非空断言",{"0":{"134":1}}],["非纯管道开启方式一",{"2":{"108":2}}],["非纯管道",{"0":{"108":1}}],["非常简单",{"2":{"84":1}}],["底数",{"2":{"107":2}}],["默认设计稿的高度",{"2":{"583":2}}],["默认设计稿的宽度",{"2":{"583":2}}],["默认收缩二级节点",{"0":{"579":1}}],["默认策略",{"2":{"554":1}}],["默认策略下触发变更检测的时机",{"0":{"111":1}}],["默认为w3c",{"2":{"475":1}}],["默认每个标签页开启一个新进程",{"2":{"444":1}}],["默认是classic",{"2":{"440":2}}],["默认是false",{"2":{"414":4}}],["默认所有可见的",{"2":{"438":1}}],["默认module为",{"2":{"430":1}}],["默认情况下null和undefined是所有类型的子类型",{"2":{"399":2}}],["默认排序顺序是根据字符串",{"2":{"387":1}}],["默认使用的规范",{"2":{"218":1}}],["默认继承父组件属性",{"2":{"151":2}}],["默认值为",{"2":{"431":2}}],["默认值根据",{"2":{"430":1}}],["默认值是false",{"2":{"414":2}}],["默认值",{"2":{"116":4,"117":4,"197":2,"406":1,"414":2,"426":1,"427":1,"428":1,"429":1,"432":1,"434":1,"435":1,"436":1,"437":1,"479":1}}],["默认的管道都是纯的",{"2":{"108":1,"132":1}}],["默认只批量获取直属组件",{"2":{"106":1}}],["默认选项",{"2":{"101":1}}],["能够很好的判断数据的类型及内置对象",{"2":{"533":1}}],["能够快速地查找匹配位置",{"2":{"301":1}}],["能否接受参数转换基数",{"2":{"533":1}}],["能否修改",{"2":{"514":1}}],["能极大简化书写代码",{"2":{"426":1}}],["能多次修改状态",{"2":{"303":1}}],["能保证获取到元素",{"2":{"103":2}}],["能进能出",{"2":{"101":1}}],["标准准特殊对象",{"2":{"506":1}}],["标准普通对象",{"2":{"506":1}}],["标准盒模型",{"2":{"475":1}}],["标准并不保证这一行为",{"2":{"388":1}}],["标识栈顶元素的下标",{"2":{"279":1}}],["标识容器便于查找",{"2":{"61":2}}],["标签",{"2":{"476":1}}],["标签首字母",{"2":{"137":1}}],["标签必须闭合",{"2":{"137":1}}],["标签中混入js表达式时要用",{"2":{"137":1}}],["标签选择器投影内容",{"2":{"102":2}}],["就好了",{"2":{"594":1}}],["就需要设置base属性了",{"2":{"572":1}}],["就需要重新计算",{"2":{"466":1}}],["就形成了闭包",{"2":{"536":1}}],["就可能造成无法获取到最新的布局信息浏览器在反复权衡下",{"2":{"465":1}}],["就可以使用非空断言操作符",{"2":{"134":1}}],["就可以把解析出来的用户信息",{"2":{"43":2}}],["就极有可能导致主线程产生阻塞",{"2":{"447":1}}],["就取出第一个任务执行",{"2":{"446":1}}],["就是所有的属性值",{"2":{"427":1}}],["就传递给p的回调函数",{"2":{"314":1}}],["就放在原位",{"2":{"290":1}}],["就相当于将另一个类中的代码复制到了当前类中",{"2":{"271":1}}],["就没在意这种解决方案",{"2":{"225":1}}],["就会向本地配置的首选",{"2":{"450":1}}],["就会从顶级组件从上至下开始进行变更检测",{"2":{"111":1}}],["就会按下面的顺序在特定时刻调用这些",{"2":{"109":1}}],["就自己玩",{"2":{"101":1}}],["为基础的",{"2":{"560":1}}],["为每个层生成绘制指令",{"2":{"461":1}}],["为什么要等待一段时间在关闭连接",{"2":{"468":1}}],["为什么要进行第三次握手",{"2":{"451":1}}],["为什么连接的时候是三次握手",{"2":{"468":1}}],["为什么",{"2":{"466":1}}],["为什么遍历列表时",{"2":{"147":2}}],["为装饰器提供元数据的支持",{"2":{"440":2}}],["为null",{"2":{"275":1}}],["为实例属性进行赋值",{"2":{"269":2}}],["为了设置更精确动画时间间隔",{"2":{"526":1}}],["为了保障数据发送完再断开连接",{"2":{"468":1}}],["为了避免连续的多次操作导致布局树反复计算",{"2":{"465":1}}],["为了提高解析效率",{"2":{"456":1}}],["为了防止服务器端开启一些无用的连接",{"2":{"451":1}}],["为了在不可靠的信道上建立起可靠的连接",{"2":{"451":1}}],["为了在ts代码中使用es6中的类",{"2":{"431":1}}],["为了的高效",{"2":{"146":1}}],["为了更好的兼容性",{"2":{"146":1}}],["为属性型指令",{"2":{"123":1}}],["为止",{"2":{"99":1}}],["为服务器实例绑定",{"2":{"20":1}}],["样式覆盖",{"0":{"603":1}}],["样式或者",{"2":{"483":1}}],["样式计算",{"0":{"458":1},"2":{"455":1}}],["样式",{"2":{"445":1}}],["样式的类名指定不要用class",{"2":{"137":1}}],["样式模块化",{"0":{"100":1}}],["样式应用到组件内部的所有",{"2":{"99":1}}],["样式优先级",{"2":{"92":1}}],["才取消编辑",{"2":{"610":2}}],["才执行",{"2":{"520":2}}],["才能继续解析",{"2":{"456":1}}],["才能实现跨域",{"2":{"42":1}}],["才会去原型对象中寻找",{"2":{"274":1}}],["才会把",{"2":{"99":1}}],["祖先选择器",{"0":{"99":1}}],["类似",{"2":{"440":2}}],["类似cmd",{"2":{"61":2}}],["类名",{"2":{"404":2}}],["类名时生效",{"2":{"98":1}}],["类型检测方式",{"0":{"507":1}}],["类型的时候",{"2":{"440":2}}],["类型只能为",{"2":{"402":2}}],["类型是",{"2":{"402":2}}],["类型",{"2":{"402":2,"404":4,"431":1}}],["类型声名可省略",{"2":{"401":2}}],["类型声名",{"0":{"401":1}}],["类型断言",{"2":{"400":2}}],["类型安全的any",{"2":{"400":2}}],["类型常见用法",{"2":{"399":1}}],["类型键名",{"2":{"318":2}}],["类型转换函数$any",{"0":{"135":1}}],["类方法",{"2":{"269":2}}],["类式组件",{"0":{"140":1},"2":{"140":2}}],["类或接口",{"2":{"129":2}}],["类",{"0":{"404":1},"1":{"405":1},"2":{"99":1,"276":1,"476":1}}],["当一个元素position特性值设置为fixed时",{"2":{"605":1}}],["当需要子组件的请求需要比父组件先完成时",{"2":{"558":1}}],["当队列非空时",{"2":{"544":1}}],["当参数小于0",{"2":{"532":1}}],["当用户滚动到页面的对应位置时再加载图片",{"2":{"486":1}}],["当元素祖先的",{"2":{"479":1}}],["当对一个文档进行布局",{"2":{"475":1}}],["当命中协商缓存的时候",{"2":{"471":1}}],["当改动了可见样式后",{"2":{"466":1}}],["当进行了会影响布局树的操作后",{"2":{"465":1}}],["当其他线程完成时",{"2":{"447":1}}],["当发现变量定义但没有使用时",{"2":{"435":1}}],["当启用了strictnullchecks",{"2":{"434":1}}],["当target为es6时",{"2":{"431":1}}],["当target为es5时",{"2":{"431":1}}],["当target设置为es6时",{"2":{"430":1}}],["当编译ts代码时",{"2":{"429":1}}],["当开启noimplicitany时",{"2":{"428":2}}],["当有隐含any类型时",{"2":{"428":1}}],["当有错误时不生成编译文件",{"2":{"414":2}}],["当你使用这些库时",{"2":{"426":1}}],["当缓存超出容量时",{"2":{"296":2}}],["当我们访问对象中的属性时",{"2":{"274":1}}],["当本地仓库项同时关联",{"2":{"211":1}}],["当调用时",{"2":{"195":2}}],["当前时间",{"2":{"520":2}}],["当前请求完成的数量",{"2":{"494":2}}],["当前元素在数组中的索引",{"2":{"378":1}}],["当前元素属于的数组对象",{"2":{"360":1}}],["当前元素属于的数组对象array",{"2":{"360":1}}],["当前元素的索引值",{"2":{"360":2}}],["当前promise不能返回自己",{"2":{"311":1}}],["当前页只有一页则为1",{"2":{"159":2}}],["当前镜像构建的时候不会执行",{"2":{"61":2}}],["当状态中的数据发生变化时",{"2":{"147":2}}],["当state需要从props初始化时",{"2":{"147":1}}],["当表达式不局限于访问某个属性时",{"2":{"122":2}}],["当然写了也没有问题",{"2":{"113":1}}],["当组件",{"2":{"109":1}}],["当",{"2":{"109":1,"440":2,"465":2}}],["当某个祖先元素有",{"2":{"99":1}}],["当宿主标签上有",{"2":{"98":1}}],["它作用于构建过程中的静态文件的路径",{"2":{"573":1}}],["它会影响到所有使用了vue",{"2":{"572":1}}],["它利用xml描述二维图形",{"2":{"484":1}}],["它使用javascript在html5画布中创建像素级别的图形",{"2":{"484":1}}],["它们之间的区别如下",{"2":{"549":1}}],["它们两两组合配合使用",{"2":{"471":1}}],["它们的第一个参数就是函数的this",{"2":{"262":1}}],["它影响的只是渲染流程的最后一个",{"2":{"466":1}}],["它只能被其他类所继承不能用来创建实例",{"2":{"411":1}}],["它循环遍历传入的数组",{"2":{"392":1}}],["它接受一个数组和一个回调函数",{"2":{"392":1}}],["它的this由定义时外层作用域决定",{"2":{"262":1}}],["它的优先级就越高",{"2":{"92":1}}],["它先将其他值转为字符串",{"2":{"251":1}}],["它总是等到该promise对象resolve成功之后执行",{"2":{"240":1}}],["它不是一个指令",{"2":{"129":2}}],["它永远不会直接显示出来",{"2":{"128":2}}],["它选中的是组件模板标签",{"2":{"98":1}}],["静态定位static",{"2":{"479":1}}],["静态属性",{"0":{"408":1},"2":{"406":1,"408":2}}],["静态属性可不用",{"2":{"95":2}}],["静态方法中this指向的是当前类",{"2":{"269":2}}],["静态方法",{"2":{"269":2}}],["静态绑定",{"2":{"86":2}}],["输出相对路径",{"2":{"599":2}}],["输出结果",{"2":{"536":2}}],["输出结果都是",{"2":{"536":2}}],["输出7",{"2":{"301":1}}],["输出7let",{"2":{"301":1}}],["输出5",{"2":{"301":1}}],["输出5let",{"2":{"301":1}}],["输出",{"2":{"285":2}}],["输出被props接收以外的属性",{"2":{"153":2}}],["输出querylist数组",{"2":{"104":2}}],["输出属性",{"0":{"96":1},"2":{"94":1,"96":1}}],["输出伪终端",{"2":{"56":2}}],["输入框搜索",{"2":{"520":1}}],["输入完毕后",{"2":{"221":1}}],["输入属性和指令名设为一样",{"2":{"124":2}}],["输入属性更新时触发",{"2":{"109":2}}],["输入属性",{"0":{"95":1},"2":{"94":1}}],["输入与输出属性",{"0":{"94":1}}],["有人说是图床的问题",{"2":{"606":1}}],["有",{"2":{"514":2}}],["有效",{"2":{"584":2}}],["有效数字",{"2":{"509":2}}],["有效载荷",{"2":{"43":1}}],["有且没有过期则停止搜索解析到此结束",{"2":{"450":1}}],["有且没有过期则解析到此结束",{"2":{"450":1}}],["有未使用的参数时",{"2":{"436":1,"440":2}}],["有未使用的变量时",{"2":{"435":1,"440":2}}],["有隐含的",{"2":{"428":1}}],["有很多主题",{"2":{"222":1}}],["有多个只会获取第一个",{"2":{"105":2}}],["有问题",{"2":{"92":2}}],["绑定this",{"2":{"303":2,"304":2,"315":2}}],["绑定的表达式不能或很难指定类型时使用",{"2":{"135":1}}],["绑定组件内方法",{"2":{"130":1}}],["绑定事件",{"0":{"93":1}}],["绑定总是优先于静态属性",{"2":{"92":1}}],["绑定多个style",{"0":{"92":1}}],["绑定多个class",{"0":{"90":1}}],["绑定单个style",{"0":{"91":1}}],["绑定到ngforof",{"2":{"122":2}}],["绑定到",{"2":{"29":2}}],["啦啦啦",{"2":{"89":2}}],["单线程是异步产生的原因",{"2":{"446":1}}],["单行与多行溢出隐藏",{"0":{"176":1}}],["单个项目位置",{"0":{"174":1}}],["单个class样式绑定",{"0":{"89":1}}],["单条文档",{"2":{"5":1}}],["插件",{"2":{"221":1,"418":2}}],["插值表达式属性绑定",{"0":{"88":1}}],["插入排序",{"0":{"290":1}}],["插入换行",{"0":{"197":1}}],["插入成功",{"2":{"36":2}}],["插入数据",{"0":{"36":1}}],["插入",{"0":{"5":1,"9":1}}],["执行打包命令时",{"2":{"592":1}}],["执行完成之后执行",{"2":{"548":1}}],["执行完一个后进入下一次循环",{"2":{"446":1}}],["执行顺序是从后往前依次执行",{"2":{"548":1}}],["执行以下操作",{"2":{"544":1}}],["执行时间间隔",{"2":{"526":1}}],["执行构造函数",{"2":{"498":1}}],["执行定时器的回调函数",{"2":{"445":1}}],["执行事件处理函数",{"2":{"445":1}}],["执行全局",{"2":{"445":1}}],["执行命令",{"2":{"416":1}}],["执行数组中每个值的callback",{"2":{"378":2}}],["执行数组中每个值的函数",{"2":{"378":2}}],["执行结果",{"2":{"308":1}}],["执行set",{"2":{"234":1}}],["执行",{"2":{"234":1,"368":2,"447":1}}],["执行了reactdom",{"2":{"140":1}}],["执行秩序",{"2":{"103":2}}],["执行迅速",{"2":{"84":1}}],["执行的脚本",{"2":{"61":2}}],["内层函数作用域用到了外层函数作用域的变量",{"2":{"536":1}}],["内边距",{"2":{"475":1}}],["内部样式",{"2":{"456":1}}],["内部事件监听",{"2":{"125":2}}],["内核又把结果返回给浏览器",{"2":{"450":1}}],["内容分发网络",{"2":{"486":1}}],["内容",{"2":{"475":1}}],["内容后面的字符",{"2":{"346":2}}],["内容前面的字符",{"2":{"346":2}}],["内建对象",{"2":{"278":1}}],["内置指令ngstyle绑定",{"2":{"92":2}}],["内置模块的加载优先级是最高的",{"2":{"26":1}}],["内置模块",{"2":{"23":1}}],["内联样式",{"2":{"84":2,"476":1}}],["内联模板",{"2":{"84":2}}],["722",{"2":{"578":2}}],["73",{"2":{"578":2}}],["732",{"2":{"578":2}}],["73em",{"2":{"195":2}}],["792",{"2":{"578":2}}],["77",{"2":{"578":2}}],["7种",{"2":{"261":2}}],["708",{"2":{"578":2}}],["700",{"2":{"493":2,"494":2}}],["70",{"2":{"194":1}}],["766",{"2":{"578":2}}],["762",{"2":{"578":2}}],["768",{"2":{"489":2}}],["768px",{"2":{"489":2,"603":4}}],["76",{"2":{"194":1,"198":2,"578":2}}],["75d882",{"2":{"578":2}}],["75",{"2":{"186":2,"578":2,"585":2}}],["7",{"0":{"90":1,"257":1,"346":1,"422":1,"423":1,"432":1},"2":{"84":4,"231":2,"256":2,"282":4,"288":2,"299":10,"346":2,"365":2,"370":2,"383":4,"422":1,"432":2,"551":2,"552":1}}],["都有",{"2":{"547":1}}],["都有自己私有的程序计数器",{"2":{"443":1}}],["都没有tostring",{"2":{"533":1}}],["都是对象的方法",{"2":{"533":1}}],["都代表子线程的全局对象",{"2":{"495":1}}],["都需要写联合类型",{"2":{"434":1}}],["都需要赋有初始值",{"2":{"427":1}}],["都纠结于是",{"2":{"433":1}}],["都会对文件进行处理",{"2":{"548":1}}],["都会触发回流",{"2":{"465":1}}],["都会返回true",{"2":{"277":1}}],["都会执行的回调",{"2":{"239":2}}],["都作为组件树的根",{"2":{"82":2}}],["都可以按需引入",{"2":{"561":1}}],["都可以导入imports数组中",{"2":{"80":2}}],["都可以得到响应",{"2":{"22":2}}],["该子图所使用的布局类型",{"2":{"577":2}}],["该回调函数会在浏览器下一次重绘之前执行",{"2":{"526":1}}],["该方法需要传入一个回调函数作为参数",{"2":{"526":1}}],["该对象会继承自构造函数的原型对象",{"2":{"498":1}}],["该选项告诉编译器遇到匹配的值时",{"2":{"433":1}}],["该如何去找对应文件模块解析",{"2":{"432":1}}],["该值默认值是根据",{"2":{"431":1}}],["该元素存储在",{"2":{"392":1}}],["该排序方法会在原数组上直接进行排序",{"2":{"387":1}}],["该本地仓库已关联远程库",{"2":{"211":1}}],["该容器可以存储被ref所标识的节点",{"2":{"145":2}}],["该数组中的每个组件",{"2":{"82":2}}],["该模块用到的组件",{"2":{"78":1}}],["该模块的依赖项",{"2":{"78":1}}],["来监听元素大小变化",{"2":{"615":1}}],["来决定header",{"2":{"614":2}}],["来到了新的阵地vuepress折腾",{"2":{"607":1}}],["来配置应用的部署路径",{"2":{"573":1}}],["来确保应用在不同环境下都能够正确访问静态文件",{"2":{"573":1}}],["来修改",{"2":{"483":1}}],["来禁用自动引入",{"2":{"438":1}}],["来代替",{"2":{"433":1}}],["来看是否全部成功",{"2":{"313":2}}],["来读取属性",{"2":{"270":2}}],["来合并远程分支",{"2":{"213":2}}],["来启动的",{"2":{"82":2}}],["来认证用户身份",{"2":{"43":1}}],["宿主对象",{"2":{"278":1}}],["宿主选择器",{"0":{"98":1}}],["宿主页面",{"2":{"78":1}}],["宿主机ip",{"2":{"62":2}}],["指向同一对象",{"2":{"527":1}}],["指向新创建的对象",{"2":{"498":1}}],["指向obj",{"2":{"262":1}}],["指向objfunction",{"2":{"262":1}}],["指向声明时外层作用域的this",{"2":{"262":2}}],["指数",{"2":{"107":2}}],["指令来源于formsmodule模块",{"2":{"117":1}}],["指令与组件共有的钩子",{"2":{"109":1}}],["指令销毁前调用",{"2":{"109":2}}],["指令",{"0":{"123":1},"2":{"78":1,"105":1,"119":1,"130":1}}],["指定第二个参数存在则指向第二个参数",{"2":{"517":1}}],["指定编译文件或排除指定编译文件",{"2":{"440":2}}],["指定编译的ecmascript目标版本",{"2":{"429":1}}],["指定调试器应该找到映射文件而不是生成文件的位置",{"2":{"440":2}}],["指定调试器应该找到",{"2":{"440":2}}],["指定输出目录",{"2":{"440":2}}],["指定使用模块",{"2":{"440":2}}],["指定",{"2":{"440":4}}],["指定生成哪个模块系统代码",{"2":{"430":1}}],["指定corejs的版本",{"2":{"418":2}}],["指定环境的插件",{"2":{"418":2}}],["指定加载器",{"2":{"418":2}}],["指定要包含在编译中的库文件",{"2":{"440":2}}],["指定要loader加载的规则",{"2":{"418":2}}],["指定要使用的模块化的规范",{"2":{"414":2}}],["指定webpack打包时要使用的模块",{"2":{"418":2}}],["指定打包文件的目录",{"2":{"418":2}}],["指定打包文件所在目录",{"2":{"418":2}}],["指定入口文件",{"2":{"418":2}}],["指定被编译文件的列表",{"2":{"414":2}}],["指定为元组",{"2":{"402":2}}],["指定明确的值",{"2":{"402":2}}],["指定的类型",{"2":{"272":1}}],["指定颜色的矩形",{"2":{"191":1}}],["指定默认标签属性值",{"2":{"144":2}}],["指定容器使用什么信号",{"2":{"61":2}}],["指定容器卷",{"2":{"61":2}}],["指定元数据",{"2":{"61":2}}],["指定进入容器后的默认工作目录",{"2":{"61":2}}],["指定命令解释器",{"2":{"56":2,"61":2}}],["指定端口号并启动web服务器",{"2":{"42":2}}],["指定更新",{"2":{"7":2}}],["被继承的配置文件",{"2":{"414":2}}],["被继承的类称为",{"2":{"271":1}}],["被返回并赋值给",{"2":{"392":1}}],["被async标记的函数返回也是promise对象",{"2":{"240":1}}],["被",{"2":{"77":1}}],["把sidebarstr写入到docs",{"2":{"599":2}}],["把数组里面的每个对象合并到一个对象里面",{"2":{"599":2}}],["把数字转换成字符串",{"2":{"302":2}}],["把其变为字符串",{"2":{"509":1}}],["把对象转换为数字",{"2":{"509":1}}],["把布尔转换为数宇",{"2":{"509":1}}],["把样式复制到指定类名",{"2":{"491":4}}],["把每个元素表示为一个矩形的盒子",{"2":{"475":1}}],["把该选项设置为false",{"2":{"428":1}}],["把该视图显式标记为已更改",{"2":{"112":2}}],["把一些通用逻辑封装到装饰器中",{"2":{"426":1}}],["把仓库同步到gitee",{"2":{"396":1}}],["把静态文件push到gh",{"2":{"396":1}}],["把二维数组变字符串",{"0":{"372":1}}],["把距离为",{"2":{"291":2}}],["把自定义属性",{"2":{"249":1}}],["把第一次提交的",{"2":{"214":2}}],["把需要压缩的提交",{"2":{"210":1}}],["把item视为any类型",{"2":{"135":1}}],["把首字母大写",{"2":{"132":1}}],["把onboot=no",{"2":{"75":2}}],["把源码+配置+环境+版本打包成镜像",{"2":{"47":1}}],["日志分析器",{"0":{"74":1}}],["意义",{"2":{"65":1}}],["十三",{"0":{"315":1}}],["十二",{"0":{"314":1}}],["十一",{"0":{"313":1}}],["十",{"0":{"65":1,"312":1},"1":{"66":1,"67":1,"68":1},"2":{"302":6}}],["域名解析",{"0":{"450":1},"2":{"449":1}}],["域名互ping都能通",{"2":{"64":2}}],["域名独立",{"2":{"41":1}}],["痛点及需求",{"0":{"596":1}}],["痛点",{"2":{"64":2}}],["两者的区别",{"0":{"545":1}}],["两个操作数类型相同",{"2":{"512":1}}],["两个ip可以相互ping通",{"2":{"64":2}}],["两边数据类型不同",{"2":{"512":1}}],["两种解析方式查找文件方式不同",{"2":{"432":2}}],["两种写法",{"2":{"130":2}}],["两种传参方式",{"2":{"29":2}}],["共同节点注册",{"2":{"578":2}}],["共同点",{"2":{"533":1}}],["共安装了4个包",{"2":{"422":1}}],["共用的容器关闭",{"2":{"63":2}}],["共用网卡",{"0":{"63":1}}],["共享宿主机的ip",{"2":{"62":2}}],["端口",{"2":{"62":2}}],["新建image对象",{"2":{"551":2}}],["新建网络",{"2":{"62":2}}],["新对象更改不会影响到旧对象",{"2":{"527":1}}],["新对象的",{"2":{"498":1}}],["新项目css架构设计入手方向",{"0":{"488":1}}],["新任务会加到消息队列的未尾",{"2":{"446":1}}],["新虚拟dom",{"2":{"147":2}}],["新的虚拟dom",{"2":{"147":2}}],["新数据",{"2":{"147":2}}],["新版",{"2":{"147":1}}],["新写入的会覆盖之前内容",{"2":{"18":1}}],["组成",{"2":{"475":1}}],["组成部分",{"2":{"43":1}}],["组实例三大属性",{"0":{"142":1},"1":{"143":1,"144":1,"145":1}}],["组件漏写了",{"2":{"609":1}}],["组件化开发",{"2":{"560":1}}],["组件选项达到复用的效果",{"2":{"554":1}}],["组件自定义事件的",{"2":{"150":1}}],["组件生命周期",{"0":{"147":1}}],["组件要获取",{"2":{"141":1}}],["组件状态的影响",{"2":{"141":1}}],["组件改为属性型指令",{"2":{"119":1}}],["组件是一种特殊的指令",{"2":{"119":1}}],["组件的路径",{"2":{"573":1}}],["组件的",{"2":{"112":2}}],["组件的样式不会影响到投影内容",{"2":{"100":1}}],["组件的样式不会影响到子组件中的模板",{"2":{"100":1}}],["组件特有的钩子",{"2":{"109":1}}],["组件每次检查视图时调用",{"2":{"109":2}}],["组件每次检查内容时调用",{"2":{"109":2}}],["组件相应的视图初始化之后调用",{"2":{"109":2}}],["组件初始化",{"2":{"109":2}}],["组件销毁的时候会触发的一系列的方法",{"2":{"109":1}}],["组件更新",{"2":{"109":1}}],["组件创建",{"2":{"109":1}}],["组件",{"0":{"138":1},"1":{"139":1,"140":1,"141":1,"142":1,"143":1,"144":1,"145":1,"146":1,"147":1},"2":{"105":1,"129":2,"130":1}}],["组件投影",{"0":{"102":1},"2":{"102":2}}],["组件样式出不去",{"2":{"101":2}}],["组件样式",{"0":{"97":1},"1":{"98":1,"99":1,"100":1,"101":1}}],["组id",{"2":{"61":2}}],["96",{"2":{"578":4}}],["996",{"2":{"578":2}}],["99",{"2":{"402":2}}],["999",{"2":{"385":6}}],["9999px",{"2":{"574":2}}],["999999998",{"2":{"342":2}}],["99999999",{"2":{"340":2,"342":2}}],["9999",{"2":{"61":2,"573":2}}],["9a",{"2":{"348":2}}],["9秒后打印的",{"2":{"238":2}}],["90",{"2":{"578":2}}],["900",{"2":{"493":2,"494":2,"614":6}}],["90deg",{"2":{"195":2}}],["90px",{"2":{"189":2}}],["94",{"2":{"194":1}}],["9",{"0":{"92":1,"259":1,"349":1,"434":1},"2":{"72":1,"251":2,"288":2,"341":2,"348":2,"365":2,"370":4,"490":2,"578":4}}],["954",{"2":{"578":2}}],["95",{"2":{"15":2}}],["暴露镜像的指定端口",{"2":{"61":2}}],["落脚点",{"2":{"61":2}}],["恢复后的镜像名",{"2":{"59":2}}],["备份",{"2":{"607":1}}],["备份原型上的方法",{"2":{"552":1}}],["备份整个容器",{"2":{"59":2}}],["备份文件",{"2":{"59":2}}],["xml",{"2":{"590":3}}],["xl",{"2":{"489":1,"587":4}}],["x2=",{"2":{"478":2}}],["x1=",{"2":{"478":2}}],["x阶段",{"2":{"440":2}}],["xs",{"2":{"424":18}}],["xinxi",{"2":{"318":6,"319":10}}],["x之间的随机数",{"2":{"267":2}}],["x64",{"2":{"231":2}}],["x",{"2":{"191":1,"267":10,"274":1,"297":8,"363":4,"370":6,"389":6,"402":8,"405":2,"540":24,"577":2,"578":50,"580":2,"590":2}}],["x=",{"2":{"178":4,"478":2}}],["xhr",{"2":{"111":1}}],["x86",{"2":{"66":2}}],["xxx执行过程",{"0":{"562":1},"1":{"563":1,"564":1}}],["xxxlist",{"0":{"158":1},"2":{"158":2}}],["xxxx",{"2":{"137":2}}],["xxx",{"2":{"59":2,"61":2,"113":1,"235":6,"246":2,"247":2}}],["xargs",{"2":{"56":2,"207":2}}],["前面",{"2":{"388":1}}],["前面不是数字",{"2":{"350":2}}],["前面是href=",{"2":{"350":2}}],["前序遍历",{"2":{"299":3}}],["前一位",{"2":{"290":1}}],["前自增",{"2":{"254":2}}],["前置知识",{"0":{"136":1},"1":{"137":1}}],["前台交互启动",{"2":{"57":2}}],["前端配合",{"0":{"613":1}}],["前端项目优化",{"0":{"565":1},"1":{"566":1,"567":1,"568":1,"569":1,"570":1,"571":1}}],["前端模块化规范是为了解决前端代码复杂度",{"2":{"549":1}}],["前端模块化规范",{"0":{"549":1}}],["前端本地存储方式",{"0":{"521":1},"1":{"522":1,"523":1}}],["前端如何做到并发请求",{"0":{"492":1},"1":{"493":1,"494":1}}],["前端缓存",{"0":{"470":1},"1":{"471":1,"472":1}}],["前端两种服务器",{"2":{"27":1}}],["前端代码",{"0":{"15":1,"45":1}}],["重绘网络拓扑",{"2":{"577":2}}],["重绘repaint",{"0":{"466":1}}],["重构",{"2":{"541":2}}],["重叠",{"2":{"482":1}}],["重写函数",{"2":{"552":1}}],["重写",{"0":{"410":1},"2":{"512":2}}],["重写构造函数时",{"2":{"271":2}}],["重写构造函数",{"2":{"271":2}}],["重复任意角度条纹",{"2":{"186":2}}],["重复函数",{"2":{"165":1}}],["重复调用",{"2":{"18":1}}],["重",{"2":{"137":1}}],["重启网络",{"2":{"75":1}}],["重启网络ip",{"2":{"75":1}}],["重载配置",{"2":{"73":1}}],["重载配置nginx",{"2":{"73":1}}],["重新设为开源成功解决",{"2":{"606":1}}],["重新打开",{"2":{"520":2}}],["重新计时",{"2":{"519":2}}],["重新开启定时器开始计时",{"2":{"518":1}}],["重新检查步骤配置",{"2":{"234":1}}],["重新让我拾回看书的一些兴趣",{"2":{"181":1}}],["重新恢复容器",{"2":{"59":1}}],["重新恢复容器docker",{"2":{"59":1}}],["重新进容器",{"2":{"56":2}}],["退出while循环时",{"2":{"290":2}}],["退出但不停止",{"2":{"56":2}}],["退出",{"2":{"56":2}}],["退出登录成功",{"2":{"42":2}}],["退出登录的接口",{"2":{"42":2}}],["记录执行指令地址",{"2":{"443":1}}],["记得带版本",{"2":{"55":2}}],["记住",{"2":{"43":2}}],["没发现有相关的问题",{"2":{"605":1}}],["没写在哪个目录下存放vite",{"2":{"602":1}}],["没想到里面字体挺丰富",{"2":{"225":1}}],["没啥用建议删除",{"2":{"55":1}}],["没有警告",{"2":{"609":1}}],["没有更换刷新浏览器每次都需要做多余的判断",{"2":{"541":2}}],["没有",{"2":{"514":2}}],["没有实现则返回",{"2":{"507":1}}],["没有类型可以赋值给never类型",{"2":{"400":2}}],["没有类型是never的子类型",{"2":{"400":2}}],["没有则去原型的原型中寻找",{"2":{"275":1}}],["没有则去对象的原型中寻找",{"2":{"275":1}}],["没有则创建",{"2":{"46":2,"599":2}}],["没有文件后缀",{"2":{"235":1}}],["没有配置打开vs",{"2":{"230":1}}],["没有使用结构型指令",{"2":{"128":1}}],["没有样式能进来",{"2":{"101":1}}],["没有可见的副作用",{"2":{"84":1}}],["没有自己的ip",{"2":{"62":2}}],["没有版本号默认最新",{"2":{"55":2}}],["没有这个字段的数据排在前面",{"2":{"4":2}}],["所生成的软连接",{"2":{"563":1}}],["所以它具有无限放大和缩小不失真的优势",{"2":{"484":1}}],["所以reflow",{"2":{"466":1}}],["所以",{"2":{"456":1,"465":1,"466":1}}],["所以浏览器采用异步的方式来避免",{"2":{"447":1}}],["所以typescript包含了strictnullchecks选项来帮助我们减少对这种情况的担忧",{"2":{"434":1}}],["所以需要转换为不同的模块系统",{"2":{"430":1}}],["所以需要选择一个编译的目标版本",{"2":{"429":1}}],["所以需要配置每次powershell启动时都会执行应用主题的脚本",{"2":{"226":1}}],["所以你可以使用es6来编写ts代码",{"2":{"429":1}}],["所以kmp函数返回的结果也是7",{"2":{"301":1}}],["所以kmp函数返回的结果也是5",{"2":{"301":1}}],["所以这就意味着任何数据都可以作为参数传递",{"2":{"272":1}}],["所以不是每个变量或参数定义需要明确告知类型是什么",{"2":{"428":1}}],["所以不会执行管道的逻辑",{"2":{"108":1}}],["所以不要用",{"2":{"41":1}}],["所绑定input的值",{"2":{"118":2}}],["所有想写个脚本按照目录结构自动生产对应的映射关系",{"2":{"596":1}}],["所有echart实例尺寸尺寸改变",{"2":{"584":2}}],["所有数据类型在计算机底层都是以64位二进制存储的",{"2":{"513":1}}],["所有数据类型",{"2":{"507":1}}],["所有严格检查的总开关",{"2":{"414":2}}],["所有成功才会执行成功的回调函数",{"2":{"313":2}}],["所有的公共属性",{"2":{"275":1}}],["所有生命周期钩子函数执行顺序",{"2":{"109":1}}],["所有",{"2":{"55":2,"561":1}}],["常见高级面试题",{"0":{"550":1},"1":{"551":1}}],["常见进阶面试题",{"0":{"534":1},"1":{"535":1,"536":1,"537":1,"538":1,"539":1,"540":1,"541":1,"542":1,"543":1,"544":1,"545":1,"546":1,"547":1,"548":1,"549":1}}],["常见基础面试题",{"0":{"505":1},"1":{"506":1,"507":1,"508":1,"509":1,"510":1,"511":1,"512":1,"513":1,"514":1,"515":1,"516":1,"517":1,"518":1,"519":1,"520":1,"521":1,"522":1,"523":1,"524":1,"525":1,"526":1,"527":1,"528":1,"529":1}}],["常见的可替换元素包括",{"2":{"483":1}}],["常见的高阶函数有",{"2":{"146":1}}],["常基于",{"2":{"452":1}}],["常用的有es5",{"2":{"431":1}}],["常用",{"2":{"147":8}}],["常用命令",{"0":{"53":1},"1":{"54":1,"55":1,"56":1,"57":1,"58":1,"59":1,"60":1}}],["常量",{"2":{"43":2}}],["参考博客",{"2":{"605":1}}],["参考视频",{"2":{"468":2}}],["参考链接",{"2":{"466":1}}],["参考",{"2":{"336":2}}],["参考资料",{"0":{"336":1}}],["参考教程",{"2":{"52":1}}],["参数判断处理",{"2":{"519":2}}],["参数",{"2":{"268":2,"270":4,"404":4}}],["参数来跳过编辑提交信息的步骤",{"2":{"213":1}}],["参数或返回值是一个函数满足一个条件则为高阶函数",{"2":{"146":1}}],["参数3",{"2":{"43":2}}],["参数2",{"2":{"43":2}}],["参数1",{"2":{"43":2}}],["阿里云镜像加速",{"0":{"52":1}}],["|$",{"2":{"571":2}}],["|和",{"2":{"400":1}}],["|",{"0":{"132":1,"340":1},"2":{"51":2,"56":2,"59":2,"62":2,"72":1,"73":2,"107":4,"108":2,"113":4,"122":2,"157":2,"174":12,"207":2,"224":2,"227":2,"230":2,"302":2,"335":4,"396":2,"400":4,"424":30,"434":2}}],["||",{"2":{"12":2,"21":2,"42":2,"43":2,"114":10,"125":2,"255":6,"279":8,"297":2,"318":12,"319":2,"324":4,"357":2,"507":2,"512":1,"527":2,"577":4,"578":4}}],["yield",{"2":{"524":4,"525":6}}],["y2=",{"2":{"478":2}}],["y1=",{"2":{"478":2}}],["yanglbme",{"2":{"396":2}}],["yarn",{"2":{"396":4}}],["yml",{"2":{"396":1}}],["youtube",{"2":{"588":1}}],["you",{"2":{"234":2,"235":1}}],["your",{"2":{"234":1}}],["y=",{"2":{"178":4,"478":2}}],["yellow",{"2":{"84":2,"125":2,"481":2}}],["year",{"2":{"46":4,"268":2,"294":4}}],["y",{"2":{"51":2,"55":2,"191":1,"267":4,"274":1,"297":12,"345":2,"389":6,"402":8,"416":1,"418":2,"532":24,"577":2,"578":50,"580":4}}],["yum",{"2":{"51":8,"70":1}}],["工作原理",{"0":{"50":1}}],["集中快速管理多个容器",{"2":{"65":1}}],["集中存放镜像的场所",{"2":{"49":1}}],["集合里面也只会存在一个",{"2":{"322":2}}],["集合里面只会存在一个",{"2":{"322":2}}],["集合名称",{"2":{"7":2}}],["集合相关操作",{"0":{"2":1}}],["仓库",{"2":{"49":1,"396":2}}],["简化后",{"2":{"544":2}}],["简化",{"2":{"326":2,"539":4}}],["简化读取方式",{"2":{"270":2}}],["简单类型",{"2":{"515":1}}],["简单易用",{"2":{"485":1}}],["简单递归",{"0":{"280":1},"1":{"281":1,"282":1,"283":1,"284":1,"285":1}}],["简单理解",{"2":{"271":1}}],["简单分支",{"0":{"245":1}}],["简单的说",{"2":{"147":2}}],["简单上传文件",{"0":{"44":1},"1":{"45":1,"46":1}}],["简写",{"2":{"114":2,"174":2}}],["简写形式",{"2":{"86":2,"117":1}}],["简易的linux环境",{"2":{"49":1}}],["用非递归方式实现二叉树深度优先遍历",{"2":{"543":2}}],["用css3实现饼图",{"0":{"481":1}}],["用的443端口",{"2":{"469":1}}],["用的是80端口",{"2":{"469":1}}],["用给定函数创建新字符串",{"0":{"371":1}}],["用法类似",{"2":{"526":1}}],["用法类似viewchildren",{"2":{"106":1}}],["用法",{"0":{"361":1,"369":1,"379":1,"389":1,"393":1,"523":1},"1":{"362":1,"363":1,"364":1,"365":1,"370":1,"371":1,"372":1,"373":1,"374":1,"375":1,"380":1,"381":1,"382":1,"383":1,"384":1,"385":1,"391":1},"2":{"526":1}}],["用额外对象记录当前项",{"2":{"326":2}}],["用filter去重",{"2":{"316":2}}],["用set去重",{"2":{"316":2}}],["用",{"2":{"279":1,"477":1}}],["用p",{"2":{"270":2}}],["用来描述真实",{"2":{"560":1}}],["用来控制输出目录结构",{"2":{"440":2}}],["用来设置引用模块",{"2":{"418":2}}],["用来设置编译后的文件是否使用严格模式",{"2":{"414":2}}],["用来设置属性",{"2":{"270":2}}],["用来指定编译后文件所在的目录",{"2":{"414":2}}],["用来指定项目所用的库",{"2":{"414":2}}],["用来指定ts被编译为es的版本",{"2":{"414":2}}],["用来表示不需要被编译的文件目录",{"2":{"414":2}}],["用来表示指定哪些ts文件需要被编译",{"2":{"414":2}}],["用来检查一个对象的",{"2":{"277":2}}],["用来检查两个值的关系是否成立",{"2":{"256":2}}],["用来比较两个值是否相等",{"2":{"257":2}}],["用来渲染",{"2":{"128":2}}],["用index也是可以的",{"2":{"147":2}}],["用index作为key可能会引发的问题",{"2":{"147":2}}],["用于将对象转换成可操作的基本类型值",{"2":{"533":1}}],["用于将jsx转为js",{"2":{"139":2}}],["用于解析非相对模块名称的基目录",{"2":{"440":2}}],["用于类型检查",{"2":{"412":2}}],["用于抽取类的共同特点",{"2":{"411":1}}],["用于检查的是对象的原型链上是否有该类",{"2":{"277":1}}],["用于向已经存在的远程仓库中添加一个新的",{"2":{"211":1}}],["用于添加一个新的远程仓库",{"2":{"211":1}}],["用于支持react操作dom",{"2":{"139":2}}],["用于可能为空的引用需要使用时",{"2":{"133":1}}],["用于改变dom元素的外观或行为的指令",{"2":{"119":1}}],["用于子组件传值给父组件",{"2":{"94":1}}],["用于父组件传值给子组件",{"2":{"94":1}}],["用于指定run",{"2":{"61":2}}],["用于创建容器",{"2":{"49":1}}],["用户交互",{"2":{"444":1}}],["用户id",{"2":{"61":2}}],["用户组",{"2":{"61":2}}],["用户名",{"2":{"61":2,"396":2}}],["用户的登录状态",{"2":{"42":2}}],["用户的信息对象",{"2":{"43":2}}],["用户的信息",{"2":{"42":2}}],["用户模型",{"2":{"13":2}}],["镜像id",{"2":{"59":2}}],["镜像版本号",{"2":{"55":4}}],["镜像名",{"2":{"55":2,"62":4,"63":2}}],["镜像创建出来的虚拟化运行环境容器实例",{"2":{"49":1}}],["镜像",{"0":{"55":1},"2":{"49":1}}],["镜像小",{"2":{"48":1}}],["基本类型忽略",{"2":{"498":1}}],["基本选项",{"2":{"440":2}}],["基本上没有浏览器原生支持es6的模块系统",{"2":{"430":1}}],["基本配置",{"0":{"413":1},"1":{"414":1,"415":1,"416":1,"417":1,"418":1,"419":1,"420":1,"421":1,"422":1,"423":1}}],["基本思路",{"2":{"318":1}}],["基本数据类型",{"0":{"316":1}}],["基本概念",{"0":{"162":1}}],["基本双向绑定",{"0":{"116":1}}],["基本组成",{"0":{"49":1}}],["基于es6module规范",{"2":{"535":1}}],["基于",{"2":{"516":1}}],["基于web",{"2":{"497":1}}],["基于当前镜像的镜像去构建的时候才会在from后执行",{"2":{"61":2}}],["基于什么镜像什么版本作为模版",{"2":{"61":2}}],["基础类型",{"0":{"398":1},"1":{"399":1,"400":1}}],["基础语法",{"0":{"397":1},"1":{"398":1,"399":1,"400":1,"401":1,"402":1}}],["基础命令",{"0":{"72":1}}],["基础镜像",{"2":{"61":2}}],["基础模型",{"2":{"13":2}}],["更多无限可能",{"2":{"497":1}}],["更多配置可查看官网配置文档",{"2":{"229":1}}],["更好的页面性能",{"2":{"485":1}}],["更像是",{"2":{"129":2}}],["更快的应用交付和平缓迁移",{"2":{"48":1}}],["更高效的计算资源",{"2":{"48":1}}],["更简单的系统运维",{"2":{"48":1}}],["更新表达式",{"2":{"260":2}}],["更新阶段",{"2":{"147":4}}],["更新成功",{"2":{"37":4}}],["更新数据",{"0":{"37":1}}],["更新匹配到的所有",{"2":{"7":2}}],["更新匹配到的第一条db",{"2":{"7":1}}],["更新匹配到的第一条",{"2":{"7":3}}],["更新多条",{"2":{"7":2}}],["更新",{"0":{"7":1,"11":1}}],["便捷升级和快速扩容",{"2":{"48":1}}],["便捷形式",{"2":{"36":2,"37":2}}],["处不同的提交",{"2":{"213":2}}],["处理数据",{"2":{"577":4}}],["处理数组类型",{"2":{"318":1}}],["处理完",{"2":{"520":2}}],["处理完一个就关闭连接",{"2":{"40":1}}],["处理渲染",{"2":{"449":1}}],["处理图层",{"2":{"445":1}}],["处理方式二",{"2":{"400":2}}],["处理方式一",{"2":{"400":2}}],["处理朴素对象",{"2":{"318":1}}],["处理特殊情况",{"2":{"318":1}}],["处理函数4",{"2":{"247":2}}],["处理函数2",{"2":{"247":2}}],["处理函数1",{"2":{"247":2}}],["处理映射",{"2":{"247":2}}],["处理也复杂",{"0":{"247":1}}],["处理不同",{"0":{"246":1}}],["处理代码兼容性",{"2":{"149":1}}],["处处运行",{"2":{"47":1}}],["装载在dokcer容器引擎上",{"2":{"47":1}}],["判断程序没有执行完就将本次结果传入下一步进入下一次递归",{"2":{"525":2}}],["判断当前是否存在等待执行的延时函数",{"2":{"520":2}}],["判断函数的参数是否存在",{"2":{"512":1}}],["判断对象的属性是否存在",{"2":{"512":1}}],["判断过程",{"2":{"471":1}}],["判断前面内容是",{"2":{"350":2}}],["判断新数组不存在当前项",{"2":{"326":2}}],["判断目标资源是否命中",{"2":{"471":1}}],["判断目标在数组中相同的",{"2":{"326":2}}],["判断目录是否存在",{"2":{"46":2}}],["判断数组是否相等",{"2":{"318":2}}],["判断数组长度",{"2":{"313":2}}],["判断基本类型是否相等",{"2":{"318":2}}],["判断",{"2":{"318":2,"350":2,"559":2}}],["判断类型是否一致",{"2":{"318":2}}],["判断参数是否为函数",{"2":{"315":2}}],["判断并处理返回值",{"2":{"309":4}}],["判断并分别处理返回值为promise",{"2":{"309":1}}],["判断是否是文件夹",{"2":{"599":2}}],["判断是否所有的请求都已完成",{"2":{"494":2}}],["判断是否为对象",{"2":{"316":2}}],["判断是否为最后一条数据",{"2":{"159":2}}],["判断是不是初始态",{"2":{"304":4}}],["判断合并后的数组长度",{"2":{"292":2}}],["判断用户提交的登录信息是否正确",{"2":{"42":2}}],["后者有则返回后者",{"2":{"554":1}}],["后者将覆盖前者的属性或方法",{"2":{"554":1}}],["后者的值将对前者的值进行扩展",{"2":{"554":1}}],["后代",{"2":{"476":1}}],["后续的重复元素位置与indexof返回的位置不相等",{"2":{"364":2}}],["后续的重复元素位置与indexof返回的位置相等",{"2":{"364":2}}],["后续所有组件都是基于根组件的",{"2":{"82":2}}],["后序遍历",{"2":{"299":3}}],["后移",{"2":{"290":2}}],["后移索引变为preindex+1",{"2":{"290":1}}],["后的最小值得索引",{"2":{"288":2}}],["后自增",{"2":{"254":2}}],["后",{"2":{"214":2}}],["后面命令覆盖",{"2":{"61":2}}],["后台守护启动",{"2":{"57":1}}],["后台守护启动docker",{"2":{"57":1}}],["后台运行",{"2":{"56":2}}],["后端改动了大量的关联关系",{"2":{"609":1}}],["后端代码",{"0":{"46":1}}],["后端接收的参数名",{"2":{"45":2}}],["后不要写额外代码",{"2":{"29":1}}],["未设置include时",{"2":{"439":1}}],["未开启strictnullchecks",{"2":{"434":2}}],["未处理的null和undefined经常会导致bug的产生",{"2":{"434":1}}],["未知类型不能直接赋值给其他变量",{"2":{"400":2}}],["未知类型",{"2":{"400":2}}],["未知的错误",{"2":{"43":2}}],["未收集",{"2":{"326":2}}],["未停止",{"2":{"56":2}}],["未传过",{"2":{"14":1}}],["失败状态",{"2":{"303":2,"304":2}}],["失败",{"2":{"239":2,"242":2,"313":2,"315":2,"610":2}}],["失败执行",{"2":{"239":2}}],["失败后产生的错误",{"2":{"43":2}}],["失败为undefined",{"2":{"16":2}}],["捕获异常",{"0":{"242":1}}],["捕获解析",{"2":{"43":2}}],["捕获项目异常错误的中间件",{"2":{"29":1}}],["并去找到npm",{"2":{"563":1}}],["并对其进行修改和优化",{"2":{"548":1}}],["并执行它们的",{"2":{"548":1}}],["并执行person函数",{"2":{"498":2}}],["并访问该节点",{"2":{"544":1}}],["并发请求函数",{"2":{"494":2}}],["并继承被",{"2":{"491":1}}],["并返回一个新的promise对象",{"2":{"529":1}}],["并返回给",{"2":{"450":1}}],["并返回数组",{"2":{"387":1}}],["并请求",{"2":{"449":1}}],["并在每个文件里加入",{"2":{"440":2}}],["并在每次迭代时在",{"2":{"392":1}}],["并在并命令行执行npm",{"2":{"421":1}}],["并在超出容量时删除最久未被使用的元素",{"2":{"296":2}}],["并转换为整数数组",{"0":{"391":1}}],["并生成树状结构",{"2":{"357":2}}],["并集",{"0":{"320":1,"322":1,"326":1},"1":{"321":1,"322":1,"323":1,"324":1,"325":1,"326":1,"327":1,"328":1}}],["并处理异步事件",{"2":{"293":2}}],["并选取中心轴的值",{"2":{"289":2}}],["并不为元素预留空间",{"2":{"479":1}}],["并不是所有函数里的代码都有返回值时",{"2":{"440":2}}],["并不安全",{"2":{"270":1}}],["并不会生成一个排好序的新数组",{"2":{"387":1}}],["并不会等待所有异步操作执行完",{"2":{"243":2}}],["并不会显示",{"2":{"121":2}}],["并将全局代码解析执行完成后",{"2":{"456":1}}],["并将他们统一存储到一个数组中返回",{"2":{"264":2}}],["并将其写入到",{"2":{"221":1}}],["并将其添加到暂存区",{"2":{"216":1}}],["并",{"2":{"234":1,"509":2}}],["并根据",{"2":{"221":1}}],["并自动生成变更日志",{"2":{"218":1}}],["并开启交互模式",{"2":{"210":2}}],["并可以指定格式",{"2":{"132":1}}],["并且要求浏览器在下次重绘之前调用指定的回调函数更新动画",{"2":{"526":1}}],["并且等待回调执行的时候进入下一次递归",{"2":{"525":2}}],["并且实现了",{"2":{"507":1}}],["并且通常比位图更小",{"2":{"486":1}}],["并且可以让开发者自己控制管理缓存的内容以及版本",{"2":{"497":1}}],["并且可以被无限放大或缩小而不会失去精度",{"2":{"484":1}}],["并且可以在不修改一个类的前提对其进行扩展",{"2":{"271":1}}],["并且不加单位",{"2":{"302":2}}],["并且将新对象设置为函数中的this",{"2":{"278":1}}],["并且会返回resolve的结果",{"2":{"240":1}}],["并且分别有",{"2":{"213":2}}],["并且总数据不能小于1",{"2":{"159":2}}],["并且位于根模块的",{"2":{"82":2}}],["并且只从一个根组件开始引导",{"2":{"82":2}}],["并把它们逐个插入到浏览器的",{"2":{"82":2}}],["并使用",{"2":{"43":2}}],["并通过浏览器解析渲染出来",{"2":{"484":1}}],["并通过该实例调用到原型上的render方法",{"2":{"140":1}}],["并通过",{"2":{"43":2}}],["的回调参数",{"2":{"615":2}}],["的示例代码",{"2":{"615":1}}],["的问题",{"2":{"588":1}}],["的组件是以",{"2":{"560":1}}],["的内部环境",{"2":{"548":1}}],["的前面",{"2":{"547":1}}],["的时间复杂度为",{"2":{"543":1,"544":1}}],["的时候",{"2":{"475":1}}],["的异同",{"0":{"533":1}}],["的实例",{"2":{"499":1}}],["的实例function",{"2":{"499":1}}],["的变化",{"2":{"466":1}}],["的变化几乎不会影响渲染主线程",{"2":{"466":1}}],["的效率高",{"2":{"466":1}}],["的本质就是重新根据分层信息计算了绘制指令",{"2":{"466":1}}],["的本质就是重新计算",{"2":{"465":1}}],["的操作",{"2":{"465":1,"560":1}}],["的工作是在预解析线程中进行的",{"2":{"456":1}}],["的响应报文也由四部分组成",{"2":{"454":1}}],["的系统调用",{"2":{"450":1}}],["的标准",{"2":{"448":1}}],["的计时器最终调用的是操作系统的函数",{"2":{"448":1}}],["的路径映射的列表",{"2":{"440":2}}],["的返回值类型",{"2":{"400":1}}],["的返回值类型字面量\\t",{"2":{"400":1}}],["的顺序",{"2":{"388":1}}],["的顺序保存原样",{"2":{"388":1}}],["的相对位置不变",{"2":{"388":1}}],["的数组",{"2":{"378":1}}],["的第一个参数",{"2":{"378":2}}],["的差集",{"2":{"324":2}}],["的元素组进行排序",{"2":{"291":2}}],["的元素编为一个组",{"2":{"291":2}}],["的元数据中指定的样式只会对该组件的模板生效",{"2":{"100":1}}],["的形式添加的属性",{"2":{"274":1}}],["的代码",{"2":{"271":1}}],["的插件",{"2":{"221":1}}],["的提交",{"2":{"210":1}}],["的提交git",{"2":{"210":1}}],["的合并简写形式",{"2":{"173":1}}],["的diff比较",{"2":{"147":2}}],["的方式去获取",{"2":{"141":1}}],["的",{"2":{"129":2,"440":2,"477":1,"554":1}}],["的优点包括",{"2":{"560":1}}],["的优点",{"2":{"125":1}}],["的有效期",{"2":{"43":2}}],["的所有元素组成",{"2":{"359":1}}],["的所有",{"2":{"4":2}}],["将相对于该先祖容器定位",{"2":{"605":1}}],["将生成的静态文件放在上级目录下",{"2":{"573":1}}],["将生成的静态文件放在当前目录下",{"2":{"573":1}}],["将生成的静态文件放在根目录下",{"2":{"573":1}}],["将后者的",{"2":{"554":1}}],["将后者的生命周期钩子函数拼接到前者的生命周期钩子函数",{"2":{"554":1}}],["将canvas的宽高设置为图像的宽高",{"2":{"551":2}}],["将文件转换为模块",{"2":{"548":1}}],["将各种类型的文件",{"2":{"548":1}}],["将该节点的所有子节点入队",{"2":{"544":1}}],["将队头节点出队",{"2":{"544":1}}],["将根节点入队",{"2":{"544":1}}],["将数字转为整数",{"2":{"513":1}}],["将this关键字指向新对象",{"2":{"498":2}}],["将一些不常更新的内容缓存在浏览器",{"2":{"497":1}}],["将一个可能是undefined或null的变量赋给一个有确切类型的变量时",{"2":{"134":1}}],["将任务并发分发到多个web",{"2":{"492":1}}],["将页面上非关键图片设置为延迟加载",{"2":{"486":1}}],["将图片缓存在用户的浏览器中",{"2":{"486":1}}],["将图片存储在专门的cdn",{"2":{"486":1}}],["将图片大小进行压缩",{"2":{"486":1}}],["将多张小图片合并到一张大图中",{"2":{"486":1}}],["将多个小图片合并为一个base64编码字符串",{"2":{"485":1}}],["将多维数组转化为一维",{"0":{"383":1}}],["将子元素都margin改为父元素的padding",{"2":{"482":1}}],["将每个快变成位图",{"2":{"463":1}}],["将每个文件做为单独的模块",{"2":{"440":2}}],["将布局渲染到屏幕上",{"2":{"455":1}}],["将事先传递的回调函数包装成任务",{"2":{"447":1}}],["将代码与",{"2":{"440":2}}],["将代码合并为一个文件",{"2":{"414":2}}],["将输出文件合并为一个文件",{"2":{"440":2}}],["将不含oss的替换",{"0":{"352":1}}],["将链接替换为想要的网址",{"0":{"351":1}}],["将模式串设置为",{"2":{"301":2}}],["将新节点添加到链表头部",{"2":{"296":2}}],["将访问的元素删除并重新添加到最前面",{"2":{"296":2}}],["将构造函数的prototype属性设置为新对象的原型",{"2":{"278":1}}],["将会发生这4件事",{"2":{"278":1}}],["将需要保护的数据设置为私有",{"2":{"270":1}}],["将时间转换为本地的字符串",{"2":{"268":2}}],["将日期转换为本地的字符串\\t\\t",{"2":{"268":2}}],["将map转换为数组",{"2":{"265":1}}],["将其设置为",{"2":{"221":1}}],["将更改提交到正确的分支上",{"2":{"217":1}}],["将错误分支上的提交移动到正确分支上",{"2":{"217":1}}],["将指定的提交复制到当前分支",{"2":{"216":1}}],["将render返回的虚拟dom转为真实dom",{"2":{"140":1}}],["将返回的虚拟dom转为真实dom",{"2":{"139":2}}],["将值转成json格式",{"2":{"132":1}}],["将ngmodeloptions",{"2":{"118":1}}],["将组件到模版",{"2":{"113":2}}],["将组件试图添加到试图树中",{"2":{"113":2}}],["将主机目录下的文件拷贝到镜像",{"2":{"61":2}}],["将宿主机的文件拷贝到镜像",{"2":{"61":2}}],["将",{"2":{"43":2,"455":1}}],["将登录成功后的用户信息",{"2":{"42":2}}],["^零+",{"2":{"302":2}}],["^$",{"2":{"302":2}}],["^",{"2":{"43":2,"157":2,"287":6,"302":2,"342":4,"345":2,"346":6,"348":2,"350":2}}],["^p",{"2":{"4":2}}],["挂载到",{"2":{"43":2}}],["字体排印",{"0":{"196":1},"1":{"197":1,"198":1,"199":1,"200":1,"201":1,"202":1,"203":1}}],["字体大小",{"2":{"116":8}}],["字符属性",{"2":{"345":2}}],["字符中",{"2":{"43":2}}],["字符串常用方法",{"0":{"530":1},"1":{"531":1,"532":1,"533":1}}],["字符串数组",{"2":{"399":2}}],["字符串数组每项长度",{"0":{"391":1}}],["字符串匹配和替换",{"2":{"338":1}}],["字符串搜索算法",{"0":{"301":1}}],["字符串形式",{"2":{"145":4}}],["字符串",{"2":{"43":4}}],["字符串解析还原成",{"2":{"43":2}}],["字段",{"2":{"4":2}}],["分包和共享依赖",{"0":{"571":1}}],["分块工作交给多个线程同时进行",{"2":{"462":1}}],["分块tiling",{"0":{"462":1}}],["分块",{"2":{"455":1}}],["分层layer",{"0":{"460":1}}],["分层",{"2":{"455":1}}],["分支后",{"2":{"396":2}}],["分支名",{"2":{"206":4,"209":2,"212":2}}],["分奇偶情况求中位数",{"2":{"292":2}}],["分隔符乱码问题",{"0":{"225":1}}],["分为公开库和私有库",{"2":{"49":1}}],["分别是",{"2":{"43":2,"422":1,"455":1}}],["分页与搜索条件记录并回显优化",{"0":{"154":1},"1":{"155":1,"156":1,"157":1,"158":1}}],["分页",{"2":{"4":1}}],["签名",{"2":{"43":1}}],["服务开启",{"0":{"613":1}}],["服务端通多用户信息生成",{"2":{"43":1}}],["服务器打包预览环境变量",{"2":{"573":2}}],["服务器端等",{"2":{"560":1}}],["服务器端响应",{"0":{"454":1}}],["服务器与浏览器之间的中间人",{"2":{"496":1}}],["服务器与普通电脑",{"2":{"19":1}}],["服务器上",{"2":{"486":1}}],["服务器上安装了",{"2":{"19":1}}],["服务器会返回http状态码304",{"2":{"471":1}}],["服务器",{"2":{"450":1,"497":1}}],["服务器必须得提供并返回该域名的",{"2":{"450":1}}],["服务器发起域名解析请求",{"2":{"450":1}}],["服务器响应",{"2":{"449":1}}],["服务器通过还原",{"2":{"43":1}}],["服务器挨个处理访问队列里的访问",{"2":{"40":1}}],["服务器不会保留每次",{"2":{"40":1}}],["服务器运行在localhost",{"2":{"22":4}}],["服务器运行在",{"2":{"20":2}}],["服务器监听到请求",{"2":{"20":2}}],["服务器实例",{"2":{"20":1}}],["服务器步骤",{"0":{"20":1}}],["服务器软件",{"2":{"19":1}}],["服务器操作",{"0":{"19":1},"1":{"20":1,"21":1,"22":1}}],["需要重新设置对齐线",{"2":{"611":2}}],["需要重新计算布局树",{"2":{"465":1}}],["需要手动从flexsearch中引入",{"2":{"602":1}}],["需要手动执行",{"2":{"205":1}}],["需要在",{"2":{"590":1,"602":1}}],["需要在边框内留白",{"2":{"482":1}}],["需要在边框外留白",{"2":{"482":1}}],["需要调节定时器时间使比较不突兀",{"2":{"584":2}}],["需要编写相应的判断程序",{"2":{"496":1}}],["需要自己编写代码来实现各种绘图功能",{"2":{"484":1}}],["需要更新属性",{"2":{"466":1}}],["需要包含的类型声明文件名列表",{"2":{"440":2}}],["需要设置lib选项",{"2":{"431":1}}],["需要隐含当any需要明确指出",{"2":{"428":2}}],["需要同时启用",{"2":{"427":1}}],["需要进行编译才能转换为javascript代码",{"2":{"425":1}}],["需要添加一些额外的检查",{"2":{"316":1}}],["需要一个对象作为参数",{"2":{"268":2}}],["需要",{"0":{"219":1}}],["需要执行此命令进行变基",{"2":{"213":1}}],["需要执行此命令进行变基git",{"2":{"213":1}}],["需要再次提交",{"0":{"213":1}}],["需要拉取合并原仓库的更新",{"2":{"211":1}}],["需要多次推送",{"2":{"211":1}}],["需要给相邻元素添加",{"2":{"180":2}}],["需要通过绑定",{"2":{"141":1}}],["需要做额外配置",{"2":{"42":1}}],["需要配合",{"2":{"42":1}}],["方便同时更新",{"2":{"211":1}}],["方案",{"2":{"584":1}}],["方案四",{"2":{"551":1}}],["方案三",{"2":{"551":1}}],["方案二",{"0":{"250":1},"2":{"159":2,"279":2,"551":1,"574":2,"585":2}}],["方案一",{"0":{"249":1},"2":{"159":3,"279":2,"551":1,"574":2,"583":1,"585":2}}],["方法中谁调用就指向谁",{"2":{"517":1}}],["方法名",{"2":{"404":2}}],["方法调用回调函数",{"2":{"392":1}}],["方法用原地算法对数组的元素进行排序",{"2":{"387":1}}],["方法被调用的数组",{"2":{"368":2}}],["方法三",{"2":{"287":2}}],["方法等",{"2":{"274":1}}],["方法二",{"0":{"217":1,"494":1},"1":{"219":1},"2":{"116":1,"211":1,"287":2,"302":1,"322":2,"324":2,"327":2,"520":2,"539":2}}],["方法一",{"0":{"216":1,"493":1},"2":{"116":1,"211":1,"287":2,"302":1,"322":2,"327":2,"520":2,"539":2}}],["方法生成",{"2":{"43":2}}],["方法",{"2":{"42":2,"112":1,"266":2,"275":1,"283":2,"408":2,"507":1,"533":1,"548":1}}],["方式三",{"0":{"504":1}}],["方式添加的方法",{"2":{"274":1}}],["方式二",{"0":{"239":1,"503":1},"2":{"36":2,"37":2,"527":2}}],["方式一",{"0":{"238":1,"502":1},"2":{"36":2,"37":2,"527":2}}],["信息安全",{"2":{"469":1}}],["信息不安全",{"2":{"469":1}}],["信息",{"2":{"42":2}}],["响应式系统不需要深度遍历就可以对整个对象监听",{"2":{"561":1}}],["响应体",{"2":{"454":1}}],["响应头",{"2":{"454":1}}],["响应行",{"2":{"454":1}}],["响应给客户端",{"2":{"42":2}}],["响应文件内容",{"0":{"22":1}}],["从入口文件抽离",{"2":{"571":2}}],["从目标元素向外传播",{"2":{"528":1}}],["从根元素",{"2":{"528":1}}],["从左往右",{"2":{"509":2}}],["从本地缓存里面读取文件",{"2":{"471":1}}],["从一个切换到另一个",{"2":{"443":1}}],["从另一个配置文件里继承配置",{"2":{"440":2}}],["从而减少了不必要的",{"2":{"560":1}}],["从而实现多个异步操作的顺序执行和数据传递",{"2":{"529":1}}],["从而实现快速匹配",{"2":{"301":2}}],["从而形成一个promise链",{"2":{"529":1}}],["从而保持正方形",{"2":{"490":1}}],["从而加快加载速度",{"2":{"486":1}}],["从而最大限度的保证了单线程的流畅运行",{"2":{"447":1}}],["从而导致消息队列中的很多其他任务无法得到执行",{"2":{"447":1}}],["从而导致编译报错",{"2":{"425":1}}],["从而更愉快的从js转为ts开发",{"2":{"425":1}}],["从索引0开始",{"2":{"378":1}}],["从索引0开始arr",{"2":{"378":1}}],["从索引1的地方开始执行callback方法",{"2":{"378":2}}],["从后往前分割",{"2":{"302":2}}],["从后端服务器拿到数据",{"2":{"111":1}}],["从小到大",{"2":{"290":2}}],["从大到小",{"2":{"290":2}}],["从stash中取出暂存的代码修改",{"2":{"212":1}}],["从stash中取出暂存的代码修改git",{"2":{"212":1}}],["从这本书字里行间可以感受到作者也是个有趣的灵魂",{"2":{"181":1}}],["从query中获取分页信息",{"2":{"157":2}}],["从v11开始",{"2":{"113":1}}],["从容停止",{"2":{"72":1}}],["从tar包中恢复成镜像",{"2":{"59":2}}],["从搬家到搬楼",{"2":{"47":1}}],["从",{"2":{"42":2,"440":2}}],["从下一切片开始传",{"2":{"14":1}}],["中国标准时间",{"2":{"533":2}}],["中如果结束索大于起始索引",{"2":{"532":1}}],["中可以做拦截客户端的请求",{"2":{"496":1}}],["中的一个节点",{"2":{"560":1}}],["中的",{"2":{"506":1}}],["中的外部",{"2":{"456":1}}],["中的计时器能做到精确计时吗",{"2":{"448":1}}],["中所有的配置信息都应该写在module",{"2":{"418":2}}],["中序遍历",{"2":{"299":3}}],["中文版",{"2":{"588":1}}],["中文香港",{"2":{"268":2}}],["中文中国",{"2":{"268":2}}],["中受控组件的是指表单元素的控制是交给",{"2":{"141":1}}],["中每个条目的值",{"2":{"122":2}}],["中获取用户的名称",{"2":{"42":2}}],["中",{"0":{"491":1},"2":{"42":2,"82":2,"129":4,"392":1,"483":1,"543":2,"544":2,"573":3}}],["中间件分类",{"2":{"29":1}}],["中间件函数必须有next",{"2":{"29":1}}],["中间件注意事项",{"2":{"29":1}}],["中间件mw2被执行了",{"2":{"29":2}}],["中间件mw1被执行了",{"2":{"29":4}}],["中间件本质",{"2":{"29":1}}],["中间件",{"0":{"29":1},"2":{"42":2}}],["中间的",{"2":{"15":2}}],["中间的区块",{"2":{"15":2}}],["登录接口",{"2":{"43":2}}],["登录成功",{"2":{"42":2,"43":4}}],["登录失败",{"2":{"42":2,"43":4}}],["登录的",{"2":{"42":2}}],["提取公共代码等",{"2":{"548":1}}],["提高了性能",{"2":{"560":1}}],["提高访问体验",{"2":{"497":1}}],["提高用户体验",{"0":{"486":1},"2":{"486":1}}],["提高页面的加载速度和响应性",{"2":{"486":1}}],["提高页面性能",{"2":{"485":1}}],["提高页面加载速度",{"2":{"485":1,"486":2}}],["提出了java等服务器端语言早就有的装饰器模式",{"2":{"426":1}}],["提交代码时",{"2":{"221":1}}],["提交代码并生成变更日志",{"2":{"221":1}}],["提交规范和",{"2":{"218":1}}],["提交规范化",{"0":{"218":1},"1":{"219":1,"220":1,"221":1}}],["提交信息校验脚手架",{"2":{"218":1}}],["提交过程的不同阶段自动运行脚本",{"2":{"218":1}}],["提交过来的表单数据",{"2":{"42":2}}],["提交完未推送前",{"0":{"213":1},"2":{"213":1}}],["提升运算速率",{"2":{"463":1}}],["提升效率",{"2":{"345":2}}],["提升项目性能",{"2":{"149":1}}],["提升性能",{"2":{"122":2}}],["提供",{"2":{"456":1}}],["提供setter和getter方法来开放对数据的操作",{"2":{"270":1}}],["提供别名",{"2":{"95":2}}],["提供各种服务",{"2":{"78":1}}],["提示",{"2":{"14":1}}],["提示已弃用",{"2":{"5":2}}],["解法三",{"2":{"283":2,"512":2}}],["解法二",{"2":{"283":2,"512":2}}],["解法一",{"2":{"283":2,"512":2}}],["解释",{"2":{"167":1,"168":1,"527":1}}],["解析到错误",{"2":{"590":1}}],["解析成对象",{"2":{"456":1}}],["解析的根本原因",{"2":{"456":2}}],["解析过程中遇到",{"2":{"456":1}}],["解析器负责识别处理的语法元素",{"2":{"129":2}}],["解析失败导致的",{"2":{"43":2}}],["解析",{"0":{"425":1,"456":1,"457":1},"1":{"426":1,"427":1,"428":1,"429":1,"430":1,"431":1,"432":1,"433":1,"434":1,"435":1,"436":1,"437":1,"438":1,"439":1,"440":1},"2":{"42":2,"43":2,"279":1,"338":1,"445":2,"455":3,"456":1}}],["解决构造函数浪费内存问题",{"2":{"499":1}}],["解决链式调用",{"2":{"315":2}}],["解决异常",{"2":{"308":4,"310":2}}],["解决后输出",{"2":{"307":1}}],["解决前输出",{"2":{"307":1}}],["解决同步代码需要等待执行问题",{"0":{"307":1}}],["解决方案",{"2":{"279":1,"610":2}}],["解决方法",{"2":{"243":1,"349":2,"586":1,"605":1}}],["解决冲突",{"2":{"217":1}}],["解决痛点",{"0":{"47":1}}],["解决中文乱码两种方法",{"2":{"20":2}}],["解决文件路径动态拼接问题",{"2":{"16":1}}],["解决",{"0":{"594":1},"2":{"16":1,"526":1}}],["托管静态页面",{"2":{"42":2}}],["认证弊端",{"2":{"42":1}}],["认证",{"0":{"42":1,"43":1},"2":{"42":1}}],["注",{"2":{"450":1}}],["注2",{"2":{"405":1}}],["注1",{"2":{"405":1}}],["注册svg",{"2":{"578":2}}],["注册iconfont",{"2":{"578":2}}],["注册iconfont节点",{"2":{"578":4}}],["注册虚线动画",{"2":{"578":2}}],["注册实线动画",{"2":{"578":2}}],["注册节点添加label图形时动态计算label位置",{"2":{"580":2}}],["注册节点",{"0":{"578":1}}],["注册将",{"2":{"43":2}}],["注册成功",{"2":{"9":2}}],["注意仓库名和路径名不一致问题",{"2":{"396":2}}],["注意在",{"2":{"396":2}}],["注意在此项目的",{"2":{"396":2}}],["注意替换为你的",{"2":{"396":8}}],["注意点",{"2":{"308":1}}],["注意大小写",{"2":{"146":1}}],["注意与其他组件发生样式冲突",{"2":{"101":1}}],["注意",{"0":{"219":1},"2":{"41":1,"43":2,"85":2,"111":1,"137":1,"145":1,"147":2,"235":1,"433":2,"434":1}}],["自带",{"2":{"555":2}}],["自适应方案",{"2":{"488":1}}],["自身立即结束任务的执行",{"2":{"447":1}}],["自身",{"2":{"277":2}}],["自增和自减",{"0":{"254":1}}],["自己解决自己的",{"2":{"594":1}}],["自己的pwsh",{"2":{"231":2}}],["自己的安装目录",{"2":{"224":2,"227":2}}],["自己用户名",{"2":{"222":1}}],["自动生成侧边栏sidebar",{"2":{"599":2}}],["自动生成html",{"2":{"418":2}}],["自动响应浏览器更新",{"2":{"418":2}}],["自动部署",{"0":{"394":1},"1":{"395":1,"396":1}}],["自动",{"2":{"197":2}}],["自动填充",{"2":{"165":1}}],["自动打开浏览器等",{"2":{"149":1}}],["自动刷新",{"2":{"149":1}}],["自动订阅模板中的observable或promise",{"2":{"132":1}}],["自动发送",{"2":{"41":1}}],["自定义样式覆盖就好啦",{"2":{"605":1}}],["自定义目录不能根据视口固定",{"0":{"605":1}}],["自定义的类名快捷键不能写在变体后面",{"2":{"586":1}}],["自定义的模块",{"2":{"80":2}}],["自定义节点和节点动画",{"2":{"578":2}}],["自定义高阶函数",{"0":{"390":1},"1":{"391":1,"392":1,"393":1}}],["自定义高亮指令",{"0":{"125":1}}],["自定义对象",{"2":{"278":1}}],["自定义主题",{"0":{"229":1}}],["自定义下划线",{"0":{"199":1}}],["自定义滚动条",{"0":{"177":1},"2":{"177":2}}],["自定义方法",{"2":{"143":2}}],["自定义组件",{"2":{"141":1}}],["自定义unless指令",{"0":{"126":1}}],["自定义指令",{"0":{"124":1},"1":{"125":1,"126":1}}],["自定义管道",{"0":{"107":1}}],["自定义属性选择器投影内容",{"2":{"102":2}}],["自定义属性绑定",{"0":{"87":1}}],["自定义网络",{"0":{"64":1}}],["自定义模块",{"2":{"23":1,"26":1}}],["无疑也是一个不错的思路和方法",{"2":{"594":1}}],["无复制内容",{"2":{"574":2}}],["无状态的",{"2":{"452":1}}],["无状态性",{"2":{"40":1}}],["无法做到精确计时",{"2":{"448":1}}],["无法转换",{"2":{"302":2}}],["无法修改",{"2":{"262":1}}],["无需创建实例即可完成对类的修改",{"2":{"275":1}}],["无需真实dom上那么多的属性",{"2":{"137":1}}],["无论放大或缩小都保持清晰度",{"2":{"484":1}}],["无论属性在对象自身还是在原型中",{"2":{"277":1}}],["无论用户是否定义形参",{"2":{"263":2}}],["无论成功失败",{"2":{"239":2}}],["无",{"2":{"197":2}}],["无效的token",{"2":{"43":2}}],["无连接",{"2":{"40":1}}],["九",{"0":{"39":1,"62":1,"311":1,"464":1},"1":{"40":1,"41":1,"42":1,"43":1,"63":1,"64":1},"2":{"302":6}}],["硬删除成功",{"2":{"38":2}}],["硬删除",{"2":{"38":1}}],["返回operate传的实参",{"2":{"540":2}}],["返回不同进制的字符串形式的数值",{"2":{"533":1}}],["返回空",{"2":{"532":1}}],["返回指定索引位的",{"2":{"531":2}}],["返回新创建的对象",{"2":{"498":1}}],["返回的结果是按升序来排列的",{"2":{"388":2}}],["返回数组元素平方后的新数组",{"0":{"370":1}}],["返回数据给客户端",{"2":{"20":2}}],["返回加工后新数组",{"2":{"367":1}}],["返回奇数元素",{"0":{"363":1}}],["返回值",{"2":{"388":3,"533":1}}],["返回值组成的新数组",{"2":{"367":1}}],["返回值是一个新数组",{"2":{"359":1}}],["返回值的判断与处理",{"0":{"309":1}}],["返回a与b数组区别的集合",{"2":{"324":2}}],["返回所有类型的键名",{"2":{"318":2}}],["返回对象自身的所有可枚举的属性的键名",{"2":{"318":2}}],["返回类型约束",{"0":{"311":1}}],["返回给定起止字符串月份中间所有月份",{"0":{"294":1}}],["返回",{"2":{"279":1,"296":10,"507":1,"531":2}}],["返回一个新函数",{"2":{"262":2}}],["返回自增后的值",{"2":{"254":2}}],["返回自增前的值",{"2":{"254":2}}],["返回结果",{"2":{"36":2}}],["否则返回前者",{"2":{"554":1}}],["否则返回false",{"2":{"255":4,"256":2}}],["否则为",{"2":{"430":1}}],["否则为错误对象",{"2":{"16":2}}],["否则不匹配返回",{"2":{"279":1}}],["否则不匹配",{"2":{"279":1}}],["否则不变",{"2":{"159":2}}],["否则比较其他case后的表达式",{"2":{"259":2}}],["否则报错如下",{"0":{"219":1}}],["否则报错er",{"2":{"36":2}}],["否则取计算得到的页",{"2":{"159":2}}],["占位符的数量和表的列数需要一致",{"2":{"36":2}}],["qqssh",{"2":{"234":1}}],["qq",{"2":{"232":2,"234":1}}],["qobj",{"2":{"158":4}}],["q",{"2":{"56":4}}],["q只显示id",{"2":{"55":2}}],["qstr",{"2":{"35":4}}],["queue",{"2":{"493":8,"544":14}}],["querychartdata",{"2":{"577":4}}],["queryselectorall",{"2":{"249":2,"250":2,"536":2}}],["queryaccount",{"2":{"159":2}}],["queryxxx",{"2":{"158":6}}],["queryfn",{"2":{"157":2}}],["querylist中监听子组件变化的回调函数",{"2":{"104":2}}],["querylist",{"2":{"104":6,"106":6}}],["query",{"2":{"7":2,"30":4,"34":2,"35":2,"36":4,"37":4,"38":4,"157":20,"158":2}}],["quicksort",{"2":{"289":6}}],["quit",{"2":{"72":1}}],["quot",{"2":{"4":30,"6":4,"15":32,"20":8,"21":24,"22":88,"37":16,"38":16,"45":8,"46":88,"55":8,"56":8,"61":24,"73":4,"86":28,"87":8,"88":8,"89":72,"90":48,"91":20,"92":24,"93":8,"95":8,"96":8,"102":16,"104":12,"105":12,"106":4,"107":8,"108":20,"109":2,"113":20,"114":40,"116":44,"117":32,"118":32,"121":32,"122":44,"123":136,"126":16,"130":20,"134":4,"137":8,"139":32,"144":16,"145":28,"146":16,"150":8,"151":4,"152":4,"153":4,"157":4,"158":100,"159":8,"168":28,"170":28,"178":64,"211":20,"213":4,"220":12,"221":8,"224":4,"227":4,"231":68,"238":20,"243":16,"262":8,"265":28,"268":28,"269":8,"271":12,"272":4,"276":4,"283":8,"288":4,"295":8,"298":12,"301":16,"302":316,"303":4,"308":28,"310":8,"311":12,"313":8,"314":8,"315":12,"316":12,"318":8,"335":12,"340":4,"341":16,"342":8,"346":20,"347":4,"349":12,"350":8,"357":80,"364":20,"372":4,"396":4,"400":4,"412":8,"414":132,"418":60,"419":24,"420":32,"423":48,"424":72,"426":8,"429":16,"430":16,"432":8,"433":28,"438":4,"439":24,"440":244,"471":2,"478":64,"482":16,"490":4,"491":4,"493":16,"494":28,"523":4,"532":8,"551":36,"571":36,"573":36,"574":40,"577":104,"578":268,"580":16,"584":32,"585":48,"586":20,"587":24,"592":2,"602":20,"609":24,"610":120,"612":4,"613":4,"614":20}}],["测试环境能访问sitemap",{"2":{"590":1}}],["测试代码",{"2":{"494":2}}],["测试数据",{"2":{"319":1}}],["测试示例",{"2":{"318":1}}],["测试连接是否成功",{"2":{"235":1}}],["测试等操作",{"2":{"218":1}}],["测试unless",{"2":{"126":4}}],["测试自定义标题属性",{"2":{"87":2}}],["测试sudo",{"2":{"51":1}}],["测试",{"2":{"34":2,"51":1,"285":2,"293":1,"298":2,"299":3,"313":1,"314":1,"493":2}}],["八",{"0":{"33":1,"61":1,"310":1,"463":1},"1":{"34":1,"35":1,"36":1,"37":1,"38":1},"2":{"302":6}}],["头部投影内容",{"2":{"102":2}}],["头部",{"0":{"32":1},"2":{"43":1}}],["七",{"0":{"30":1,"53":1,"309":1,"462":1},"1":{"31":1,"32":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1,"60":1},"2":{"302":6}}],["错误",{"2":{"440":2}}],["错误级别中间件",{"2":{"29":1}}],["错误为null",{"2":{"18":2}}],["路由组件切换",{"0":{"612":1}}],["路由器的默认行为是从根路径",{"2":{"572":1}}],["路由级别中间件",{"2":{"29":1}}],["路径",{"2":{"414":2}}],["路径模块",{"0":{"17":1}}],["应用",{"0":{"537":1},"2":{"520":1}}],["应用层的协议",{"2":{"452":1}}],["应用是通过引导根模块",{"2":{"82":1}}],["应用级别中间件",{"2":{"29":1}}],["应用场景",{"0":{"338":1},"2":{"0":1}}],["和主机名的传送",{"2":{"590":1}}],["和其他类型平等关系",{"2":{"400":2}}],["和数组相似",{"2":{"263":2}}],["和",{"0":{"560":1},"2":{"29":1,"43":2,"150":1,"174":1,"211":3,"213":2,"240":1,"262":2,"318":2,"322":4,"388":1,"439":1,"455":1,"471":1,"479":1,"495":1,"509":2,"533":2}}],["连接",{"2":{"451":1}}],["连接的建立",{"2":{"451":1}}],["连接数据库并测试",{"2":{"34":1}}],["连接数据库",{"0":{"33":1},"1":{"34":1,"35":1,"36":1,"37":1,"38":1}}],["连接数据库后默认在test库",{"2":{"1":2}}],["连续调用的多个中间件共享",{"2":{"29":1}}],["函数柯里化",{"0":{"539":1},"1":{"540":1,"541":1},"2":{"537":1}}],["函数柯里化传参",{"2":{"146":2}}],["函数体内部使用yield表达式",{"2":{"524":1}}],["函数声明会覆盖其他的同名的变量声明",{"2":{"514":1}}],["函数封装",{"0":{"494":1}}],["函数用于执行不到返回值那一步",{"2":{"400":2}}],["函数时使用的this",{"2":{"368":2}}],["函数的回调中获取本次程序结果",{"2":{"525":2}}],["函数的隐式原型对象",{"0":{"500":1}}],["函数的实参直接在第一个参数后一个一个的列出来",{"2":{"262":1}}],["函数的柯里化",{"2":{"146":1}}],["函数三种调用方式",{"2":{"262":1}}],["函数组件使用props",{"2":{"144":1}}],["函数式组件",{"0":{"139":1},"2":{"139":2}}],["函数",{"2":{"29":1,"378":3,"539":2}}],["函数可以流转关系转交给下一个中间件或路由",{"2":{"29":1}}],["多了的话就显得很麻烦不够优雅",{"2":{"596":1}}],["多次进入详情页",{"2":{"559":2}}],["多边形和文本等基本几何形状来创建",{"2":{"484":1}}],["多维数组",{"2":{"282":2}}],["多态",{"0":{"272":1},"2":{"269":1}}],["多分支优化",{"0":{"244":1},"1":{"245":1,"246":1,"247":1}}],["多重边框",{"0":{"183":1}}],["多个请求并发发出",{"2":{"492":1}}],["多个请求之间相互独立",{"2":{"40":1}}],["多个可进行累加",{"2":{"476":1}}],["多个可选",{"2":{"399":2}}],["多个进程间不能共享资源",{"2":{"443":1}}],["多个比较用",{"2":{"256":2}}],["多个命令时只会生效最后一个",{"2":{"61":2}}],["多个局部中间件",{"2":{"29":1}}],["多条文档",{"2":{"5":1}}],["在组件卸载前",{"2":{"615":2}}],["在组件内容初始化之后调用",{"2":{"109":2}}],["在每次绑定事件前",{"2":{"612":2}}],["在main",{"2":{"609":2}}],["在博客根目录新建scripts目录并创建文件getsidebar",{"0":{"599":1}}],["在package",{"0":{"598":1}}],["在powershell配置项中添加一个配置",{"2":{"231":1}}],["在router对象中",{"2":{"572":1}}],["在render之前调用",{"2":{"147":1}}],["在diff算法中增加了静态标记",{"2":{"561":1}}],["在declarations中的组件默认只能在当前模块中使用",{"2":{"79":2}}],["在activated钩子中",{"2":{"559":2}}],["在序列中排在",{"2":{"547":1}}],["在同一浏览器的相同域名",{"2":{"522":1}}],["在设定的时间内再次触发",{"2":{"518":1}}],["在设置中配置配置自己安装的nerd",{"2":{"230":1}}],["在词法解析阶段就已经明确了未来上下文中必定会有相关变量声明",{"2":{"516":1}}],["在计算机底层都是按照",{"2":{"507":1}}],["在构造函数内部",{"2":{"498":1}}],["在构造函数中",{"2":{"269":2}}],["在web",{"2":{"497":1}}],["在现有样式加上加上新类名",{"2":{"491":4}}],["在编写项目时",{"2":{"487":2}}],["在编译过程中把这些标准库引入",{"2":{"431":1}}],["在服务器代码上设置",{"2":{"471":1}}],["在一次事件循环中",{"2":{"448":1}}],["在消息队列中先进先出",{"2":{"448":1}}],["在这一过程中",{"2":{"458":1}}],["在这种异步模式下",{"2":{"447":1}}],["在这个例子中",{"2":{"301":1}}],["在这个函数中",{"2":{"301":1}}],["在添加新任务时",{"2":{"446":1}}],["在最开始的时候",{"2":{"446":1}}],["在表达式和声明上有隐含的",{"2":{"440":2}}],["在源文件",{"2":{"432":2}}],["在src下创建ts文件",{"2":{"421":1}}],["在es6中的模块化会自动使用严格模式",{"2":{"414":2}}],["在汪汪叫",{"2":{"409":2,"410":2}}],["在没有参数时",{"2":{"388":2}}],["在对象转数字过程中",{"2":{"539":2}}],["在对象中会有一个属性用来存储原型对象",{"2":{"274":1}}],["在对象中可以通过对象的属性来对日期的格式进行配置",{"2":{"268":2}}],["在对文本串和模式串进行匹配时",{"2":{"301":2}}],["在有序数组中找位置",{"2":{"290":1}}],["在原型添加方法",{"2":{"276":2}}],["在类中通过xxx",{"2":{"274":1}}],["在类中通过",{"2":{"274":1}}],["在js中不会检查参数的类型",{"2":{"272":1}}],["在子类中",{"2":{"271":2}}],["在定义函数时可以将参数指定为剩余参数",{"2":{"264":2}}],["在进行运算",{"2":{"251":1}}],["在进行拼接",{"2":{"251":1}}],["在github",{"2":{"233":1}}],["在代码托管平台设置添加公钥",{"0":{"233":1}}],["在环境变量新增oh",{"2":{"230":1}}],["在terminal",{"2":{"225":1}}],["在ts中只能有一个构造器方法",{"2":{"405":1}}],["在ts中",{"2":{"134":1}}],["在错误分支git",{"2":{"217":1}}],["在线生成器",{"2":{"161":1}}],["在线",{"2":{"158":2}}],["在更新显示时key起着极其重要的作用",{"2":{"147":2}}],["在特定情况下",{"2":{"134":1}}],["在外部获取组件引用",{"2":{"130":1}}],["在渲染视图之前",{"2":{"128":2}}],["在相应的module中导入并使用",{"2":{"107":1}}],["在变更检测后执行",{"2":{"103":2}}],["在",{"2":{"100":1,"218":1,"234":1,"322":2,"388":1,"396":2,"483":1,"495":1,"543":1,"544":1,"548":1,"573":2,"615":1}}],["在其他模块使用必须exports导出",{"2":{"79":1}}],["在其他模块使用必须exports导出1",{"2":{"79":1}}],["在登录成功之后",{"2":{"43":2}}],["在路由中间件前使用",{"2":{"30":2}}],["在路由加一个参数",{"2":{"29":2}}],["在自定义模块中",{"2":{"24":1}}],["zinc",{"2":{"614":6}}],["zindex",{"2":{"578":10}}],["za",{"2":{"578":2}}],["zoom",{"2":{"577":2}}],["zoomin",{"2":{"577":6}}],["zoomout",{"2":{"577":6}}],["zorrosrc",{"2":{"86":6}}],["zorro",{"2":{"86":8}}],["zerdocs",{"2":{"395":2,"396":10,"599":2}}],["zshgit",{"2":{"206":1,"207":1,"208":1,"209":1,"210":2,"212":1,"213":1,"214":1,"216":1}}],["zsh",{"2":{"205":1,"211":4,"220":1,"221":2,"590":1}}],["z",{"2":{"189":4,"190":4,"345":2,"346":2,"348":4,"350":6,"479":1,"551":2,"578":4}}],["zl",{"2":{"36":10}}],["zjj被访问哈哈哈",{"2":{"29":2}}],["zjj被访问",{"2":{"29":2}}],["zjj",{"2":{"29":2}}],["zh",{"2":{"268":6}}],["zhan",{"2":{"527":2}}],["zhansan",{"2":{"262":2,"399":2}}],["zhangsna",{"2":{"399":4}}],["zhangsan",{"2":{"25":4,"29":6,"30":2,"270":2,"399":2,"536":2}}],["zhang",{"2":{"5":2}}],["zhang4",{"2":{"5":2}}],["zhang3",{"2":{"4":2,"5":2,"6":2}}],["zhaoliu",{"2":{"36":2}}],["zhj被访问哈哈哈",{"2":{"28":2,"29":2}}],["zhj被访问",{"2":{"28":2,"29":2}}],["zhj",{"2":{"28":2,"29":2}}],["可维护性和可扩展性等问题而产生的",{"2":{"549":1}}],["可解决函数嵌套导致的可读性差问题",{"2":{"540":1}}],["可能出现无限循环",{"2":{"513":1}}],["可能会导致本地分支列表过长",{"2":{"205":1}}],["可用==的情况",{"2":{"512":1}}],["可执行对象",{"2":{"506":1}}],["可定时发出多个需要并发请求",{"2":{"492":1}}],["可单个持久链接上进行多次请求",{"2":{"492":1}}],["可减少服务器负载",{"2":{"485":1}}],["可替换元素",{"0":{"483":1}}],["可查看",{"2":{"457":1}}],["可操作的能力",{"2":{"456":1}}],["可选的值有很多",{"2":{"431":1}}],["可选属性",{"2":{"412":2}}],["可选",{"2":{"360":4,"399":2}}],["可视化工具",{"0":{"339":1}}],["可控制扁平化深度",{"2":{"282":2}}],["可变参数",{"0":{"263":1}}],["可运用于隐式转布尔值",{"2":{"255":2}}],["可借鉴的up主题文件",{"2":{"229":1}}],["可改",{"2":{"220":2}}],["可迭代对象的长度",{"2":{"122":2}}],["可迭代对象中当前条目的索引",{"2":{"122":2}}],["可拆解为",{"2":{"117":1}}],["可最早获取到输入属性最新值",{"2":{"109":2}}],["可如果数组中的元素变化",{"2":{"108":1}}],["可以这样用",{"2":{"587":1}}],["可以方便地实现组件的开发",{"2":{"560":1}}],["可以轻松地支持多种平台",{"2":{"560":1}}],["可以抽离封装vue",{"2":{"554":1}}],["可以把父组件请求卸载mounted中",{"2":{"558":1}}],["可以把数据绑定到页面",{"2":{"553":1}}],["可以把ts转为es5或更早的js代码",{"2":{"429":1}}],["可以访问",{"2":{"548":1}}],["可以访问cache和indexdb",{"2":{"497":1}}],["可以处理的模块",{"2":{"548":1}}],["可以找到图的强联通分量",{"2":{"547":1}}],["可以找到图的拓扑排序",{"2":{"547":1}}],["可以找到由相邻节点组成的连通块",{"2":{"546":1,"547":1}}],["可以",{"2":{"533":1}}],["可以避免回调地狱",{"2":{"529":1}}],["可以共享",{"2":{"522":1}}],["可以创建一个独立线程",{"2":{"495":1}}],["可以使得图片加载更快",{"2":{"486":1}}],["可以使用队列来实现",{"2":{"544":1}}],["可以使用递归或栈来实现",{"2":{"543":1}}],["可以使用矢量图形代替位图",{"2":{"486":1}}],["可以使用",{"2":{"213":1,"615":1}}],["可以减少请求次数",{"2":{"486":1}}],["可以减少重复加载同一张图片的次数",{"2":{"486":1}}],["可以减少初始加载时的负担",{"2":{"486":1}}],["可以减少图片文件的大小",{"2":{"486":1}}],["可以减少浏览器与服务器之间的http请求次数",{"2":{"485":1}}],["可以制作出非常复杂的动态效果",{"2":{"484":1}}],["可以随时向消息队列添加任务",{"2":{"446":1}}],["可以随便填",{"2":{"232":2}}],["可以指定",{"2":{"438":1}}],["可以关闭该选项",{"2":{"434":1}}],["可以推导为",{"2":{"424":8}}],["可以将比较耗费资源操作放在里面执行",{"2":{"495":1}}],["可以将这些文件识别为模块",{"2":{"418":2}}],["可以将其设置为private",{"2":{"407":1}}],["可以将该类实例中",{"2":{"275":1}}],["可以修改",{"2":{"406":4}}],["可以赋值给其他类型",{"2":{"399":1}}],["可以赋值给其他类型boolean",{"2":{"399":1}}],["可以添加事件侦听器",{"2":{"293":2}}],["可以被所有该类实例访问",{"2":{"275":1}}],["可以在内存中进行操作",{"2":{"560":1}}],["可以在构建过程中执行一系列的任务",{"2":{"548":1}}],["可以在构造函数中",{"2":{"269":2}}],["可以在类中修改",{"2":{"406":3}}],["可以在类",{"2":{"406":2}}],["可以在方法中对属性的值进行验证",{"2":{"270":1}}],["可以控制属性的读写权限",{"2":{"270":1}}],["可以通过this关键字来添加属性和方法到新对象中",{"2":{"498":1}}],["可以通过",{"2":{"495":1,"497":1}}],["可以通过box",{"2":{"475":1}}],["可以通过对象修改",{"2":{"406":1}}],["可以通过对象修改class",{"2":{"406":1}}],["可以通过创建同名方法来重写父类的方法",{"2":{"271":2}}],["可以通过extends关键来完成继承",{"2":{"271":1}}],["可以通过该对象直接访问实参",{"2":{"263":2}}],["可以通过索引来读取元素",{"2":{"263":2}}],["可以不受参数数量的限制更加灵活的创建函数",{"2":{"263":2}}],["可以求任意个数值的和",{"2":{"263":2}}],["可以用来创建一个新的函数",{"2":{"262":1}}],["可以用promise",{"2":{"239":1}}],["可以用$any",{"2":{"135":1}}],["可以看到自己账户名",{"2":{"235":1}}],["可以先去microsofe",{"2":{"222":1}}],["可以结合选择器",{"2":{"197":1}}],["可以放在任何一个需要值的地方",{"2":{"137":1}}],["可以获取dom",{"2":{"130":1}}],["可以视为动态组件",{"2":{"113":1}}],["可以构建时候临时修改变量",{"2":{"61":2}}],["可以借助接口调试工具测试或直接访问",{"2":{"46":1}}],["可以配置当前",{"2":{"43":2}}],["可以伪造",{"2":{"41":1}}],["可以连续调用多个中间件对请求进行处理",{"2":{"29":1}}],["可以调用多个中间件对请求进行",{"2":{"29":1}}],["可扩展分片集群",{"2":{"0":1}}],["概念",{"2":{"29":1}}],["网站等方面的应用非常广泛",{"2":{"484":1}}],["网站服务器",{"2":{"27":1}}],["网络拓扑总览特有节点注册",{"2":{"578":2}}],["网络拓扑图代码",{"0":{"576":1},"1":{"577":1,"578":1}}],["网络",{"2":{"447":1,"449":1}}],["网络进程内部会启动多个线程来处理不同的网络任务",{"2":{"444":1}}],["网络进程",{"2":{"444":1}}],["网络名",{"2":{"62":6}}],["网格内项目垂直居中",{"2":{"474":2}}],["网格内项目对其方式",{"0":{"168":1}}],["网格相对于容器的对齐方式",{"2":{"167":1}}],["网页资源服务器",{"2":{"27":1}}],["专门对外提供",{"2":{"27":2}}],["​​visibility",{"2":{"466":1}}],["​background",{"2":{"466":1}}],["​color​​​",{"2":{"466":1}}],["​\\t添加的文章少还好",{"2":{"596":1}}],["​\\t每次添加文章过程",{"2":{"596":1}}],["​\\t\\tsearch",{"2":{"530":1}}],["​\\t\\ttolocaleuppercase",{"2":{"530":1}}],["​\\t\\t\\t\\t\\t\\t如果要",{"2":{"141":1}}],["​\\t\\t\\t\\t\\t受控组件也可以用于描述内部状态由传入",{"2":{"141":1}}],["​\\t都不会影响原字符串",{"2":{"530":1}}],["​\\t节流",{"2":{"520":1}}],["​\\t防抖",{"2":{"520":1}}],["​\\t以",{"2":{"234":1}}],["​\\t解决方法",{"2":{"234":1}}],["​\\t先执行ssh",{"2":{"234":1}}],["​\\t",{"2":{"137":1}}],["​",{"2":{"27":2,"137":7,"140":3,"146":3,"466":1}}],["六",{"0":{"27":1,"52":1,"308":1,"412":1,"461":1,"467":1},"1":{"28":1,"29":1,"468":1},"2":{"302":6}}],["目前常用的前端模块化规范有commonjs",{"2":{"549":1}}],["目前6个为当前的主流",{"2":{"15":2}}],["目录下的所有文件夹",{"2":{"599":2}}],["目录约定",{"2":{"488":1}}],["目录作为模块",{"2":{"26":1}}],["目标阶段",{"2":{"528":1}}],["目标版本",{"2":{"440":2}}],["目标仓库地址",{"2":{"396":2}}],["目的主机路径",{"2":{"59":2}}],["开始的",{"2":{"572":1}}],["开始占用任务空间",{"2":{"493":2}}],["开始切片并上传",{"2":{"14":1}}],["开头就变成了私有属性",{"2":{"270":2}}],["开头的路径标识符",{"2":{"26":1}}],["开发中如何选择key",{"2":{"147":2}}],["开启状态",{"2":{"520":2}}],["开启边界触发",{"2":{"519":2}}],["开启strictnullchecks",{"2":{"434":2}}],["开启该模式有助于发现并处理可能为undefined的赋值",{"2":{"434":1}}],["开启交互模式",{"2":{"210":1}}],["开启交互模式git",{"2":{"210":1}}],["开启定时器",{"2":{"147":4}}],["开启",{"0":{"164":1},"2":{"134":1}}],["开启非纯管道方式二",{"2":{"108":2}}],["开机启动",{"2":{"54":2}}],["或者promise",{"2":{"492":1}}],["或者更好的体验",{"2":{"487":1}}],["或者执行npm",{"2":{"421":1}}],["或者是提供的初始值",{"2":{"378":1}}],["或者使用",{"2":{"205":1}}],["或者",{"0":{"340":1},"2":{"205":1,"432":1,"615":1}}],["或是",{"2":{"150":1}}],["或父组件重新render触发",{"2":{"147":2}}],["或父组件render触发",{"2":{"147":2}}],["或",{"2":{"26":1,"61":2,"130":1,"205":3,"235":2,"279":2,"316":2,"318":2,"346":2,"440":2,"474":2,"477":1,"478":2,"479":1,"572":1}}],["时按0处理",{"2":{"532":1}}],["时且小于起始索引时",{"2":{"532":1}}],["时间的字符串",{"2":{"533":1}}],["时间复杂度为",{"2":{"292":2}}],["时间格式化",{"0":{"268":1}}],["时显示",{"2":{"121":4}}],["时可不需要这个接口",{"2":{"46":2}}],["时",{"2":{"26":1,"99":1,"271":1,"479":1}}],["只拷贝对象自身的可枚举的属性",{"2":{"527":2}}],["只拷贝一层",{"2":{"527":1}}],["只读常量",{"2":{"515":1}}],["只读属性",{"2":{"406":1,"412":2}}],["只是影响元素的外观",{"2":{"466":1}}],["只需要将编码后的字符串嵌入到html或css代码中即可",{"2":{"485":1}}],["只需要修改提交的内容而不需要改变提交信息",{"2":{"213":1}}],["只需一次推送",{"2":{"211":1}}],["只能保证指针固定",{"2":{"515":1}}],["只能在类内部使用",{"2":{"270":1}}],["只能在标签内部使用",{"2":{"121":2}}],["只能创建文件",{"2":{"18":1}}],["只调用一次",{"2":{"109":6}}],["只获取直属投影组件",{"2":{"106":2}}],["只进不出",{"2":{"101":1}}],["只要使用2次以上就抽离",{"2":{"571":2}}],["只要大于0字节就抽离",{"2":{"571":4}}],["只要两边类型不一致",{"2":{"512":1}}],["只要其中有一步可以解析成功",{"2":{"450":1}}],["只要有一个为",{"2":{"318":2}}],["只要p1",{"2":{"314":1}}],["只要参数有obj",{"2":{"272":2}}],["只要对象满足某些条件即可",{"2":{"272":1}}],["只要某个组件触发了以上中的一个",{"2":{"111":1}}],["只要是angular",{"2":{"80":2}}],["只要配置成功了",{"2":{"43":2}}],["只会在空白处换行",{"2":{"197":2}}],["只会显示一个ng",{"2":{"121":2}}],["只会出现在",{"2":{"80":2}}],["只会执行一次",{"2":{"26":1}}],["只有等执行完才会打开节流阀执行下一个事件",{"2":{"518":1}}],["只有用户需要查看某张图片时才会被加载",{"2":{"486":1}}],["只有被列出来的npm包才会被包含进来",{"2":{"438":1}}],["只有typeroots下面的包才会被包含进来",{"2":{"438":1}}],["只有需要编译的文件少时才会用到",{"2":{"414":2}}],["只有百度后面有地图两字的才满足要求",{"2":{"350":2}}],["只有当a为undefined或null才会进行赋值",{"2":{"252":1}}],["只有当a为undefined或null才会进行赋值let",{"2":{"252":1}}],["只有单词中有建议换行符才会换行",{"2":{"197":2}}],["只有一个根标签",{"2":{"137":1}}],["只有一个占位符可省略数组括号",{"2":{"38":2}}],["只有lo网卡",{"2":{"62":1}}],["只有lo网卡docker",{"2":{"62":1}}],["导致确定按钮事件没触发",{"2":{"610":2}}],["导致外层函数执行完变量不会被释放",{"2":{"536":1}}],["导出的对象以module",{"2":{"25":1}}],["导入辅助工具函数",{"2":{"440":2}}],["导入其他的ngmodule",{"2":{"78":1}}],["导入",{"2":{"20":1}}],["第二次",{"2":{"559":2}}],["第二秒执行",{"2":{"525":2}}],["第一次执行顺序",{"2":{"559":2}}],["第一次运行",{"2":{"541":2}}],["第一次自执行完",{"2":{"519":2}}],["第一秒执行",{"2":{"525":4}}],["第一步完成后",{"2":{"456":1}}],["第一个div只是用于承载",{"2":{"121":2}}],["第一个2m",{"2":{"15":2}}],["第三方库",{"2":{"513":1}}],["第三方",{"2":{"80":2}}],["第三方模块记载机制",{"2":{"26":1}}],["第三方模块",{"2":{"23":1}}],["优雅降级",{"2":{"487":1}}],["优雅降级和渐进增强",{"0":{"487":1}}],["优先级高",{"2":{"471":1}}],["优先处理靠近视口的块",{"2":{"463":1}}],["优先从缓存中加载",{"2":{"26":1}}],["优胜劣败",{"2":{"308":2}}],["优化大量图片的加载方法",{"0":{"486":1}}],["优化后",{"2":{"245":2,"541":2}}],["优化前",{"2":{"245":2}}],["优化开发体验",{"2":{"149":1}}],["优化访问方式",{"2":{"22":1}}],["优点和应用",{"0":{"48":1}}],["优点",{"2":{"0":1}}],["映射列表",{"2":{"433":2}}],["映射服务器文件路径",{"2":{"22":2}}],["映射用户",{"2":{"12":2}}],["`bg",{"2":{"614":4}}],["`export",{"2":{"599":2}}],["`xl",{"2":{"586":4}}],["`子类中的run方法",{"2":{"410":2}}],["`父类中的run方法",{"2":{"410":2}}],["`大家好",{"2":{"404":2,"406":6}}],["`dfa2332",{"2":{"345":2}}],["`$",{"2":{"294":2,"373":2,"409":2,"410":2,"578":2,"610":6}}],["`fibonacci",{"2":{"285":2}}],["`账号$",{"2":{"159":4}}],["`h1",{"2":{"84":2}}],["`update",{"2":{"37":4}}],["`insert",{"2":{"36":4}}],["`npm",{"2":{"34":1,"571":2}}],["`",{"2":{"21":12,"36":4,"37":4,"46":4,"84":6,"89":4,"90":4,"91":4,"92":4,"93":4,"95":8,"96":8,"108":4,"113":8,"116":8,"119":4,"121":12,"122":4,"123":4,"126":4,"130":8,"285":2,"294":2,"345":2,"346":12,"347":8,"349":4,"350":4,"373":2,"404":2,"406":6,"409":2,"410":6,"414":2,"571":2,"577":4,"578":2,"586":2,"599":22,"614":4}}],["动物在叫~",{"2":{"271":2,"411":2}}],["动态规划实现",{"2":{"285":2}}],["动态组件一定要声明entrycomponents",{"2":{"113":1}}],["动态组件都不需要entrycomponents了",{"2":{"113":1}}],["动态组件",{"0":{"113":1}}],["动态响应内容",{"0":{"21":1}}],["动漫",{"2":{"7":6}}],["8px",{"2":{"603":2}}],["83",{"2":{"578":2}}],["874",{"2":{"578":2}}],["875",{"2":{"578":4}}],["854",{"2":{"578":2}}],["82",{"2":{"578":2}}],["81",{"2":{"370":2,"578":2}}],["888",{"2":{"318":6,"319":10,"577":2}}],["8888",{"2":{"22":8,"43":4}}],["8888888",{"2":{"232":2}}],["888888",{"2":{"18":2}}],["8wekyb3d8bbwe",{"2":{"231":2}}],["8fc6389",{"2":{"210":2}}],["8em",{"2":{"185":2}}],["8|",{"2":{"107":4}}],["800",{"2":{"493":2,"494":2}}],["800px",{"2":{"168":4,"170":4}}],["8082",{"2":{"64":4}}],["8081",{"2":{"64":4}}],["8080",{"2":{"21":2,"64":8,"572":2}}],["80",{"2":{"20":2,"21":2,"28":4,"29":8,"30":4,"42":4,"577":2,"578":2,"580":2}}],["8",{"0":{"91":1,"258":1,"347":1,"433":1},"1":{"348":1},"2":{"20":4,"21":2,"22":8,"282":4,"285":2,"288":2,"330":2,"340":2,"342":4,"365":2,"370":2,"440":2,"491":2,"555":2,"578":2,"613":2}}],["不删除源文件",{"2":{"613":2}}],["不相对于屏幕视口定位",{"2":{"605":1}}],["不相等",{"2":{"257":2,"322":2}}],["不得不说当问题搞得人想撞墙的时候",{"2":{"594":1}}],["不生效",{"2":{"589":2}}],["不生成输出文件",{"2":{"440":2}}],["不生成编译后的文件",{"2":{"414":2}}],["不匹配则报错",{"2":{"563":1}}],["不传函数",{"2":{"540":2}}],["不可以",{"2":{"533":1}}],["不可以共享",{"2":{"522":1}}],["不复制对象本身",{"2":{"527":1}}],["不主动删除一直存在",{"2":{"522":1}}],["不同于",{"2":{"589":2}}],["不同端口号下",{"2":{"522":1}}],["不同类型的任务可以分属于不同的队列",{"2":{"448":1}}],["不同类型会转为相同类型再比较\\t",{"2":{"257":2}}],["不受外部影响",{"2":{"516":1}}],["不与任何值相等",{"2":{"512":1}}],["不写",{"2":{"489":1}}],["不适合大型图片",{"2":{"485":1}}],["不再与服务器发生通讯",{"2":{"471":1}}],["不影响布局",{"2":{"466":1}}],["不一定是一一对应的",{"2":{"459":1}}],["不行",{"2":{"448":1}}],["不然所有可能为null",{"2":{"434":1}}],["不允许",{"2":{"440":2,"514":2}}],["不允许不明确类型的this",{"2":{"414":2}}],["不允许隐式的any类型",{"2":{"414":2}}],["不允许在被子组件修改",{"2":{"111":1}}],["不返回或返回undefined",{"2":{"400":2}}],["不记录分组",{"2":{"346":2}}],["不区分大小写",{"2":{"345":2}}],["不包含",{"2":{"318":2}}],["不是则自动转为字符串",{"2":{"509":2}}],["不是",{"2":{"316":2}}],["不是一个合法的数字",{"2":{"302":2}}],["不使用",{"2":{"610":2}}],["不使用定时器没反应",{"2":{"584":2}}],["不使用柯里化",{"2":{"540":2}}],["不使用乘法符号乘法函数",{"0":{"297":1}}],["不使用额外变量交换",{"2":{"287":2}}],["不加",{"2":{"259":2}}],["不全等",{"2":{"257":2}}],["不知道怎么叫",{"2":{"245":2}}],["不便于管理",{"2":{"205":1}}],["不支持",{"2":{"194":1,"514":2}}],["不支持跨域",{"2":{"42":1}}],["不要过度使用ref",{"2":{"146":1}}],["不要写引号",{"2":{"137":1}}],["不用必须确保每个dom",{"2":{"125":1}}],["不会生效原因",{"2":{"615":1}}],["不会阻塞",{"2":{"456":1}}],["不会阻塞其他执行逻辑的执行",{"2":{"240":1}}],["不会对空数组进行检测",{"2":{"359":1,"367":1}}],["不会记录此原子组",{"2":{"346":1}}],["不会记录此原子组let",{"2":{"346":1}}],["不会立即执行",{"2":{"262":2}}],["不会自动类型转换",{"2":{"257":2}}],["不会删除本地不存在的远程分支",{"2":{"205":1}}],["不会更新本地分支和远程分支之间的关联关系",{"2":{"205":1}}],["不会导致内存泄漏",{"2":{"125":1}}],["不会执行变更检测",{"2":{"108":1}}],["不太好使",{"2":{"118":2}}],["不改变引用没有用",{"2":{"108":2}}],["不进不出",{"2":{"101":1}}],["不推荐",{"2":{"92":2,"96":1}}],["不常用",{"2":{"88":2}}],["不能为空`",{"2":{"610":2}}],["不能在声明前访问",{"2":{"516":1}}],["不能控制指向的数据结构",{"2":{"515":1}}],["不能同步操作",{"2":{"497":1}}],["不能访问",{"2":{"497":1}}],["不能单独存在",{"2":{"443":1}}],["不能修改",{"2":{"406":2}}],["不能修改class",{"2":{"406":2}}],["不能直接赋值给其他类型\\t",{"2":{"400":2}}],["不能直接使用foreach",{"2":{"243":1}}],["不能被其他数整除的",{"2":{"365":2}}],["不能返回自身promise",{"2":{"315":2}}],["不能调用数组的方法",{"2":{"263":2}}],["不能用在普通函数上",{"2":{"240":1}}],["不能指定端口",{"2":{"62":2}}],["不能创建路径",{"2":{"18":1}}],["不指定默认就是网桥模式",{"2":{"62":2}}],["不指定是root",{"2":{"61":2}}],["不需要加载操作系统os内核",{"2":{"48":1}}],["不具有安全性",{"2":{"41":1}}],["不存在则插入",{"2":{"7":2}}],["ws",{"2":{"589":2}}],["w3c",{"2":{"448":1}}],["w",{"2":{"346":10,"544":2}}],["wq",{"2":{"210":1}}],["was",{"2":{"230":2}}],["watch后面",{"2":{"554":1}}],["watch拼接到前者的",{"2":{"554":1}}],["watch",{"2":{"158":2,"554":1}}],["warning",{"2":{"77":1,"108":1,"112":1,"113":4,"117":1,"121":1,"123":1,"128":1,"132":1,"146":1,"497":1,"596":1,"600":1,"605":1}}],["warningcount",{"2":{"36":2}}],["wellknown",{"2":{"414":4}}],["wearerequired",{"2":{"396":2}}],["weather",{"2":{"143":4}}],["weekday",{"2":{"268":2}}],["webpack又基于node之上",{"2":{"432":1}}],["webpack会把你的代码转换成在所有浏览器中可运行的代码",{"2":{"429":1}}],["webpack",{"2":{"417":8,"418":17,"420":4,"535":1,"548":3}}],["webpack整合",{"0":{"415":1},"1":{"416":1,"417":1,"418":1,"419":1,"420":1,"421":1,"422":1,"423":1}}],["webworker",{"2":{"414":6,"431":1}}],["webkit",{"2":{"176":6,"177":8}}],["web",{"0":{"20":1,"495":1},"2":{"19":1,"20":1,"27":2,"130":1}}],["wins",{"2":{"450":1}}],["window",{"0":{"615":1},"2":{"249":4,"262":4,"333":2,"334":4,"357":2,"426":2,"429":1,"432":1,"438":1,"512":2,"535":1,"541":12,"551":1,"574":4,"577":2,"584":8,"614":2,"615":1}}],["windowsapps",{"2":{"231":2}}],["windows",{"2":{"231":2,"450":4}}],["windows为cmd",{"2":{"61":2}}],["wind",{"2":{"143":6}}],["within",{"2":{"586":2}}],["with",{"2":{"396":10}}],["width=",{"2":{"178":4,"478":4}}],["width",{"2":{"92":6,"98":2,"113":2,"168":4,"170":2,"177":6,"178":2,"179":2,"189":2,"190":6,"195":6,"201":2,"481":2,"482":2,"489":6,"490":2,"541":2,"551":8,"577":8,"578":32,"603":10,"610":2,"611":4}}],["www",{"2":{"61":2,"341":2,"346":12,"347":12,"349":12,"350":4,"532":8,"573":2}}],["worker的基础上增加了离线缓存的能力",{"2":{"497":1}}],["worker那么它可以拦截当前网站所有的请求",{"2":{"496":1}}],["worker",{"0":{"495":1,"496":1},"2":{"495":15,"496":1,"497":1}}],["worker中执行",{"2":{"492":1}}],["workers技术",{"2":{"492":1}}],["work",{"2":{"151":2,"152":2,"153":2}}],["works",{"2":{"102":2,"105":2,"106":2,"114":2}}],["workdir",{"2":{"61":4}}],["world",{"2":{"51":2,"55":2,"301":6,"334":2,"524":2}}],["wrapper",{"2":{"490":2}}],["wrapperloading",{"2":{"159":4}}],["wrap",{"2":{"482":4,"610":2}}],["wrapcls",{"2":{"113":4}}],["wrong",{"2":{"36":2}}],["write",{"2":{"298":2,"334":4}}],["writehead",{"2":{"20":2}}],["writefilesync",{"2":{"599":2}}],["writefile",{"2":{"18":4}}],["wheel",{"2":{"615":2}}],["where",{"2":{"4":2,"37":4,"38":4}}],["white",{"2":{"176":2,"197":2,"199":4,"491":10,"577":2,"611":2}}],["while",{"2":{"15":4,"260":4,"282":4,"290":4,"291":2,"292":8,"294":2,"298":4,"300":4,"301":4,"543":2,"544":6}}],["抵消路劲",{"2":{"17":2}}],["jobid",{"2":{"427":4}}],["jobs",{"2":{"396":2}}],["join",{"2":{"17":2,"22":8,"283":2,"302":8,"371":2,"372":4,"539":2,"599":4}}],["jpeg",{"2":{"333":2}}],["jpg",{"2":{"86":2,"333":2,"374":4}}],["j+1",{"2":{"287":10}}],["j++",{"2":{"287":2,"288":2,"292":6,"301":4,"302":2,"316":2,"319":2}}],["j",{"2":{"287":14,"288":8,"291":16,"292":20,"301":28,"302":6,"316":6,"319":8,"328":8}}],["jetbrainsmono",{"2":{"231":2}}],["jerry",{"2":{"144":2}}],["java",{"2":{"393":2}}],["javascriptmodule",{"2":{"573":1}}],["javascript主线程的独立线程",{"2":{"497":1}}],["javascriptconst",{"2":{"362":1,"572":2}}],["javascript+",{"2":{"347":1}}],["javascriptfunction",{"2":{"318":1}}],["javascriptlet",{"2":{"301":2,"340":1,"342":1,"345":1,"346":1,"348":1,"349":1,"350":1}}],["javascript是单线程执行语言",{"2":{"237":1}}],["javascript实现异步",{"0":{"237":1},"1":{"238":1,"239":1,"240":1,"241":1,"242":1,"243":1}}],["javascript",{"0":{"568":1},"2":{"129":2,"139":6,"299":1,"301":1,"341":1,"344":1,"393":2,"440":4,"483":1,"543":2,"544":2,"560":1}}],["jandedobbeleer",{"2":{"222":2}}],["juejin",{"2":{"211":12}}],["justify",{"2":{"167":4,"168":4,"170":2,"174":7,"474":6,"586":4,"587":4,"603":4}}],["jumper",{"2":{"156":2}}],["jwt",{"0":{"43":1},"2":{"43":23}}],["js|css",{"2":{"613":2}}],["js漏了导入并使用descriptionsitem",{"2":{"609":2}}],["jsmounted",{"2":{"577":1,"615":1}}],["jsmarkforcheck",{"2":{"112":1}}],["js的",{"0":{"573":1}}],["js主要解析和比对",{"2":{"563":1}}],["jswindow",{"2":{"551":1}}],["js采用了该规范",{"2":{"549":1}}],["js运行的环境",{"2":{"535":1}}],["jsnitro",{"2":{"590":1}}],["jsnumber",{"2":{"533":1}}],["jsnew",{"2":{"239":2}}],["jslocalstorage",{"2":{"523":1}}],["jslet",{"2":{"38":2,"238":1,"252":1,"279":1,"308":1,"311":1,"313":1,"319":1,"321":1,"323":1,"325":1,"381":1,"383":1,"385":1,"389":1,"510":1,"523":1,"527":1,"532":1,"539":1}}],["jsparseint",{"2":{"509":1}}],["jspm",{"2":{"414":2}}],["js继承有哪些方式",{"0":{"501":1},"1":{"502":1,"503":1,"504":1}}],["js执行",{"2":{"456":1,"564":1}}],["js是一门单线程的语言",{"2":{"447":1}}],["js和",{"2":{"439":1}}],["js文件",{"2":{"439":1}}],["js后缀的文件也会被typescript进行编译",{"2":{"437":1}}],["js配置文件",{"0":{"423":1}}],["js用来使老版本的浏览器支持新版es语法",{"2":{"422":1}}],["js详细配置",{"2":{"418":1}}],["jsboolean",{"2":{"399":1}}],["js类型",{"0":{"399":1}}],["jsvue",{"2":{"375":1}}],["jsvar",{"2":{"288":1,"307":1,"363":1,"364":1,"384":1,"389":1}}],["js常用的求交集",{"0":{"320":1},"1":{"321":1,"322":1,"323":1,"324":1,"325":1,"326":1,"327":1,"328":1}}],["jssessionstorage",{"2":{"523":1}}],["jssettimeout",{"2":{"238":1}}],["jsstatic",{"2":{"313":1}}],["jsthen",{"2":{"308":1,"310":1,"311":1}}],["jsclass",{"2":{"303":1,"304":1,"315":1,"502":1}}],["jsconst",{"2":{"13":1,"16":1,"17":2,"18":1,"20":1,"21":1,"22":2,"25":2,"28":1,"29":2,"34":1,"42":1,"43":1,"46":1,"249":1,"250":1,"265":2,"268":1,"293":1,"296":1,"314":1,"316":2,"329":1,"331":1,"332":1,"333":1,"357":1,"364":1,"371":1,"372":1,"373":1,"374":1,"380":1,"382":1,"393":1,"507":1,"536":1,"539":2,"540":1,"551":1}}],["js递归实现",{"2":{"300":1}}],["js解释器会自动将其转换为字符串",{"2":{"265":1}}],["jsfn2",{"2":{"262":1}}],["jsfn",{"2":{"262":1}}],["jsfunction",{"2":{"146":1,"246":1,"247":1,"262":1,"272":1,"278":1,"281":2,"284":1,"287":1,"289":1,"290":1,"291":1,"292":1,"294":1,"295":1,"298":1,"302":2,"370":1,"498":1,"499":1,"500":1,"503":1,"519":1,"524":1,"525":1,"536":2,"541":1,"544":2}}],["js==",{"2":{"257":1}}],["js+",{"2":{"253":1}}],["jsarr11",{"2":{"385":1}}],["jsarray",{"2":{"360":1,"368":1}}],["jsarr",{"2":{"288":1,"378":1,"388":1}}],["jsa",{"2":{"251":1}}],["jsasync",{"2":{"240":1,"243":5}}],["jsdata",{"2":{"158":1}}],["jsdb",{"2":{"7":1}}],["jsimport",{"2":{"157":1,"577":1}}],["jsif",{"2":{"129":1,"259":1,"306":1,"309":1}}],["jsexport",{"2":{"156":1,"551":1,"585":1,"589":1}}],["jsexports",{"2":{"9":1,"10":1,"11":1}}],["js\\t",{"2":{"139":1}}],["js表达式",{"2":{"137":1,"258":1}}],["js语句",{"2":{"137":1}}],["jsxclass",{"2":{"145":1}}],["jsxconst",{"2":{"137":1}}],["jsxfunction",{"2":{"144":1}}],["jsx",{"2":{"143":1,"144":1,"439":1,"440":4}}],["jsx语法规则",{"2":{"137":1}}],["js应用是通过引导根模块",{"2":{"82":1}}],["js该数组为当前模块提供一系列服务该数组为当前模块提供一系列服务",{"2":{"81":1}}],["js1",{"2":{"79":1,"80":1}}],["json添加脚本执行命令",{"0":{"598":1}}],["json记录了映射关系",{"2":{"563":1}}],["json重新生成文件",{"2":{"440":2}}],["json全解析",{"0":{"440":1}}],["json选项的解释",{"2":{"425":1}}],["json是编译typescript的配置文件",{"2":{"425":1}}],["json配置",{"0":{"420":1}}],["json中加上build命令",{"2":{"418":2}}],["json中设置",{"2":{"134":2}}],["json文件",{"2":{"416":1,"418":4}}],["json详细配置",{"2":{"414":1}}],["jsonpipe",{"2":{"132":1}}],["json",{"0":{"425":1},"1":{"426":1,"427":1,"428":1,"429":1,"430":1,"431":1,"432":1,"433":1,"434":1,"435":1,"436":1,"437":1,"438":1,"439":1,"440":1},"2":{"43":2,"46":2,"157":4,"211":10,"224":4,"227":2,"229":1,"231":2,"414":3,"419":1,"432":2,"440":1,"527":4,"563":1,"564":1,"573":3,"590":1,"599":2}}],["jsonwebtoken",{"2":{"43":4}}],["js",{"0":{"248":1},"1":{"249":1,"250":1},"2":{"12":2,"13":7,"16":1,"25":8,"29":1,"30":6,"35":1,"36":1,"37":1,"122":1,"137":1,"139":12,"140":1,"147":1,"159":1,"168":1,"220":5,"241":1,"242":1,"245":1,"254":1,"255":1,"256":1,"260":1,"261":1,"263":1,"264":1,"265":1,"266":1,"267":1,"269":1,"270":2,"271":1,"276":1,"279":1,"282":1,"283":1,"285":1,"292":1,"293":1,"296":1,"297":1,"299":1,"303":2,"305":1,"307":1,"312":1,"314":2,"318":1,"319":1,"322":1,"324":1,"326":1,"327":1,"328":1,"330":1,"335":1,"365":1,"378":1,"414":3,"418":5,"422":2,"423":1,"433":4,"440":2,"444":1,"445":1,"447":1,"448":2,"449":1,"456":5,"465":2,"477":1,"488":1,"493":1,"494":1,"495":4,"512":1,"513":3,"519":1,"520":1,"526":1,"527":1,"531":1,"535":1,"542":1,"543":3,"548":1,"555":1,"556":1,"559":1,"563":1,"570":3,"571":1,"573":4,"574":1,"577":2,"578":3,"579":1,"580":1,"584":2,"586":1,"588":1,"589":1,"599":1,"612":2,"613":3}}],["这行代码在作怪",{"2":{"605":1}}],["这种方式可以大幅减少初始页面加载时间",{"2":{"486":1}}],["这种对属性读取或设置的属性被称为属性的存取器",{"2":{"407":1}}],["这对于高流量网站来说非常重要",{"2":{"485":1}}],["这些元素的内容可以通过",{"2":{"483":1}}],["这些提交",{"2":{"205":1}}],["这一步完成后",{"2":{"458":1}}],["这又带来了偏差",{"2":{"448":1}}],["这时还要用到babel来做转换",{"2":{"422":1}}],["这时就会报错",{"2":{"135":1}}],["这就是",{"2":{"456":1}}],["这就是css",{"2":{"456":1}}],["这就是单向数据流",{"2":{"111":1}}],["这就称为方法的重写",{"2":{"410":1}}],["这样配置到达",{"2":{"589":2}}],["这样的路径下",{"2":{"573":1}}],["这样能够更精确地控制元素的尺寸和定位",{"2":{"475":1}}],["这样一来",{"2":{"447":1}}],["这样在编译过程中",{"2":{"431":1}}],["这样就不需要定义一个变量就必须赋有初始值",{"2":{"427":1}}],["这样就构成了一条原型链",{"2":{"274":1}}],["这样我们只需要创建一个属性",{"2":{"275":1}}],["这里主要记录编程遇到的问题",{"2":{"616":1}}],["这里需要重新处理x",{"2":{"580":2}}],["这里还可以尝试一些其他的测试用例",{"2":{"301":1}}],["这里我填上我安装的是jetbrainsmono",{"2":{"230":1}}],["这里使用的构造提供的模版",{"2":{"126":2}}],["这本书让我感受到",{"2":{"181":1}}],["这会非常有用",{"2":{"122":2}}],["这个设置是非常重要的",{"2":{"572":1}}],["这个路径下",{"2":{"572":1}}],["这个属性的作用主要是为了适应应用被部署在服务器上的子目录下的情况",{"2":{"572":1}}],["这个属性值的默认值为",{"2":{"572":1}}],["这个属性叫做",{"2":{"274":1}}],["这个方法",{"2":{"509":1}}],["这个例子中",{"2":{"301":1}}],["这个根组件通常叫做",{"2":{"82":2}}],["这个容器网卡也没有啦",{"2":{"63":1}}],["这个容器网卡也没有啦docker",{"2":{"63":1}}],["这个中间件",{"2":{"43":2}}],["这次错误是由",{"2":{"43":2}}],["这是默认值",{"2":{"573":1}}],["这是因为",{"2":{"456":1}}],["这是因为下载和解析",{"2":{"456":1}}],["这是因为它运行在浏览器的渲染主线程中",{"2":{"447":1}}],["这是递归的请求",{"2":{"450":1}}],["这是一个非常有用的选项",{"2":{"433":1}}],["这是一个自定义的title",{"2":{"418":2}}],["这是一个有权限的",{"2":{"43":2}}],["这是葡萄",{"2":{"123":2}}],["这是梨",{"2":{"123":2}}],["这是苹果",{"2":{"123":2}}],["这是",{"2":{"123":6,"464":1}}],["这是单个分片的",{"2":{"15":2}}],["这四个都可以成功",{"2":{"16":2}}],["拼接后面的路径需要写正斜杠",{"2":{"16":1}}],["坑点三",{"0":{"607":1}}],["坑点二",{"0":{"606":1}}],["坑点一",{"0":{"605":1}}],["坑点",{"2":{"16":1,"396":2,"602":1}}],["问题二",{"2":{"468":1}}],["问题一",{"2":{"303":1,"468":1}}],["问题",{"2":{"16":1}}],["读书摘要",{"0":{"181":1},"1":{"182":1,"183":1,"184":1,"185":1,"186":1,"187":1,"188":1,"189":1,"190":1,"191":1,"192":1,"193":1,"194":1,"195":1,"196":1,"197":1,"198":1,"199":1,"200":1,"201":1,"202":1,"203":1}}],["读取",{"2":{"599":4}}],["读取数据",{"2":{"523":2}}],["读取属性的方法叫做setter方法",{"2":{"407":1}}],["读取对象属性时",{"2":{"275":1}}],["读取成功",{"2":{"16":2}}],["读取失败",{"2":{"16":4,"22":4}}],["读取文件",{"0":{"16":1},"1":{"17":1}}],["读写操作频繁",{"2":{"0":1}}],["竞赛等出一个执行完毕的请求",{"2":{"15":2}}],["rback3",{"2":{"578":2}}],["rback2",{"2":{"578":2}}],["rback1",{"2":{"578":2}}],["rules",{"2":{"418":2,"423":2}}],["runtimechunk",{"2":{"571":2}}],["runs",{"2":{"396":2}}],["run之后的参数替换",{"2":{"61":2}}],["running",{"2":{"30":2,"42":2,"43":2,"46":2}}],["run",{"0":{"562":1},"1":{"563":1,"564":1},"2":{"28":2,"29":4,"51":2,"55":2,"56":2,"57":4,"59":2,"61":10,"62":4,"63":2,"64":8,"395":2,"396":4,"410":4,"411":4,"421":1,"493":6,"563":1,"564":1}}],["rf",{"2":{"395":2}}],["rsa",{"2":{"232":2,"233":1,"234":2,"235":4,"396":4}}],["r",{"2":{"206":2,"208":4,"578":4}}],["rgb",{"2":{"190":6,"198":2,"458":1}}],["rgba",{"2":{"177":2,"179":6,"191":1,"195":6,"585":4}}],["r=",{"2":{"178":2}}],["ratio",{"2":{"578":32}}],["range",{"2":{"574":6}}],["randomid",{"2":{"357":4}}],["random",{"2":{"267":8,"288":2}}],["radix",{"2":{"509":4}}],["radialgradient",{"2":{"478":1}}],["radial",{"2":{"478":1}}],["radius",{"2":{"177":2,"185":2,"188":8,"195":8,"481":2,"577":2,"578":8,"603":6}}],["radio",{"2":{"123":8}}],["race",{"0":{"314":1},"2":{"15":2,"314":6,"315":2}}],["rights",{"2":{"234":2}}],["right",{"2":{"113":2,"179":2,"184":2,"186":2,"189":2,"190":2,"195":8,"289":6,"299":18,"300":20,"474":2,"478":1,"479":1,"490":2}}],["rm",{"2":{"56":8,"62":2,"208":4,"395":2}}],["rmi",{"2":{"55":2}}],["road",{"2":{"318":6,"319":10}}],["routes",{"2":{"572":1,"590":3}}],["router的路由路径",{"2":{"572":1}}],["router",{"2":{"29":1,"30":10,"46":10,"572":5,"573":2}}],["round",{"2":{"267":4,"578":4}}],["rotate",{"2":{"179":2,"193":2,"195":4}}],["role=",{"2":{"113":2}}],["rollup",{"2":{"22":6}}],["rows",{"2":{"165":7,"168":2,"170":2}}],["row",{"2":{"36":4,"166":2,"172":14,"173":6,"372":4}}],["rowdatapacket",{"2":{"34":2,"35":4}}],["rootdirs",{"2":{"440":2}}],["rootdir",{"2":{"440":2}}],["rootnodes",{"2":{"113":2}}],["root",{"2":{"34":4,"84":2,"85":2,"89":2,"90":2,"91":2,"92":2,"93":2,"95":2,"96":2,"108":2,"109":2,"116":4,"126":2,"130":2,"137":4,"139":4,"140":2,"214":2,"299":50,"300":20,"432":20,"544":8}}],["roolup",{"2":{"22":2}}],["ret进行扩展",{"2":{"554":1}}],["ret",{"2":{"554":1}}],["returnvalue",{"2":{"551":2}}],["return",{"2":{"12":4,"15":8,"16":4,"22":4,"34":2,"35":2,"36":4,"37":4,"38":4,"42":4,"43":4,"84":2,"107":2,"108":2,"113":4,"122":2,"239":10,"263":2,"264":2,"270":6,"278":2,"279":12,"281":8,"282":10,"283":6,"284":4,"285":6,"287":2,"288":2,"289":4,"290":2,"291":2,"292":10,"294":2,"295":4,"296":4,"297":8,"298":2,"299":12,"300":20,"301":4,"302":12,"308":6,"310":2,"311":4,"312":4,"313":2,"314":2,"315":10,"316":8,"318":24,"319":10,"326":6,"327":2,"362":2,"363":2,"364":2,"365":8,"370":2,"374":2,"378":2,"385":4,"388":1,"389":8,"393":2,"399":2,"407":2,"408":2,"412":2,"426":2,"493":6,"494":10,"512":4,"519":4,"520":10,"524":2,"527":8,"536":6,"539":16,"540":8,"541":10,"543":6,"544":6,"551":8,"571":2,"574":2,"577":8,"578":26,"583":4,"589":2,"599":10}}],["rem",{"2":{"488":1}}],["remotes",{"2":{"211":6}}],["remote",{"2":{"209":2,"211":18,"234":2}}],["removeeventlistener",{"2":{"574":2}}],["removechild",{"2":{"574":2}}],["removecomments",{"2":{"414":2,"440":2}}],["removeallranges",{"2":{"574":2}}],["removeaccount",{"2":{"159":2}}],["removeitem",{"2":{"523":4}}],["removedone",{"2":{"159":2}}],["remove",{"2":{"6":6,"570":3}}],["regbaidu1",{"2":{"347":4}}],["regbaidu",{"2":{"347":2}}],["reg1",{"2":{"346":2}}],["regulex",{"2":{"339":1}}],["regexper",{"2":{"339":1}}],["regexp",{"2":{"316":2,"319":4,"414":2,"506":1,"527":6,"578":2}}],["regexp类型转换成字符串",{"2":{"316":1}}],["reg",{"2":{"302":4,"341":12,"346":12,"347":12,"348":8,"350":12}}],["registry",{"2":{"55":8,"293":12}}],["registercombo",{"2":{"578":4}}],["registernode",{"2":{"578":6}}],["registeredge",{"2":{"578":4}}],["registerelements",{"2":{"577":2,"578":2}}],["register",{"2":{"9":2}}],["reverselinkedlist",{"2":{"298":4}}],["reverse",{"2":{"283":2,"302":4}}],["reversestring",{"2":{"283":8}}],["reject改变状态并执行回调函数",{"2":{"315":2}}],["rejected",{"2":{"303":6,"304":6,"305":2,"306":2,"307":2,"308":2,"309":2,"310":2,"311":2,"315":8}}],["reject",{"2":{"239":12,"242":4,"295":12,"303":8,"304":4,"307":6,"308":14,"309":8,"310":28,"311":16,"312":10,"313":12,"314":2,"315":36,"493":4,"494":4,"551":4}}],["rebase",{"2":{"205":1,"210":6,"213":2,"214":8,"217":2}}],["recognized",{"2":{"230":2}}],["rect",{"2":{"178":4,"478":2,"578":8}}],["recursive",{"2":{"46":2}}],["repaint",{"2":{"466":3,"577":2}}],["repeating",{"2":{"186":2}}],["repeat",{"2":{"165":2,"168":4,"170":4,"195":2,"199":2,"530":1,"551":2,"578":18}}],["replaceall",{"2":{"530":1}}],["replace",{"2":{"157":2,"302":12,"346":4,"347":2,"350":2,"530":1,"571":2,"572":1,"599":8}}],["repository",{"2":{"234":4}}],["repo",{"2":{"51":4,"211":2,"396":6}}],["real",{"2":{"590":2}}],["reason",{"2":{"303":6,"304":6,"307":4,"308":8,"312":4,"313":8,"314":4,"315":8}}],["react会根据",{"2":{"147":2}}],["react中的事件是通过事件委托方式处理的",{"2":{"146":1}}],["react使用的是自定义",{"2":{"146":1}}],["react解析组件标签",{"2":{"139":2,"140":1}}],["reactdom",{"2":{"137":2,"140":2,"143":2,"144":8,"145":2}}],["react",{"2":{"137":2,"139":4,"140":2,"141":5,"143":2,"144":2,"145":6,"147":2,"278":1,"440":4}}],["readme",{"2":{"602":1}}],["readdirsync",{"2":{"599":4}}],["readonly",{"2":{"406":1,"412":2,"574":4}}],["readasdataurl",{"2":{"335":4}}],["readasarraybuffer",{"2":{"15":2,"331":2,"333":2}}],["reading",{"0":{"586":1},"1":{"587":1},"2":{"318":6,"319":10,"588":1}}],["read",{"0":{"586":1},"1":{"587":1},"2":{"234":2,"577":2,"588":1}}],["readfile",{"2":{"16":6,"22":4}}],["reader",{"2":{"15":6}}],["render中的this",{"2":{"140":2}}],["render中的this指向mycomponent组件实例对象",{"2":{"140":2}}],["render在mycomponent的原型对象上",{"2":{"140":2}}],["render",{"2":{"114":14,"137":2,"139":4,"140":3,"143":2,"144":8,"145":2,"147":4,"455":1}}],["relative+fixed",{"2":{"479":1}}],["relative",{"2":{"189":2,"190":2,"195":4,"474":4,"490":2,"551":2}}],["relateoptions",{"2":{"157":4}}],["reload",{"2":{"73":2}}],["releases",{"2":{"66":2}}],["reduceright",{"2":{"540":2}}],["reduce与",{"2":{"316":2}}],["reduce",{"0":{"376":1},"1":{"377":1,"378":1,"379":1,"380":1,"381":1,"382":1,"383":1,"384":1,"385":1},"2":{"264":2,"316":2,"326":4,"327":2,"378":5,"380":2,"381":2,"382":2,"383":2,"384":2,"385":4,"539":8,"599":4}}],["redbox",{"2":{"192":1}}],["red",{"2":{"70":1,"124":2,"192":1,"347":8,"399":2,"457":1,"458":1,"481":2}}],["redis",{"2":{"55":2}}],["referenceerror",{"2":{"516":1}}],["ref1ow",{"2":{"465":2}}],["reflow",{"2":{"465":1}}],["reflect等",{"2":{"431":1}}],["reflect",{"2":{"318":2,"414":2}}],["ref=",{"2":{"145":8,"551":2}}],["refs",{"0":{"145":1},"2":{"145":2,"211":10}}],["ref",{"2":{"13":2,"130":2,"141":1,"334":4,"335":2,"614":4}}],["rest",{"2":{"599":2}}],["restart",{"2":{"56":2,"75":2}}],["resizehandler",{"2":{"615":6}}],["resizeobserver",{"2":{"615":10}}],["resize",{"0":{"615":1},"2":{"577":2,"584":13,"615":2}}],["res2",{"2":{"525":2}}],["res1",{"2":{"525":4}}],["resp",{"2":{"494":8}}],["response",{"2":{"335":6,"488":1}}],["resarr",{"2":{"295":16}}],["resave",{"2":{"42":2}}],["reset",{"2":{"108":8}}],["resolve改变状态并执行回调函数",{"2":{"315":2}}],["resolves",{"2":{"313":8,"315":8}}],["resolvecomponentfactory",{"2":{"113":2}}],["resolve",{"2":{"15":4,"239":11,"240":4,"242":2,"295":16,"303":8,"304":4,"307":6,"308":14,"309":8,"310":30,"311":16,"312":8,"313":12,"314":12,"315":36,"418":4,"493":6,"494":12,"525":8,"551":4,"571":4,"599":12}}],["results",{"2":{"494":8}}],["result",{"2":{"10":6,"15":2,"158":14,"239":26,"240":4,"263":6,"268":6,"282":10,"283":6,"292":12,"297":10,"302":8,"308":16,"309":16,"310":34,"311":10,"315":10,"331":6,"333":2,"335":2,"348":4,"365":2,"370":4,"384":4,"493":4,"574":4}}],["res",{"2":{"9":4,"10":6,"11":6,"12":16,"15":2,"20":8,"21":6,"22":16,"28":4,"29":29,"30":8,"34":8,"35":8,"36":14,"37":12,"38":8,"42":16,"43":16,"45":6,"46":8,"243":2,"295":16,"299":36,"302":22,"326":8,"346":4,"363":4,"493":8,"494":6,"578":10}}],["requestanimationframe",{"0":{"526":1},"2":{"477":1}}],["request",{"2":{"20":3,"21":2,"22":4,"494":6}}],["requestlist",{"2":{"15":8}}],["request=",{"2":{"15":2}}],["required",{"2":{"13":14,"113":2}}],["require",{"2":{"13":18,"16":2,"18":2,"20":2,"21":2,"22":12,"25":4,"26":2,"28":2,"29":4,"30":8,"34":2,"42":4,"43":10,"46":8,"418":6,"599":4}}],["req",{"2":{"9":4,"10":4,"11":8,"12":8,"20":2,"21":4,"22":16,"28":2,"29":47,"30":14,"42":22,"43":18,"46":10}}],["63",{"2":{"589":4}}],["69",{"2":{"578":2}}],["62",{"2":{"578":2}}],["627686574f57a31b328b63ab",{"2":{"7":2}}],["62767f841f41a9d7de748124",{"2":{"6":2}}],["6标准中新增的模块化规范",{"2":{"549":1}}],["656",{"2":{"578":2}}],["65",{"2":{"531":2}}],["655",{"2":{"183":2,"185":4}}],["678",{"2":{"578":2}}],["67",{"2":{"531":4}}],["67ms",{"2":{"526":1}}],["6deg",{"2":{"481":4}}],["6秒后打印的",{"2":{"238":2}}],["61",{"2":{"198":2}}],["68d",{"2":{"195":2}}],["60hz",{"2":{"526":1}}],["600",{"2":{"493":2,"494":2,"577":2}}],["60var",{"2":{"384":1}}],["60",{"2":{"362":4,"384":1,"445":1}}],["60deg",{"2":{"186":2,"195":2}}],["60606f",{"2":{"178":2}}],["666",{"2":{"585":2}}],["667",{"2":{"578":4}}],["66",{"2":{"186":4,"302":2,"531":2}}],["6px",{"2":{"177":2}}],["642",{"2":{"578":4}}],["640px",{"2":{"489":2}}],["64",{"2":{"66":2,"370":2,"507":2,"513":1}}],["6",{"0":{"89":1,"256":1,"345":1,"421":1,"431":1},"2":{"15":2,"36":2,"37":2,"38":2,"45":2,"137":1,"186":4,"282":8,"288":2,"299":10,"319":2,"330":2,"346":4,"348":2,"349":2,"363":2,"365":2,"370":2,"383":4,"393":2,"432":2,"440":2,"539":2,"578":12}}],["转换为",{"2":{"548":1,"551":1}}],["转换为数字",{"2":{"510":2}}],["转化结果",{"2":{"491":1}}],["转化为大写",{"2":{"132":1}}],["转化为小写",{"2":{"132":1}}],["转化为json才能移除密码",{"2":{"9":2}}],["转而等待",{"2":{"456":1}}],["转而执行后续代码",{"2":{"447":1}}],["转为数组获取元素",{"2":{"266":2}}],["转存为",{"2":{"43":2}}],["转成promise",{"2":{"15":2}}],["+sum",{"2":{"539":2}}],["+str",{"2":{"302":2}}],["+delay",{"2":{"519":2}}],["+date",{"2":{"108":2}}],["+data",{"2":{"16":2}}],["+出现在左边",{"2":{"510":2}}],["++i",{"2":{"512":2}}],["++this",{"2":{"512":2}}],["++a",{"2":{"510":2}}],["++",{"2":{"385":2}}],["++deep",{"2":{"282":2}}],["+1",{"2":{"295":2}}],["+obj",{"2":{"272":2}}],["+refs",{"2":{"211":6}}],["+req",{"2":{"20":4}}],["+err",{"2":{"16":4}}],["+=",{"2":{"15":4,"252":2,"263":2,"283":2,"297":2,"302":6,"578":4,"615":4}}],["+",{"2":{"15":24,"46":14,"84":4,"108":2,"113":4,"116":4,"197":1,"239":10,"252":2,"264":2,"267":4,"269":2,"281":2,"283":2,"285":4,"287":2,"288":4,"290":4,"291":4,"292":4,"294":2,"297":2,"298":2,"301":2,"302":18,"319":2,"341":6,"346":6,"347":7,"349":2,"350":4,"365":2,"378":2,"380":2,"382":2,"384":2,"385":2,"408":2,"412":6,"474":4,"475":5,"493":6,"494":6,"510":2,"539":16,"540":2,"578":14,"599":2,"610":2}}],["+i",{"2":{"5":2}}],["hw",{"2":{"524":6}}],["hh",{"2":{"400":2}}],["hhtml",{"2":{"346":6}}],["hstr",{"2":{"349":6}}],["hsl",{"2":{"198":2}}],["h",{"2":{"346":4,"349":2,"399":4,"400":4,"543":2}}],["hdstr",{"2":{"345":8}}],["hd",{"2":{"345":4}}],["hdjfaks35fjj",{"2":{"341":2}}],["hdjfaks34fjj",{"2":{"341":2}}],["hk",{"2":{"268":2}}],["hubcombo",{"2":{"578":4,"580":2}}],["hub",{"2":{"578":6}}],["husky",{"2":{"218":1,"220":2}}],["hue",{"2":{"193":2}}],["hyphens",{"2":{"197":5}}],["hi",{"2":{"235":1}}],["hidden",{"0":{"587":1},"2":{"176":4,"231":2,"482":8,"586":6,"587":2,"611":2}}],["highlight",{"2":{"125":6}}],["highlightdirective",{"2":{"125":2}}],["highlightcolor",{"2":{"124":4,"125":6}}],["h2",{"2":{"139":4,"140":4,"346":8,"347":16,"349":8}}],["h3",{"2":{"126":4,"349":8}}],["href=",{"2":{"335":2,"350":2}}],["hr",{"2":{"122":2}}],["halfheight",{"2":{"577":4}}],["halfwidth",{"2":{"577":4}}],["have",{"2":{"234":2}}],["handlescroll",{"2":{"614":4,"615":4}}],["handlecurrentchange",{"2":{"612":2}}],["handleclick",{"2":{"577":2}}],["handle",{"2":{"536":6}}],["handler",{"2":{"158":2,"574":6}}],["hangzhou",{"2":{"55":8}}],["hasownproperty",{"2":{"277":1,"319":2,"527":2}}],["hasown",{"0":{"277":1},"2":{"277":1}}],["has",{"2":{"265":2,"266":2,"296":4,"324":4}}],["hasview",{"2":{"126":10}}],["hash",{"2":{"14":1,"15":28,"210":2}}],["hat系列",{"2":{"70":1}}],["hexo博客源码没有备份",{"0":{"607":1}}],["help",{"2":{"433":2}}],["helloworldgenerator",{"2":{"524":4}}],["hello",{"2":{"51":2,"55":2,"137":2,"262":4,"272":2,"301":3,"334":2,"345":2,"399":2,"412":2,"414":2,"524":2}}],["heros",{"2":{"122":2}}],["heroes",{"2":{"108":16}}],["hero",{"2":{"108":20}}],["height=",{"2":{"178":4,"478":4}}],["height",{"2":{"91":4,"92":6,"113":2,"168":4,"170":2,"177":4,"178":2,"179":2,"180":2,"189":2,"190":8,"195":6,"198":2,"202":2,"474":1,"475":2,"481":2,"482":2,"490":2,"551":8,"577":10,"578":32,"603":6}}],["heads",{"2":{"211":10}}],["head~3",{"2":{"210":2}}],["head",{"2":{"102":4,"105":12,"298":18,"302":4,"303":4}}],["headerbg",{"2":{"614":8}}],["headers",{"2":{"45":2}}],["header",{"2":{"43":2,"172":2,"590":4,"614":4}}],["healthcheck",{"2":{"61":2}}],["hover",{"2":{"465":1}}],["hobby",{"2":{"318":6,"319":10}}],["hour",{"2":{"268":2}}],["hosts",{"2":{"450":4}}],["hostname",{"2":{"235":4}}],["hostlistener",{"2":{"125":6}}],["hostview",{"2":{"113":4}}],["host选择是是把宿主元素作为目标的唯一方式",{"2":{"98":1}}],["host主机模式",{"2":{"62":2}}],["host",{"0":{"592":1},"1":{"593":1,"594":1},"2":{"34":2,"62":2,"98":2,"99":2,"235":2,"590":2,"592":2}}],["home",{"2":{"21":2,"61":4,"150":2,"151":4,"152":4,"153":4,"427":2}}],["h1",{"2":{"21":12,"22":8,"84":4,"137":4,"143":4,"346":14,"349":14}}],["htm",{"2":{"350":2}}],["htmlevents",{"2":{"584":2}}],["htmlelement",{"2":{"113":2}}],["htmlcanvaselement",{"2":{"551":6}}],["htmlwebpackplugin",{"2":{"418":4,"548":1}}],["html=",{"2":{"347":2}}],["htmlangular",{"2":{"129":1}}],["html标签",{"2":{"99":1}}],["html",{"0":{"454":1,"456":1,"566":1},"2":{"20":2,"21":6,"22":14,"78":1,"85":2,"86":1,"87":1,"88":1,"102":4,"103":2,"104":4,"105":6,"106":4,"107":1,"109":2,"113":2,"114":6,"116":8,"117":1,"118":1,"119":1,"121":2,"122":1,"124":1,"128":3,"133":1,"150":1,"151":1,"152":1,"153":1,"168":1,"170":1,"177":1,"178":1,"303":5,"347":2,"418":6,"444":1,"445":1,"449":3,"455":2,"456":6,"478":1,"482":1,"483":1,"528":1,"548":1,"551":3,"573":2,"586":3,"587":2,"609":1}}],["http缓存",{"0":{"471":1}}],["http与https区别",{"0":{"469":1}}],["https",{"2":{"66":2,"229":1,"396":2,"469":1}}],["http",{"0":{"40":1,"452":1,"454":1},"1":{"453":1},"2":{"15":6,"20":7,"21":6,"22":12,"40":1,"42":2,"43":2,"45":2,"46":5,"51":2,"62":2,"243":8,"449":3,"452":1,"454":1,"469":1,"573":1,"589":4}}],["vh",{"2":{"583":2}}],["vp",{"2":{"603":2}}],["vpnavbarhamburger",{"2":{"603":2}}],["vpn",{"2":{"578":2}}],["vpe节点",{"2":{"577":2}}],["vpe",{"2":{"577":2,"578":2}}],["vnode是一个纯",{"2":{"560":1}}],["vnode",{"0":{"560":1},"2":{"560":2}}],["vm",{"2":{"553":1}}],["vw",{"2":{"488":1,"583":2}}],["v1",{"2":{"396":2}}],["vendor",{"2":{"571":2}}],["ve",{"2":{"235":1}}],["verify",{"2":{"230":2}}],["vertical",{"2":{"176":2,"177":2,"577":2,"611":2}}],["version",{"2":{"51":2,"396":2}}],["vscode",{"2":{"357":2}}],["vs",{"0":{"230":1}}],["vdom",{"2":{"137":4}}],["v8及以前",{"2":{"113":1}}],["v9和v10",{"2":{"113":1}}],["void\\t",{"2":{"400":2}}],["void",{"2":{"103":4,"104":4,"105":4,"106":4,"108":2,"109":16,"113":6,"114":2,"116":4,"121":2,"126":2,"411":2,"427":2}}],["volume",{"2":{"61":2}}],["visible",{"2":{"609":2}}],["visible=",{"2":{"609":2}}],["video",{"2":{"483":1}}],["vite项目",{"0":{"564":1}}],["vite",{"2":{"535":1,"564":4,"589":2,"599":2,"602":4}}],["vitepress也不生效",{"2":{"602":1}}],["vitepress添加本地搜索功能",{"0":{"600":1},"1":{"601":1,"602":1,"603":1}}],["vitepress踩坑记录",{"0":{"591":1},"1":{"592":1,"593":1,"594":1,"595":1,"596":1,"597":1,"598":1,"599":1,"600":1,"601":1,"602":1,"603":1}}],["vitepress",{"2":{"395":2,"599":8,"601":2,"602":3}}],["vite底层原理学习",{"0":{"148":1},"1":{"149":1}}],["viewregister",{"2":{"577":4,"578":2}}],["view",{"2":{"553":1}}],["viewer",{"2":{"211":10}}],["viewcontainer",{"2":{"126":8}}],["viewcontainerref",{"2":{"126":4}}],["viewchild获取子组件一样",{"2":{"113":2}}],["viewchildren批量获取元素和组件",{"2":{"104":4}}],["viewchildren",{"0":{"104":1},"2":{"104":6}}],["viewchild",{"0":{"103":1},"2":{"103":8,"104":2,"118":2,"121":4}}],["viewtomodelupdate",{"2":{"118":2}}],["viewmodel",{"2":{"118":2,"553":1}}],["vi",{"2":{"75":2}}],["vim",{"2":{"55":4}}],["v",{"2":{"72":2,"211":4,"324":18,"347":2,"547":2,"553":1,"610":4,"611":2}}],["v2",{"2":{"66":2}}],["val2",{"2":{"318":4}}],["val1",{"2":{"318":4}}],["val",{"2":{"114":4,"153":2,"299":12,"316":6,"322":6,"323":4,"324":4,"380":4,"382":4,"509":6,"510":1,"523":2,"536":14,"610":2}}],["val=",{"2":{"114":4,"150":2,"322":2}}],["valueof",{"0":{"533":1},"2":{"509":1,"512":3,"530":1,"533":6}}],["value=",{"2":{"123":8}}],["values",{"2":{"36":2,"265":2,"357":2}}],["value",{"2":{"13":4,"36":4,"96":6,"107":8,"108":2,"114":8,"117":4,"118":8,"130":6,"146":4,"157":10,"158":2,"265":13,"296":14,"298":8,"300":56,"303":8,"304":8,"305":4,"306":4,"307":20,"308":28,"309":4,"310":28,"311":22,"312":8,"313":4,"314":4,"315":54,"334":12,"335":4,"357":2,"364":4,"365":10,"523":4,"525":10,"574":10,"578":6,"589":2,"610":10,"614":4}}],["var",{"0":{"514":1},"1":{"515":1,"516":1},"2":{"61":4,"130":2,"282":4,"288":3,"300":8,"303":2,"307":1,"363":1,"364":3,"365":4,"370":4,"384":2,"389":1,"495":2,"498":2,"512":8,"514":1,"524":2,"574":2,"584":4,"602":2,"603":2}}],["vue项目踩坑一",{"0":{"608":1},"1":{"609":1,"610":1,"611":1,"612":1,"613":1,"614":1,"615":1}}],["vuepress踩坑记录",{"0":{"604":1},"1":{"605":1,"606":1,"607":1}}],["vueproject",{"2":{"599":2}}],["vuerouter",{"2":{"572":4}}],["vuerouter的base属性是指应用的基路径",{"2":{"572":1}}],["vuerouter的",{"0":{"572":1}}],["vue3",{"0":{"561":1}}],["vue声明周期",{"0":{"555":1},"1":{"556":1}}],["vue中循环注册组件",{"0":{"375":1}}],["vue中的key有什么作用",{"2":{"147":2}}],["vue模板解析",{"2":{"338":1}}],["vuex",{"2":{"156":2,"157":2,"426":2}}],["vue",{"0":{"15":1,"45":1,"158":1,"563":1,"573":1},"2":{"15":1,"45":1,"46":2,"278":1,"335":1,"357":1,"375":1,"427":2,"429":1,"432":1,"433":4,"554":1,"560":1,"563":6,"573":9,"574":2,"610":1,"613":2,"614":3}}],["发起",{"0":{"452":1},"1":{"453":1},"2":{"449":1}}],["发生继承时",{"2":{"410":1}}],["发生了什么",{"2":{"139":2,"140":1}}],["发现代码有的有点小问题",{"2":{"213":1}}],["发现组件是使用类定义的",{"2":{"140":1}}],["发现组件是使用函数定义的",{"2":{"139":2}}],["发布和拉取",{"2":{"55":2}}],["发送请求",{"2":{"494":2}}],["发送网络请求",{"2":{"147":4}}],["发送并保存在客户端",{"2":{"43":1}}],["发送合并切片请求",{"2":{"14":1}}],["发请求检查文件是否已传过",{"2":{"14":1}}],["秒传成功",{"2":{"14":1}}],["b路由组件",{"2":{"612":2}}],["bg",{"2":{"578":2,"603":2,"614":2}}],["bfs",{"0":{"544":1},"2":{"544":9}}],["bfc",{"2":{"482":2}}],["bfa",{"2":{"99":2}}],["blur",{"2":{"610":2}}],["blur=",{"2":{"610":2}}],["blue",{"2":{"399":2,"481":2,"491":10}}],["block",{"2":{"113":2,"121":2,"189":2,"190":4,"490":2,"551":2}}],["blobarraybuffer",{"2":{"330":6,"332":2}}],["blob与",{"0":{"329":1}}],["blob",{"2":{"15":6,"229":1,"329":4,"330":6,"335":10,"336":2}}],["bc41wb16",{"2":{"357":2}}],["bset",{"2":{"324":4}}],["bst",{"2":{"300":16}}],["b表达式",{"2":{"258":1}}],["bruce",{"2":{"385":4}}],["breg",{"2":{"349":6}}],["breakpoint",{"2":{"489":1}}],["break立即循环停止",{"2":{"260":1}}],["break与continue💔终止离它最近的循环",{"2":{"260":1}}],["break",{"2":{"259":2,"316":2}}],["branches",{"2":{"396":2}}],["branch",{"2":{"206":6,"211":4,"217":4,"396":2}}],["bridge",{"2":{"62":2}}],["bbb",{"2":{"195":2}}],["be",{"2":{"295":2,"551":2,"592":1}}],["beforeunmount",{"2":{"615":2}}],["beforeupdate",{"2":{"555":2}}],["beforedestroy",{"2":{"577":2}}],["beforedestory",{"2":{"555":2}}],["beforemount",{"2":{"555":2,"556":6,"559":2}}],["beforecreate",{"0":{"557":1},"2":{"555":2,"556":6,"559":2}}],["before在",{"2":{"459":1}}],["before",{"2":{"179":2,"190":2,"195":4,"197":2,"609":2}}],["bestbydate",{"2":{"135":2}}],["b=",{"2":{"145":2,"325":2}}],["b=10",{"2":{"61":2}}],["bai",{"2":{"532":6}}],["baidulet",{"2":{"350":1}}],["baidu88baidu",{"2":{"350":2}}],["baidu",{"2":{"341":2,"346":8,"347":12,"349":12,"350":5,"532":10}}],["backlist",{"2":{"599":10}}],["back3",{"2":{"578":4}}],["back2",{"2":{"578":4}}],["back1",{"2":{"578":4}}],["backdrop",{"2":{"479":1}}],["backgroundcolor",{"2":{"125":2}}],["background",{"2":{"99":3,"156":2,"177":4,"178":2,"179":2,"184":4,"185":1,"186":14,"189":4,"190":2,"195":10,"198":8,"199":6,"203":2,"478":1,"481":2,"491":10,"551":2,"603":4}}],["bark",{"2":{"409":4,"410":4,"411":2}}],["banana",{"2":{"364":4}}],["babel在webpack中的加载器",{"2":{"422":1}}],["babel的预定义环境",{"2":{"422":1}}],["babel的核心工具",{"2":{"422":1}}],["babel作用",{"2":{"422":1}}],["babel语法降级",{"2":{"149":1}}],["babel",{"0":{"422":1},"2":{"139":4,"418":6,"422":6,"423":4,"570":3}}],["bashnpm",{"2":{"417":1,"601":1}}],["bashnginx",{"2":{"73":1}}],["bashhost",{"2":{"235":1}}],["bashgit",{"2":{"234":1}}],["bashget",{"2":{"223":1}}],["bashthe",{"2":{"230":1}}],["bashcode",{"2":{"228":1}}],["bashcurl",{"2":{"66":1}}],["bash$profile$profile",{"2":{"227":1}}],["bashoh",{"2":{"224":1,"227":1}}],["bashwinget",{"2":{"222":1}}],["baship",{"2":{"75":1}}],["bash",{"2":{"55":3,"56":6,"59":2,"61":2,"63":2,"64":1,"234":1}}],["bashagt",{"2":{"55":1}}],["bashdocker",{"2":{"55":1,"56":1,"57":1,"58":1,"59":1,"62":1,"63":1,"64":1}}],["bashset",{"2":{"234":1}}],["bashssh",{"2":{"232":1,"234":2,"235":1}}],["bashsystemctl",{"2":{"54":1}}],["bashsudo",{"2":{"51":1}}],["base属性可以通过以下方式设置",{"2":{"572":1}}],["baseurl不可少",{"2":{"433":2}}],["baseurl",{"2":{"433":2,"440":4}}],["base64",{"2":{"336":1}}],["baseschema",{"2":{"13":8}}],["base",{"0":{"572":1},"2":{"13":5,"414":2,"440":2,"572":4,"573":4}}],["btns",{"2":{"536":8}}],["btncls3",{"2":{"90":10}}],["btncls2",{"2":{"90":10}}],["btncls",{"2":{"90":10}}],["btn",{"2":{"89":24,"90":12,"357":2,"536":2}}],["bubbles",{"2":{"584":2}}],["bubblesort",{"2":{"287":2}}],["bubble",{"2":{"577":2}}],["bundle",{"2":{"418":2}}],["bunits",{"2":{"302":4}}],["but",{"2":{"235":1}}],["buttonlabel",{"2":{"602":2}}],["button",{"2":{"15":4,"46":4,"86":4,"89":36,"90":36,"93":8,"96":4,"108":4,"116":16,"121":4,"126":4,"130":8,"189":4,"357":4,"491":30,"603":6}}],["buildlocal",{"2":{"573":4}}],["build对代码进行编译",{"2":{"421":1}}],["build",{"2":{"61":6,"395":2,"396":12,"420":2,"573":8}}],["b",{"0":{"324":1,"328":1},"2":{"17":4,"146":3,"147":2,"168":10,"170":10,"173":4,"243":4,"253":2,"256":4,"258":3,"264":6,"284":8,"287":16,"297":8,"316":4,"319":8,"321":2,"322":2,"324":16,"388":13,"389":4,"399":12,"400":6,"402":4,"432":2,"524":4,"539":8}}],["big",{"2":{"513":1}}],["bigchinese",{"2":{"302":4}}],["bigint转为数字",{"2":{"509":1}}],["bigint",{"2":{"261":2,"414":2,"506":1}}],["bin",{"2":{"55":2,"56":6,"59":2,"61":4,"63":2,"66":2,"395":2,"563":3,"564":3}}],["bind修改它的this",{"2":{"262":1}}],["bind可以为新函数绑定参数",{"2":{"262":1}}],["bind可以为新函数绑定this",{"2":{"262":1}}],["bind",{"2":{"13":2,"86":2,"262":3,"303":4,"304":4,"315":4,"574":4}}],["bio",{"2":{"13":2}}],["bower",{"2":{"414":2}}],["bob",{"2":{"385":4}}],["bottom",{"2":{"179":2,"184":2,"189":2,"190":4,"195":10,"474":2,"479":1,"490":4}}],["boxs",{"2":{"104":14}}],["box",{"2":{"103":10,"105":20,"106":28,"108":4,"164":2,"166":2,"167":4,"168":6,"170":4,"176":4,"183":1,"184":2,"185":2,"190":6,"191":1,"195":7,"198":4,"199":2,"203":2,"474":2,"475":4}}],["border",{"2":{"91":4,"92":6,"98":2,"168":2,"170":2,"177":2,"185":2,"188":6,"189":2,"190":8,"195":8,"457":1,"475":3,"481":2,"482":4,"491":10,"603":10,"609":2}}],["boost",{"2":{"107":2}}],["bootstrap",{"0":{"82":1},"2":{"78":1,"82":4}}],["boolean值",{"2":{"428":1,"434":1,"435":1,"436":1,"437":1}}],["boolean类型",{"2":{"426":1,"427":1}}],["boolean\\t",{"2":{"122":8}}],["boolean",{"2":{"7":4,"108":2,"126":2,"261":2,"318":2,"400":2,"506":2,"519":4}}],["bodyparser",{"2":{"43":4}}],["body",{"2":{"9":2,"10":2,"11":8,"12":2,"13":2,"30":6,"42":6,"43":6,"113":2,"177":4,"202":1,"303":4,"479":1,"541":4,"574":4,"589":2}}],["模糊电话后四位",{"0":{"353":1}}],["模糊查询",{"2":{"4":1}}],["模式修正符号i",{"0":{"345":1}}],["模版中还可以写些简单的逻辑",{"2":{"84":1}}],["模板变量可以通过一条或多条管道格式化数据",{"2":{"132":1}}],["模板引用变量",{"0":{"130":1}}],["模板元素",{"0":{"127":1},"1":{"128":1,"129":1,"130":1}}],["模板的引用",{"2":{"121":2}}],["模板中的dom事件触发就会进行变更检测",{"2":{"109":1}}],["模板来源",{"0":{"85":1}}],["模板表达式遵循原则",{"2":{"84":1}}],["模板表达式",{"0":{"84":1}}],["模板基础语法",{"0":{"83":1},"1":{"84":1,"85":1,"86":1,"87":1,"88":1,"89":1,"90":1,"91":1,"92":1,"93":1,"94":1,"95":1,"96":1}}],["模块名到基于",{"2":{"440":2}}],["模块名或路径映射的列表",{"2":{"433":1}}],["模块解析选项",{"2":{"440":2}}],["模块实际位置",{"2":{"433":4}}],["模块想要正常工作",{"2":{"80":2}}],["模块中使用的组件必须先在declarations",{"2":{"79":2}}],["模块多次",{"2":{"26":1}}],["模块加载机制",{"0":{"26":1}}],["模块共享",{"0":{"25":1}}],["模块分为",{"2":{"23":1}}],["模块化开发支持",{"2":{"149":1}}],["模块化",{"0":{"23":1,"535":1},"1":{"24":1,"25":1}}],["模块",{"0":{"27":1,"34":1},"1":{"28":1,"29":1},"2":{"20":1,"34":1}}],["模型演变而来",{"2":{"553":1}}],["模型",{"0":{"13":1}}],["获取和解析命令行参数",{"2":{"563":1}}],["获取本次",{"2":{"525":2}}],["获取数据",{"2":{"523":2}}],["获取数量",{"2":{"266":2}}],["获取原始值",{"2":{"509":1}}],["获取原来的文件名",{"2":{"46":2}}],["获取布局属性时",{"2":{"465":1}}],["获取目录结构",{"0":{"357":1}}],["获取缓存中对应key的值",{"2":{"296":2}}],["获取map的所有的value",{"2":{"265":1}}],["获取map的所有的valueconst",{"2":{"265":1}}],["获取map的所有的key",{"2":{"265":2}}],["获取map中键值对的数量",{"2":{"265":2}}],["获取render之前的dom状态",{"2":{"147":1}}],["获取到powershell配置文件绝对路径",{"2":{"227":1}}],["获取到",{"2":{"121":2}}],["获取",{"2":{"118":2}}],["获取不到最新输入属性值",{"2":{"109":2}}],["获取全部投影组件",{"2":{"106":2}}],["获取所有组件需开启",{"2":{"106":1}}],["获取组件的变量elseblocks",{"2":{"121":2}}],["获取组件实例",{"2":{"113":2}}],["获取组件",{"2":{"105":2}}],["获取投影中的dom元素",{"2":{"105":3}}],["获取子组件实例方式二",{"2":{"103":2}}],["获取子组件方式一",{"2":{"103":2}}],["获取dom",{"2":{"103":2,"125":2}}],["获取用户信息成功",{"2":{"43":2}}],["获取用户信息",{"2":{"43":2}}],["获取用户姓名的接口",{"2":{"42":2}}],["获取文件前缀",{"2":{"46":2}}],["获取文件扩展名",{"2":{"17":1}}],["获取文章列表",{"2":{"12":2}}],["获取一个文章",{"2":{"12":2}}],["文本溢出隐藏处理后对不齐问题",{"0":{"611":1}}],["文本行斑马线",{"0":{"198":1}}],["文末也会附上笔者整理的所有tsconfig",{"2":{"425":1}}],["文件下载好",{"2":{"456":1}}],["文件还没有下载解析好",{"2":{"456":1}}],["文件和外部的js",{"2":{"456":1}}],["文件而不是源文件的位置",{"2":{"440":2}}],["文件大小",{"2":{"357":2}}],["文件操作",{"0":{"334":1}}],["文件名就是config",{"2":{"235":1}}],["文件中也没有找到对应的条目",{"2":{"450":1}}],["文件中的错误",{"2":{"440":2}}],["文件中",{"2":{"221":1,"563":1,"564":1}}],["文件夹名称",{"2":{"208":4}}],["文件",{"2":{"208":4,"440":8,"450":2,"456":1,"497":1,"548":1}}],["文章模型",{"2":{"13":2}}],["文章查询列表成功",{"2":{"12":2}}],["文章查询成功",{"2":{"12":2}}],["文章不存在",{"2":{"12":2}}],["文章更新成功",{"2":{"11":2}}],["文章删除成功",{"2":{"10":2}}],["文档相关操作",{"0":{"3":1},"1":{"4":1,"5":1,"6":1,"7":1}}],["easing",{"2":{"578":10}}],["easecubic",{"2":{"578":10}}],["ease",{"2":{"179":2}}],["echart文档参考",{"2":{"585":1}}],["echarts问题总结",{"0":{"582":1},"1":{"583":1,"584":1,"585":1}}],["echo",{"2":{"420":2}}],["ecmascript",{"2":{"388":1,"440":2}}],["equaltype",{"2":{"318":4}}],["edit",{"2":{"213":3,"214":2,"610":4}}],["edb21d",{"2":{"195":2}}],["edges",{"2":{"577":4}}],["edge",{"2":{"194":1,"577":2}}],["es7",{"2":{"414":2}}],["es2020",{"2":{"414":18}}],["es2019",{"2":{"414":12}}],["es2018",{"2":{"414":14}}],["es2017",{"2":{"414":14,"429":1,"440":2}}],["es2016",{"2":{"414":6,"429":1,"440":2}}],["es2015",{"2":{"414":28,"419":4,"429":1,"430":1,"440":4}}],["es6module都支持",{"2":{"535":1}}],["es6",{"0":{"502":1},"2":{"414":6,"429":1,"430":2,"431":2,"492":1,"549":2}}],["es6的flat方法实现",{"2":{"282":2}}],["es5",{"2":{"414":4,"429":1,"431":1,"440":4}}],["es3",{"2":{"414":2,"429":2,"440":2}}],["eslint的rule中也有该条",{"2":{"435":1}}],["eslintrc",{"2":{"357":2}}],["eslint代码检查",{"2":{"149":1}}],["esnext",{"2":{"414":14,"429":3,"430":1,"431":1,"440":4}}],["esn",{"2":{"158":4}}],["es",{"2":{"149":1}}],["eval",{"2":{"539":2}}],["evaluated",{"2":{"426":2}}],["every",{"2":{"318":2,"328":2,"348":4}}],["evenly",{"2":{"167":4}}],["even",{"2":{"122":8}}],["eventhandle",{"2":{"577":2}}],["eventb",{"2":{"293":6}}],["eventa",{"2":{"293":6}}],["eventname",{"2":{"293":14}}],["eventemitter",{"2":{"96":4,"113":4,"116":8,"125":4,"293":14}}],["event",{"2":{"93":4,"125":2,"146":12,"528":4,"551":4,"584":8}}],["ev=",{"2":{"122":2}}],["ev",{"2":{"122":4,"584":4}}],["empty",{"2":{"592":1}}],["employee",{"2":{"406":6}}],["em",{"2":{"458":1}}],["embeddedviewref",{"2":{"113":4}}],["emulated",{"2":{"101":1}}],["emitdecoratormetadata",{"2":{"440":2}}],["emit",{"2":{"96":2,"113":2,"116":8,"125":2,"293":6}}],["email",{"2":{"13":2}}],["ei",{"2":{"73":2}}],["etc",{"2":{"61":10,"75":2,"450":1}}],["ef",{"2":{"51":2,"72":1}}],["enum\\t",{"2":{"400":2}}],["english",{"2":{"384":2}}],["en",{"2":{"268":2}}],["entries",{"2":{"266":2,"599":2,"615":4}}],["entry",{"2":{"250":6,"265":2,"357":8,"418":2}}],["entrycomponents可能被删除",{"2":{"113":1}}],["entrypoint",{"2":{"61":4}}],["enteries",{"2":{"250":4}}],["enter",{"2":{"108":2}}],["ens160",{"2":{"75":2}}],["environment",{"2":{"418":2}}],["env",{"2":{"61":2,"395":2,"396":2,"418":2,"422":2,"423":2,"570":4,"573":8}}],["enable",{"2":{"54":2}}],["enctype=",{"2":{"46":2}}],["endswith",{"2":{"530":1}}],["ending",{"2":{"524":2}}],["enddate",{"2":{"294":4}}],["end",{"2":{"15":8,"20":2,"21":2,"22":8,"168":4,"172":4,"173":6,"174":4,"294":4}}],["e",{"2":{"15":4,"45":4,"214":2,"249":2,"331":16,"333":8,"335":4,"395":2,"400":13,"495":20,"551":4,"577":2,"610":4,"615":6}}],["example",{"2":{"572":1,"573":1}}],["exclude排除那些不需要编译的文件或文件夹",{"2":{"439":1}}],["exclude",{"2":{"357":4,"414":4,"418":2,"423":2,"439":2,"440":2,"599":4}}],["exe",{"2":{"231":2,"420":2}}],["exe的路径",{"2":{"231":2}}],["execcommand",{"2":{"574":4}}],["exec输出结果中",{"2":{"346":2}}],["execute",{"2":{"551":2}}],["executor",{"2":{"303":4,"304":4,"315":4}}],["executable",{"2":{"230":2}}],["exec",{"2":{"56":2}}],["exit退出不会停止容器",{"2":{"56":2}}],["exit",{"2":{"56":2,"420":2}}],["exists",{"2":{"234":2}}],["existssync",{"2":{"46":2,"599":2}}],["exist",{"2":{"15":2,"586":2}}],["extensions",{"2":{"418":2}}],["extend适用于继承现有样式并生成新的选择器",{"2":{"491":1}}],["extend的选择器的样式",{"2":{"491":1}}],["extend的区别",{"0":{"491":1}}],["extend则会生成一个新的选择器",{"2":{"491":1}}],["extend",{"2":{"427":2,"491":8}}],["extends",{"2":{"140":2,"143":2,"144":2,"145":2,"220":2,"271":2,"405":2,"406":6,"409":2,"410":2,"411":2,"414":4,"424":2,"440":2,"502":2}}],["extended",{"2":{"30":2,"42":2,"43":2}}],["extname",{"2":{"17":2,"46":2}}],["expires=xxx",{"2":{"523":2}}],["expires",{"2":{"471":1}}],["expiresin",{"2":{"43":2}}],["experimentaldecorators",{"0":{"426":1},"2":{"440":2}}],["exponent",{"2":{"107":8}}],["expose",{"2":{"61":2}}],["exported",{"2":{"551":2}}],["export",{"2":{"59":2,"84":2,"85":2,"89":2,"90":2,"91":2,"92":2,"93":2,"95":4,"96":4,"103":2,"104":2,"105":2,"106":2,"107":2,"108":4,"109":2,"113":6,"114":2,"116":8,"119":2,"121":6,"122":2,"123":2,"125":2,"126":6,"130":4,"151":2,"152":2,"153":2,"156":1,"157":2,"427":1,"551":1,"574":2,"578":8,"585":1,"589":1,"602":2,"610":2}}],["exports中",{"2":{"418":2}}],["exports=",{"2":{"25":2}}],["exports将模块内部成员共享",{"2":{"24":1}}],["exports模式是空对象",{"2":{"24":1}}],["exports",{"2":{"9":1,"10":1,"11":1,"12":4,"13":8,"25":6,"30":2,"220":2,"418":2,"570":2,"573":2}}],["expressionoh",{"2":{"227":1}}],["expression",{"2":{"224":2,"227":1}}],["expressjwt",{"2":{"43":4}}],["express",{"0":{"27":1,"28":1,"29":1,"46":1},"1":{"28":1,"29":1},"2":{"28":6,"29":12,"30":14,"42":16,"43":15,"46":8}}],["expports指向的对象",{"2":{"25":1}}],["expports为准",{"2":{"25":1}}],["elet",{"2":{"400":1}}],["ele",{"2":{"375":2,"541":18}}],["element",{"0":{"588":1},"2":{"364":4,"528":1,"574":2,"588":1}}],["elementref",{"2":{"103":4,"105":8,"125":4}}],["ellipsislength",{"2":{"578":6}}],["ellipsis",{"2":{"176":4,"578":6,"611":2}}],["elseblocks",{"2":{"121":6}}],["elseblock",{"2":{"121":10}}],["else",{"0":{"244":1},"1":{"245":1,"246":1,"247":1},"2":{"15":2,"21":2,"22":4,"121":6,"126":2,"159":2,"245":6,"246":2,"247":2,"259":4,"279":10,"282":2,"292":6,"295":2,"296":2,"300":20,"302":2,"309":4,"310":6,"311":2,"312":2,"315":4,"316":2,"357":2,"385":2,"525":2,"541":4,"577":4,"578":16,"584":2,"599":4,"610":6,"614":2}}],["el",{"2":{"15":8,"125":4,"374":4,"574":30,"609":16,"610":12,"611":4}}],["err",{"0":{"592":1},"1":{"593":1,"594":1},"2":{"16":12,"18":6,"22":8,"34":6,"35":6,"36":12,"37":12,"38":12,"43":4,"45":6,"295":16,"493":4,"494":4,"592":1}}],["errs",{"2":{"10":2,"11":2,"12":8}}],["error",{"2":{"9":4,"10":4,"11":4,"12":8,"13":4,"15":2,"159":2,"217":2,"234":2,"239":11,"242":4,"288":2,"295":6,"302":2,"306":8,"308":16,"309":8,"310":20,"311":4,"315":6,"400":2,"420":2,"428":2,"434":2,"493":4,"506":1,"551":4,"610":4}}],["nitro",{"2":{"589":2,"590":1}}],["niltor",{"2":{"229":1}}],["nreversed",{"2":{"298":2}}],["n5",{"2":{"298":4}}],["n4",{"2":{"298":6}}],["n3",{"2":{"298":6}}],["n2",{"2":{"298":6,"399":2}}],["n1+n2",{"2":{"399":2}}],["n1",{"2":{"298":6,"399":2}}],["npm",{"0":{"562":1},"1":{"563":1,"564":1},"2":{"221":2,"395":2,"416":1,"418":10,"422":1,"563":2,"564":1,"570":1}}],["n",{"2":{"208":2,"281":18,"285":14,"301":4,"302":6,"347":4,"362":4,"373":4,"509":1,"510":2,"543":2,"544":2}}],["nav",{"2":{"586":4}}],["native",{"2":{"440":2}}],["nativeelement",{"2":{"103":4,"125":2}}],["nan不和任何值相等",{"2":{"257":2}}],["nan",{"2":{"251":2,"255":2,"322":10,"323":2,"509":5,"511":1,"512":4}}],["namenum",{"2":{"385":4}}],["names",{"2":{"385":4}}],["name就可以调用",{"2":{"272":2}}],["namearr",{"2":{"157":4}}],["name===",{"2":{"245":6}}],["name=",{"2":{"29":4,"37":2,"46":2,"56":4,"118":2,"123":8,"144":6,"146":4}}],["name",{"2":{"2":2,"4":18,"5":20,"6":2,"13":2,"15":18,"25":12,"29":8,"30":2,"35":4,"36":4,"37":4,"43":2,"62":4,"63":2,"64":8,"107":2,"108":30,"118":10,"122":12,"133":2,"144":14,"157":10,"158":4,"159":6,"230":4,"231":2,"234":1,"245":8,"246":6,"247":2,"265":4,"269":10,"270":30,"271":10,"272":2,"318":6,"319":10,"325":18,"357":16,"396":14,"399":12,"400":4,"401":2,"402":2,"404":10,"405":16,"406":60,"407":24,"409":10,"410":10,"428":8,"450":1,"498":8,"502":4,"503":4,"504":4,"527":2,"536":4,"571":4,"578":34,"580":2,"609":4,"610":12}}],["ngswitchdefault",{"2":{"123":4}}],["ngswitchcase=",{"2":{"123":12}}],["ngswitchcase为结构型指令",{"2":{"123":1}}],["ngswitch",{"0":{"123":1},"2":{"123":6}}],["ngstyle只接收对象",{"2":{"92":2}}],["ngstyle",{"2":{"92":6}}],["ngfortrackby",{"2":{"122":2}}],["ngfor",{"2":{"122":2}}],["ngfor展开写法",{"2":{"122":1}}],["ngforof",{"2":{"122":4}}],["ngfor局部变量",{"2":{"122":1}}],["ngfor指令",{"0":{"122":1}}],["ngfor=",{"2":{"108":2,"122":2}}],["ngiterable",{"2":{"122":2}}],["ngifthen",{"2":{"121":1}}],["ngifelese",{"2":{"121":1}}],["ngif",{"2":{"121":3}}],["ngif=",{"2":{"121":12}}],["ngif指令",{"0":{"121":1}}],["nginx安装",{"0":{"69":1},"1":{"70":1,"71":1,"72":1}}],["nginx",{"0":{"613":1},"2":{"61":24,"70":2,"72":6,"73":4,"573":2,"589":2,"590":3}}],["ngmoel",{"2":{"117":4}}],["ngmodel拓展",{"2":{"118":1}}],["ngmodeloptions",{"2":{"118":6}}],["ngmodelchange",{"2":{"117":2}}],["ngmodel",{"2":{"107":4,"117":2,"118":21,"123":8}}],["ngmodule装饰器中",{"2":{"80":2}}],["ngmodule元数据",{"0":{"78":1}}],["ngmodule所装饰的类被称为angular",{"2":{"77":1}}],["ngmodule",{"0":{"77":1},"1":{"78":1,"79":1,"80":1,"81":1,"82":1}}],["ngtemplateoutlet=",{"2":{"114":4}}],["ngtemplateoutletcontext",{"2":{"114":4}}],["ngtemplateoutlet",{"2":{"114":6}}],["ngtemplateoutlet是一个结构型指令",{"2":{"114":1}}],["ngtemplateoutlet指令",{"0":{"114":1}}],["ngafterviewchecked",{"2":{"109":6}}],["ngafterviewinit",{"2":{"103":8,"104":2,"105":2,"106":2,"109":5}}],["ngaftercontentchecked",{"2":{"109":6}}],["ngaftercontentinit",{"2":{"109":5}}],["ngdocheck",{"2":{"109":6}}],["ngondestroy",{"2":{"109":5}}],["ngonchanges",{"2":{"109":3,"126":2}}],["ngoninit",{"2":{"103":10,"104":2,"105":2,"106":2,"108":2,"109":5,"113":4,"114":2,"116":4,"121":4}}],["ng",{"0":{"128":1,"129":1},"2":{"102":12,"105":4,"114":38,"121":20,"122":4,"123":16,"128":5,"129":4}}],["ngclass",{"2":{"90":6}}],["nofallthroughcasesinswitch",{"2":{"440":2}}],["nounusedparameters",{"0":{"436":1},"2":{"440":2}}],["nounusedlocals",{"0":{"435":1},"2":{"440":2}}],["noimplicitreturns",{"2":{"440":2}}],["noimplicitthis",{"2":{"414":2,"434":1,"440":2}}],["noimplicitany",{"0":{"428":1},"2":{"414":2,"434":1,"440":2}}],["noemitonerror",{"2":{"414":2}}],["noemit",{"2":{"414":2,"440":2}}],["nologo",{"2":{"231":4}}],["nologo为隐藏提示语",{"2":{"231":1}}],["non",{"2":{"134":1}}],["none",{"2":{"62":2,"101":1,"177":8,"189":4,"197":2,"414":2,"430":1,"459":1,"479":1,"491":10,"603":2,"605":2}}],["no",{"2":{"134":1,"195":2,"199":2,"213":3,"234":1,"420":2,"551":2,"578":2}}],["normal",{"2":{"107":2}}],["notification",{"2":{"574":6}}],["note",{"2":{"195":2}}],["not",{"2":{"21":2,"22":4,"197":1,"230":2,"234":3,"235":1,"288":2,"519":2,"551":2,"586":2}}],["nodesfilter",{"2":{"577":2}}],["nodes",{"2":{"543":24,"544":22,"577":4}}],["node模块解析方式",{"2":{"432":2}}],["node",{"0":{"23":1,"33":1,"44":1},"1":{"24":1,"25":1,"34":1,"35":1,"36":1,"37":1,"38":1,"45":1,"46":1},"2":{"16":2,"25":1,"298":12,"300":36,"357":2,"396":7,"414":2,"418":2,"423":2,"432":1,"439":2,"440":8,"535":1,"543":22,"544":28,"549":1,"563":3,"564":3,"570":2,"571":4,"573":2,"577":6,"613":2}}],["node大文件上传",{"0":{"14":1},"1":{"15":1}}],["nowrap",{"2":{"176":2,"611":2}}],["now",{"2":{"13":4,"46":2,"108":4,"519":4,"520":8}}],["nuxt",{"0":{"590":1}}],["num2",{"2":{"408":4}}],["num1",{"2":{"408":4}}],["nums",{"2":{"362":2,"382":6}}],["numstr",{"2":{"302":6}}],["nums2",{"2":{"292":20}}],["nums1",{"2":{"292":20}}],["numeric",{"2":{"268":2}}],["num",{"2":{"263":4,"264":4,"302":28,"405":12}}],["number类型包含了null和undefined类型",{"2":{"434":2}}],["number|string",{"2":{"402":2}}],["numbertochinese",{"2":{"302":6}}],["number\\t",{"2":{"122":4}}],["number",{"2":{"12":4,"13":2,"15":2,"84":2,"107":6,"116":4,"130":4,"144":6,"158":4,"318":8,"319":10,"399":16,"400":6,"402":2,"404":4,"405":10,"406":18,"408":4,"409":4,"410":4,"412":2,"434":2,"506":2,"533":2}}],["null是",{"2":{"507":1}}],["null和undefined获得了它们自己各自的类型null和undefined",{"2":{"434":1}}],["null和undefined进行相等比较会返回true",{"2":{"257":2}}],["null检查模式",{"2":{"434":1}}],["null",{"2":{"12":2,"13":6,"46":4,"113":2,"121":4,"126":6,"134":1,"231":2,"251":2,"257":4,"261":2,"274":1,"298":8,"299":4,"300":30,"303":2,"304":2,"315":2,"318":15,"319":2,"334":2,"375":2,"399":2,"434":2,"440":2,"499":2,"500":1,"506":1,"507":3,"509":3,"511":1,"512":5,"519":4,"520":4,"527":2,"533":1,"544":2,"551":2,"577":2,"599":2}}],["nex",{"2":{"524":1}}],["next",{"2":{"9":4,"10":2,"11":2,"12":4,"29":22,"43":2,"46":2,"156":2,"296":2,"298":24,"524":4,"525":6}}],["netbios",{"2":{"450":1}}],["network",{"2":{"62":16,"63":2,"64":8,"75":4}}],["never\\t",{"2":{"400":2}}],["nerd",{"2":{"230":1,"231":2}}],["new操作符会创建一个新对象",{"2":{"498":1}}],["newnums",{"2":{"362":4}}],["newnode",{"2":{"300":26}}],["newhtml=",{"2":{"347":2}}],["newobj",{"2":{"319":6,"527":12}}],["newarr2",{"2":{"527":2}}],["newarr1",{"2":{"527":2}}],["newarray",{"2":{"392":3,"393":6}}],["newarr",{"2":{"316":18,"319":12,"381":4}}],["newinstance",{"2":{"278":8}}],["newitem",{"2":{"96":10}}],["newitemevent",{"2":{"96":8}}],["new运算符是创建对象时",{"2":{"278":1}}],["new运算符",{"0":{"278":1}}],["newfn",{"2":{"262":2}}],["newquery",{"2":{"157":4}}],["newvalue",{"2":{"118":2}}],["new",{"0":{"498":1},"2":{"9":2,"11":2,"13":4,"15":12,"45":2,"46":2,"61":4,"96":4,"113":2,"116":4,"125":2,"126":2,"156":2,"239":8,"240":2,"242":4,"250":2,"265":2,"266":4,"268":2,"271":2,"288":2,"293":2,"294":4,"295":6,"296":4,"298":10,"299":14,"300":4,"302":2,"303":2,"307":2,"308":4,"310":2,"311":4,"312":4,"313":6,"314":6,"315":12,"316":8,"318":6,"319":14,"322":4,"323":2,"324":8,"329":4,"330":4,"331":2,"332":2,"333":2,"335":2,"374":2,"406":6,"407":2,"409":2,"410":2,"418":4,"426":2,"429":1,"432":1,"438":1,"493":4,"494":4,"495":2,"498":4,"499":2,"502":2,"503":4,"504":2,"519":2,"525":4,"527":4,"533":4,"551":6,"572":4,"577":4,"578":2,"584":2,"615":2}}],["五",{"0":{"8":1,"26":1,"51":1,"307":1,"411":1,"455":1,"460":1},"1":{"9":1,"10":1,"11":1,"12":1,"13":1,"456":1,"457":1,"458":1,"459":1,"460":1,"461":1,"462":1,"463":1,"464":1,"465":1,"466":1},"2":{"302":6}}],["吃饭",{"2":{"7":2}}],["mvc",{"2":{"553":1}}],["mvvm",{"2":{"553":1}}],["m",{"2":{"301":10,"345":2,"395":2,"553":1,"578":2}}],["m+n",{"2":{"292":2}}],["ms",{"2":{"177":2}}],["msg",{"2":{"9":2,"10":2,"11":2,"12":4,"42":10}}],["md$",{"2":{"599":4}}],["md文",{"2":{"596":1}}],["mdn",{"2":{"336":2}}],["md",{"2":{"221":1,"489":1,"599":2}}],["md它选中的是组件模板标签",{"2":{"98":1}}],["md5",{"2":{"13":6,"15":2}}],["mutationobserver",{"2":{"615":1}}],["must",{"2":{"592":1}}],["music",{"2":{"318":6,"319":10,"573":4}}],["mul3",{"2":{"540":6}}],["multer",{"2":{"46":8}}],["multiply",{"2":{"297":16}}],["multiple",{"2":{"46":2}}],["multipart",{"2":{"45":2,"46":2}}],["multi",{"2":{"7":4}}],["mubt",{"2":{"55":6}}],["m=",{"2":{"55":2}}],["mirror",{"2":{"396":2}}],["mirrors",{"2":{"51":2}}],["microsoft",{"2":{"231":2}}],["mixin适用于将一组样式应用于多个选择器",{"2":{"491":1}}],["mixin中的样式复制到",{"2":{"491":1}}],["mixin会直接将",{"2":{"491":1}}],["mixin",{"0":{"491":1},"2":{"195":3,"488":1,"491":6}}],["mixins混入",{"2":{"554":1}}],["mixins的原理",{"0":{"554":1}}],["mixins",{"0":{"157":1},"2":{"158":2}}],["minchunks",{"2":{"571":4}}],["minsize",{"2":{"571":6}}],["mini",{"2":{"489":1,"610":2}}],["minimum",{"2":{"489":1}}],["minindex",{"2":{"288":10}}],["minute",{"2":{"268":2}}],["minmax",{"2":{"165":2}}],["min",{"2":{"139":2,"202":2,"489":5,"493":6,"494":2,"603":2}}],["middle",{"2":{"577":2,"578":8,"580":2,"611":2}}],["midjourney实现",{"0":{"551":1}}],["mid",{"2":{"15":6,"292":8}}],["mkdirsync",{"2":{"46":2,"599":2}}],["myref",{"2":{"145":2}}],["myref2",{"2":{"145":2}}],["myclass",{"2":{"278":4}}],["mycomponent",{"2":{"139":6,"140":5}}],["mycontext",{"2":{"114":10}}],["mycontent",{"2":{"114":6}}],["mycpncomponent",{"2":{"95":2,"96":2}}],["mycpn",{"2":{"95":10,"96":6}}],["mybox",{"2":{"104":6}}],["my",{"2":{"64":4,"84":2,"222":1,"224":4,"227":4,"229":1,"230":3,"303":2,"572":6,"573":4}}],["myubt",{"2":{"55":2}}],["mydb01",{"2":{"34":2}}],["mysql",{"0":{"34":1},"2":{"34":9,"211":12}}],["mw2",{"2":{"29":6}}],["mw1被访问哈哈哈",{"2":{"29":4}}],["mw1被访问",{"2":{"29":2}}],["mw1",{"2":{"29":16}}],["mw",{"2":{"29":8}}],["m2",{"2":{"25":4}}],["m1",{"2":{"25":19}}],["media",{"2":{"489":5,"603":4}}],["merged",{"2":{"292":20}}],["mergearr",{"2":{"292":10}}],["merge",{"2":{"205":2,"217":1,"292":8}}],["method1",{"2":{"427":2}}],["methods",{"2":{"158":2,"554":1,"615":2}}],["method=",{"2":{"46":2}}],["method",{"2":{"20":2,"22":4,"426":2,"589":2}}],["message",{"2":{"16":4,"18":2,"30":4,"34":2,"35":2,"36":6,"37":4,"38":4,"43":10,"159":4,"495":7}}],["may",{"2":{"551":2}}],["male",{"2":{"400":2}}],["mailreg",{"2":{"346":2}}],["main",{"2":{"105":4,"202":2,"396":4}}],["make",{"2":{"234":2,"586":2}}],["master",{"2":{"211":8,"213":4,"229":1,"395":2,"396":8}}],["manual",{"2":{"197":2,"234":2}}],["manager",{"2":{"51":2}}],["mar",{"2":{"533":2}}],["markdown",{"2":{"147":2,"601":2}}],["markforcheck",{"2":{"112":2}}],["margin和padding适用场景",{"0":{"482":1}}],["margin",{"2":{"15":2,"113":2,"178":2,"189":2,"190":2,"195":2,"474":7,"475":1,"482":4,"603":2}}],["madao",{"2":{"86":2}}],["mat",{"2":{"347":6}}],["matchall",{"0":{"349":1},"2":{"349":2}}],["match",{"2":{"36":2,"302":2,"341":2,"345":8,"346":2,"347":6,"349":2,"350":2,"530":1,"571":2}}],["math",{"2":{"15":2,"107":2,"159":2,"267":14,"288":4,"289":2,"291":4,"292":4,"297":4,"302":4,"365":2,"373":2,"384":2,"493":2,"494":2,"506":1,"513":1,"578":4,"583":4}}],["maxwidth",{"2":{"578":6,"610":2}}],["maxinitialrequests",{"2":{"571":2}}],["maxnum",{"2":{"494":4}}],["max++",{"2":{"493":2}}],["max",{"2":{"15":4,"201":2,"258":2,"493":6,"603":2,"610":2}}],["maproot",{"2":{"440":2}}],["mapforeach",{"2":{"392":1,"393":4}}],["mapstring",{"2":{"371":4}}],["mapstate",{"2":{"157":4}}],["map取出右括号匹配的括号类型",{"2":{"279":2}}],["map2",{"2":{"265":2}}],["map中任何类型的值都可以称为数据的key",{"2":{"265":1}}],["map和object的主要区别",{"2":{"265":1}}],["map用来存储键值对结构的数据",{"2":{"265":1}}],["map等方法",{"2":{"243":1}}],["map",{"0":{"265":1},"2":{"15":2,"137":1,"146":1,"157":2,"245":6,"246":6,"265":26,"279":4,"296":2,"302":6,"307":4,"314":2,"315":6,"316":2,"327":2,"347":4,"349":4,"350":2,"368":4,"370":4,"371":2,"372":2,"373":2,"374":2,"375":2,"440":4,"494":2,"532":16,"585":2,"599":2}}],["mounted",{"0":{"558":1},"2":{"151":2,"152":2,"153":2,"555":2,"556":4,"559":2,"577":1,"584":2,"612":2,"615":1}}],["mouseleave",{"2":{"125":2}}],["mouseenter",{"2":{"125":2}}],["mouseevent",{"2":{"93":2}}],["mouse",{"2":{"111":1,"112":1}}],["mono",{"2":{"230":1,"231":2}}],["mono字体",{"2":{"225":1}}],["monospace",{"2":{"198":2}}],["monaco",{"2":{"198":2}}],["monthstr",{"2":{"294":4}}],["months",{"2":{"294":4}}],["month",{"2":{"46":4,"268":2,"294":6}}],["mongdb数据库连接成功",{"2":{"13":2}}],["mongdb数据库连接失败",{"2":{"13":2}}],["mongo",{"2":{"55":2}}],["mongoose",{"2":{"10":2,"13":28}}],["mongodb是文档型的nosql数据库",{"2":{"0":1}}],["modal=",{"2":{"609":2}}],["modes",{"2":{"577":2}}],["mode",{"2":{"573":2}}],["model=",{"2":{"610":2}}],["model",{"2":{"13":6,"157":4,"553":1}}],["module不需要使用特定的函数或语法来定义和导入模块",{"2":{"549":1}}],["module等",{"2":{"549":1}}],["modulea",{"2":{"433":8}}],["moduleb",{"2":{"432":20}}],["moduleresolution",{"0":{"432":1},"2":{"440":2}}],["modules",{"2":{"357":2,"414":2,"418":2,"423":2,"439":2,"440":2,"563":2,"564":3,"571":4,"613":2}}],["module",{"0":{"24":1,"430":1},"2":{"13":8,"24":1,"25":8,"30":2,"77":1,"80":2,"149":1,"220":4,"414":4,"418":4,"419":2,"423":2,"440":2,"488":2,"549":1,"570":2,"571":4,"573":1}}],["gzip",{"0":{"613":1},"2":{"613":2}}],["g6",{"2":{"577":4,"578":22}}],["global",{"2":{"535":1}}],["gmt+0800",{"2":{"533":2}}],["gmail",{"2":{"233":1}}],["gpu",{"2":{"463":2,"464":1}}],["ghpages",{"2":{"396":2}}],["gh",{"2":{"395":4,"396":2}}],["gi",{"2":{"341":2,"346":4,"347":2,"349":2}}],["gitlab\\t",{"2":{"235":2}}],["gitlab主机名",{"2":{"235":2}}],["gitlab",{"2":{"235":6}}],["gitlab添加",{"2":{"233":1}}],["gitee",{"2":{"211":23,"229":1,"233":1,"235":2,"396":34}}],["git",{"0":{"218":1,"219":1},"1":{"219":1,"220":1,"221":1},"2":{"205":9,"206":6,"207":8,"208":2,"209":2,"210":2,"211":56,"212":4,"213":6,"214":8,"216":1,"217":5,"218":3,"234":1,"235":6,"357":2,"395":12,"396":10}}],["git常用操作",{"0":{"204":1},"1":{"205":1,"206":1,"207":1,"208":1,"209":1,"210":1,"211":1,"212":1,"213":1,"214":1,"215":1,"216":1,"217":1,"218":1,"219":1,"220":1,"221":1}}],["git提交规范等",{"2":{"149":1}}],["github代码拉取深度",{"2":{"396":2}}],["github主机名",{"2":{"235":2}}],["github主机地址",{"2":{"235":2}}],["github",{"2":{"66":2,"211":14,"233":1,"234":4,"235":9,"395":2,"396":11}}],["gu",{"2":{"345":6}}],["guangdong",{"2":{"318":6,"319":10}}],["guid",{"2":{"231":2}}],["guide",{"2":{"161":1}}],["gcd",{"2":{"284":4}}],["gap",{"2":{"166":8,"168":2,"170":2,"291":22}}],["garden",{"2":{"161":1}}],["gender",{"2":{"269":8,"270":4,"399":2}}],["generatorrunner",{"2":{"525":2}}],["generator",{"0":{"524":1},"1":{"525":1},"2":{"161":1,"414":2,"525":16}}],["getletterwidth",{"2":{"578":2}}],["getpoint",{"2":{"578":4}}],["getprototypeof",{"2":{"274":1}}],["getshapestyle",{"2":{"578":4}}],["getselection",{"2":{"574":4}}],["getsnapshotbeforeupdate",{"2":{"147":1}}],["getelementsbytagname",{"2":{"374":2}}],["getelementbyid",{"2":{"137":2,"139":2,"140":2,"143":2,"144":8,"145":2,"577":4}}],["getimagecode",{"2":{"589":2}}],["getimages",{"2":{"374":6}}],["getimgcode",{"2":{"589":2}}],["getitem",{"2":{"523":4}}],["getinfo",{"2":{"43":2}}],["getfile",{"2":{"333":2,"334":2,"357":2}}],["getfullyear",{"2":{"46":2,"294":2}}],["getuint8",{"2":{"332":8}}],["gettextsize",{"2":{"578":2}}],["getter方法",{"2":{"270":2}}],["gettime",{"2":{"316":2,"318":4}}],["getname",{"2":{"270":4}}],["getattribute",{"2":{"249":2,"250":2,"374":2}}],["getarticles",{"2":{"12":2}}],["getarticlebyid",{"2":{"12":2}}],["getboundingclientrect",{"2":{"249":2}}],["getcurrentstyle",{"2":{"541":4}}],["getcss",{"2":{"541":16}}],["getcatch",{"2":{"242":2}}],["getcontent",{"2":{"577":2}}],["getcontext",{"2":{"551":2}}],["getcontainer",{"2":{"113":4}}],["getcomputedstyle",{"2":{"541":8}}],["getcollection",{"2":{"4":6,"5":4,"6":4,"7":2}}],["getdirdata",{"2":{"357":6}}],["getderivedstatefromprops",{"2":{"147":1}}],["getdate",{"2":{"46":2}}],["getval",{"2":{"84":4,"118":2}}],["getmonths",{"2":{"294":2}}],["getmonth",{"2":{"46":2,"294":2}}],["get",{"2":{"28":2,"29":10,"30":6,"42":2,"43":2,"46":2,"55":4,"113":2,"265":2,"270":4,"296":14,"407":2,"512":2,"536":4,"578":10}}],["g",{"0":{"345":1},"2":{"157":6,"221":2,"302":4,"345":2,"350":2,"400":6,"599":2}}],["greeter",{"2":{"412":2}}],["green",{"2":{"399":6,"481":2}}],["grep",{"2":{"51":2,"62":2,"72":1,"73":2}}],["graphbehaviors",{"2":{"577":4}}],["graph",{"2":{"577":18}}],["grape",{"2":{"123":10}}],["gray",{"2":{"199":4}}],["gradient",{"2":{"179":2,"186":8,"195":8,"198":2,"199":2,"478":7,"481":2}}],["grid布局",{"0":{"164":1},"2":{"474":1}}],["grid布局学习笔记",{"0":{"160":1},"1":{"161":1,"162":1,"163":1,"164":1,"165":1,"166":1,"167":1,"168":1,"169":1,"170":1,"171":1,"172":1,"173":1,"174":1}}],["grid",{"2":{"161":3,"164":2,"165":7,"166":6,"168":16,"170":16,"172":22,"173":14,"474":7,"482":1}}],["gridloading",{"2":{"158":4}}],["groupbytypes",{"2":{"577":2}}],["group",{"2":{"157":4,"578":58,"580":2}}],["gt",{"2":{"7":10,"9":2,"10":2,"11":2,"12":4,"13":2,"15":54,"20":4,"21":16,"22":20,"28":4,"29":24,"30":6,"34":2,"35":2,"36":6,"37":8,"38":8,"42":6,"43":2,"45":16,"46":20,"59":2,"61":8,"75":2,"84":16,"86":18,"87":8,"88":4,"89":24,"90":26,"91":12,"92":32,"93":8,"95":16,"96":18,"98":4,"102":34,"104":32,"105":40,"106":40,"107":28,"108":12,"109":1,"113":26,"114":86,"116":52,"117":20,"118":12,"119":4,"121":62,"122":40,"123":96,"124":14,"125":2,"126":28,"128":4,"129":4,"130":16,"133":4,"135":4,"137":12,"139":36,"140":7,"143":8,"144":40,"145":20,"146":16,"147":14,"150":6,"151":16,"152":16,"153":16,"157":8,"159":4,"168":16,"170":16,"172":4,"173":8,"174":4,"178":16,"210":2,"220":2,"222":1,"225":1,"238":8,"239":18,"243":2,"246":6,"247":14,"249":4,"250":6,"255":14,"256":14,"257":8,"258":2,"262":2,"264":2,"265":4,"267":2,"274":2,"276":2,"282":4,"283":2,"287":2,"288":2,"290":4,"291":2,"292":2,"293":8,"295":24,"296":2,"297":6,"300":4,"301":4,"302":8,"303":26,"305":4,"306":4,"307":16,"308":24,"309":4,"310":14,"311":16,"312":4,"313":16,"314":18,"315":40,"316":18,"318":4,"322":12,"323":4,"324":10,"326":16,"327":12,"328":12,"331":2,"333":4,"334":8,"335":16,"346":38,"347":44,"348":4,"349":32,"350":8,"357":12,"362":2,"364":4,"365":2,"371":6,"372":2,"373":4,"374":4,"375":2,"380":4,"381":2,"382":4,"383":4,"384":2,"385":4,"388":1,"389":2,"393":2,"396":13,"399":4,"400":2,"402":2,"424":8,"428":4,"434":2,"449":5,"450":3,"471":2,"478":16,"482":20,"493":10,"494":14,"495":2,"500":4,"507":3,"509":8,"510":2,"512":16,"519":4,"520":8,"525":4,"528":2,"536":2,"539":22,"540":10,"543":10,"544":4,"551":28,"574":2,"577":22,"578":36,"579":2,"584":8,"586":14,"587":8,"599":18,"605":2,"609":18,"610":46,"614":14}}],["u9fa5",{"2":{"578":2}}],["u4e00",{"2":{"578":2}}],["ue603",{"2":{"578":2}}],["ue605",{"2":{"578":2}}],["ue606",{"2":{"578":2}}],["ue604",{"2":{"578":4}}],["ui全局引入改为按需引入",{"2":{"609":1}}],["ui",{"2":{"574":2,"588":1}}],["uglifyjsplugin",{"2":{"548":1}}],["umd",{"2":{"414":2,"430":1,"440":2}}],["u",{"2":{"345":2,"547":2}}],["uuid",{"2":{"159":4}}],["ul",{"2":{"122":8,"144":8,"577":4}}],["ub",{"2":{"59":2}}],["ubuntu",{"2":{"56":2,"70":1,"396":2}}],["ub01",{"2":{"56":2}}],["uno",{"2":{"586":2,"587":2}}],["unobserve",{"2":{"250":2}}],["unbind",{"2":{"574":2}}],["uncaught",{"0":{"586":1},"1":{"587":1},"2":{"509":1,"516":1,"551":2,"588":1}}],["unicode",{"2":{"387":1}}],["union",{"2":{"322":8,"326":6}}],["uniquearr",{"2":{"316":22,"319":4}}],["units",{"2":{"302":4}}],["unit",{"2":{"302":18}}],["unitmap",{"2":{"302":4}}],["unable",{"2":{"234":1}}],["unauthorizederror",{"2":{"43":2}}],["unmountcomponentatnode",{"2":{"147":4}}],["un",{"2":{"126":10}}],["unknown与any区别",{"2":{"400":1}}],["unknown",{"2":{"126":2,"357":2,"400":4}}],["undefined的赋值",{"2":{"434":1}}],["undefined\\t",{"2":{"255":2,"399":2}}],["undefined进行保护",{"2":{"133":1}}],["undefined",{"0":{"586":1},"1":{"587":1},"2":{"89":2,"251":2,"257":4,"261":2,"278":1,"318":11,"322":2,"434":6,"506":1,"507":1,"509":3,"511":1,"512":3,"519":2,"524":2,"533":1,"588":1}}],["unlessdirective",{"2":{"126":2}}],["unlesscontext",{"2":{"126":4}}],["unless",{"2":{"43":2,"126":12}}],["usage",{"2":{"418":4,"423":2}}],["us",{"2":{"268":2}}],["usr",{"2":{"61":2,"66":2,"395":2}}],["ustr",{"2":{"37":8,"302":6}}],["usefetch",{"2":{"589":2}}],["useeffect",{"2":{"551":2}}],["usebuiltins",{"2":{"418":2,"423":2}}],["uses",{"2":{"396":10}}],["useref",{"2":{"551":2}}],["userinfo",{"2":{"43":10}}],["username=yunzhishangfxj",{"2":{"55":2}}],["username",{"2":{"12":2,"13":2,"42":8,"43":6,"146":8,"396":2}}],["user",{"2":{"9":16,"12":6,"13":9,"34":2,"37":12,"38":6,"42":4,"43":8,"61":4}}],["userspaceonuse",{"2":{"178":2}}],["userstreams",{"2":{"122":2}}],["usersession",{"2":{"42":2}}],["userschema",{"2":{"13":4}}],["users",{"2":{"2":4,"4":44,"5":14,"6":10,"7":8,"35":2,"36":4,"37":4,"38":4,"222":1}}],["use",{"2":{"1":4,"29":4,"30":6,"42":6,"43":8,"46":2,"414":2,"418":2,"423":2,"440":2}}],["url=",{"2":{"573":4}}],["urlencoded",{"2":{"30":2,"42":2,"43":2}}],["url",{"0":{"335":1,"592":1},"1":{"593":1,"594":1},"2":{"21":10,"22":20,"178":2,"211":8,"335":24,"478":2,"551":8,"573":1,"590":1,"592":2}}],["url+",{"2":{"20":2}}],["utf",{"2":{"22":4,"491":2}}],["utf8",{"2":{"16":4}}],["utils",{"2":{"51":2}}],["util",{"2":{"13":2,"433":2,"578":4}}],["upper",{"2":{"302":14}}],["uppercasepipe",{"2":{"132":1}}],["upstream",{"2":{"209":4}}],["upsert",{"2":{"7":2}}],["uploads",{"2":{"46":2}}],["uploadchunks",{"2":{"15":4}}],["upload",{"2":{"15":10,"45":2,"46":13}}],["updtedat",{"2":{"13":2}}],["updert",{"2":{"7":2}}],["updatetext",{"2":{"610":2}}],["updated",{"2":{"555":2}}],["updatearticle",{"2":{"11":2}}],["update",{"2":{"7":12,"38":2,"55":2,"610":2}}],["436",{"2":{"578":2}}],["442",{"2":{"578":2}}],["448",{"2":{"578":6}}],["4853",{"2":{"578":2}}],["489",{"2":{"578":4}}],["48",{"2":{"578":4}}],["4以上并且安装atom",{"2":{"440":2}}],["456",{"2":{"408":2,"527":2}}],["45deg",{"2":{"179":2,"186":2,"481":4}}],["494",{"2":{"578":2}}],["49",{"2":{"370":2}}],["4const",{"2":{"296":1}}],["4=4",{"2":{"296":2}}],["4f2a",{"2":{"231":2}}],["4px",{"2":{"191":1,"603":4}}],["4em",{"2":{"185":4}}],["4kb",{"2":{"41":1,"522":1}}],["4",{"0":{"7":1,"12":1,"37":1,"43":1,"87":1,"235":1,"254":1,"343":1,"419":1,"429":1},"2":{"26":1,"137":2,"147":9,"172":2,"193":2,"195":2,"210":2,"282":12,"288":2,"296":7,"298":2,"299":10,"302":2,"303":2,"304":2,"319":2,"321":2,"322":4,"324":6,"332":2,"346":2,"350":2,"363":2,"364":22,"365":2,"370":4,"372":4,"378":1,"380":4,"381":6,"383":4,"393":2,"399":6,"409":2,"410":2,"424":2,"432":2,"448":3,"450":1,"482":1,"495":2,"532":16,"539":4,"564":1,"577":2,"578":6}}],["40px",{"2":{"190":2,"603":2}}],["401",{"2":{"43":2}}],["400",{"2":{"43":2,"493":2,"494":2}}],["404",{"2":{"21":2,"22":4}}],["40",{"2":{"4":2}}],["547",{"2":{"578":2}}],["546",{"2":{"578":2}}],["5707",{"2":{"578":2}}],["576",{"2":{"578":6}}],["57",{"2":{"578":2}}],["574e775e",{"2":{"231":2}}],["59",{"2":{"578":2}}],["598",{"2":{"578":2}}],["51",{"2":{"578":4}}],["5个按钮",{"2":{"536":2}}],["5m",{"2":{"522":2}}],["56",{"2":{"490":2,"533":2,"578":2}}],["58",{"2":{"418":2,"423":2}}],["58a",{"2":{"186":18}}],["55",{"2":{"285":2}}],["5b96",{"2":{"231":2}}],["5s",{"2":{"203":4}}],["5em",{"2":{"195":6,"198":2}}],["52",{"2":{"190":6,"585":4}}],["5c7aea",{"2":{"189":2}}],["5px",{"2":{"177":6,"183":2,"192":12}}],["50",{"2":{"91":2,"113":2,"156":2,"165":1,"179":4,"186":2,"188":4,"195":4,"198":4,"201":2,"362":4,"474":8,"481":2}}],["50px",{"2":{"91":2,"92":6,"168":4,"189":2}}],["5000",{"2":{"240":2}}],["500px",{"2":{"201":2,"481":4}}],["500",{"2":{"43":2,"314":2,"493":2,"494":2,"519":8}}],["5",{"0":{"13":1,"38":1,"88":1,"255":1,"344":1,"420":1,"430":1},"2":{"5":2,"55":2,"137":2,"147":2,"178":10,"191":1,"251":4,"282":8,"285":2,"288":2,"297":8,"298":2,"299":10,"319":2,"322":4,"324":6,"350":2,"363":4,"364":10,"365":2,"370":2,"375":2,"383":4,"399":2,"432":2,"448":1,"482":1,"536":2,"539":2,"578":12,"585":4}}],["缘一1",{"2":{"5":2}}],["缘一",{"2":{"5":2}}],["对前者的属性进行拷贝扩展",{"2":{"554":1}}],["对mvvm的理解",{"0":{"553":1}}],["对",{"2":{"552":1,"554":1}}],["对该子节点的所有子节点",{"2":{"543":1}}],["对根节点的所有子节点",{"2":{"543":1}}],["对构造函数有返回值的处理判断",{"2":{"498":1}}],["对使用vuex",{"2":{"427":1}}],["对初期使用typescript的同学而言",{"2":{"425":1}}],["对书写typescript代码十分重要",{"2":{"425":1}}],["对于监听",{"2":{"495":1}}],["对于一些简单的图标和装饰性元素",{"2":{"486":1}}],["对于一些不希望被任意修改的属性",{"2":{"407":1}}],["对于较大的图片",{"2":{"485":1}}],["对于工程项目",{"2":{"432":1}}],["对于例如",{"2":{"422":1}}],["对于空数组是不会执行回调函数的",{"2":{"377":1}}],["对原数组的加工",{"2":{"367":1}}],["对比键的数量",{"2":{"318":1}}],["对比项的数量",{"2":{"318":1}}],["对比语法",{"2":{"4":1}}],["对距离为",{"2":{"291":2}}],["对非布尔值值取反",{"2":{"255":2}}],["对布尔值值取反",{"2":{"255":2}}],["对标签属性进行类型",{"2":{"144":2}}],["对null",{"2":{"133":1}}],["对父组件样式也能生效",{"2":{"101":1}}],["对应的目录下添加",{"2":{"596":1}}],["对应的脚本并执行对应命令",{"2":{"563":1,"564":1}}],["对应",{"2":{"46":2}}],["对象上",{"2":{"615":1}}],["对象就在",{"2":{"525":2}}],["对象就是一个用来存储不同属性的容器",{"2":{"270":1}}],["对象转换成可阅读的字符串",{"2":{"533":1}}],["对象转为数字会经历",{"2":{"512":2}}],["对象转字符串",{"2":{"512":1}}],["对象与对象",{"2":{"512":1}}],["对象与字符串",{"2":{"512":1}}],["对象唯一值属性",{"2":{"506":1}}],["对象里的属性求和",{"0":{"384":1}}],["对象数组",{"0":{"325":1},"1":{"326":1,"327":1,"328":1}}],["对象数组去重",{"0":{"317":1,"319":1},"1":{"318":1,"319":1}}],["对象相同比较",{"0":{"318":1}}],["对象中的数据",{"2":{"274":1}}],["对象中还有一些内容",{"2":{"274":1}}],["对象中存储属性的区域实际有两个",{"2":{"274":1}}],["对象自身不包含该属性时",{"2":{"274":1}}],["对象自身",{"2":{"274":1}}],["对象的执行过程",{"0":{"498":1}}],["对象的分类",{"2":{"278":1}}],["对象的构造函数",{"2":{"274":1}}],["对象的结构",{"0":{"273":1},"1":{"274":1,"275":1,"276":1,"277":1}}],["对象的中间件",{"2":{"43":2}}],["对象不仅存储属性",{"2":{"270":1}}],["对象",{"0":{"24":1},"2":{"29":1,"261":2,"274":1,"277":2,"399":2,"560":1}}],["对事务要求不高",{"2":{"0":1}}],["去掉",{"2":{"590":2}}],["去找",{"2":{"564":1}}],["去映射的路径下加载模块",{"2":{"433":1}}],["去重",{"2":{"4":1}}],["去除重复元素依靠的是indexof总是返回第一个元素的位置",{"2":{"364":2}}],["去除特定字段",{"2":{"4":2}}],["去除id字段",{"2":{"4":2}}],["降序",{"2":{"4":2}}],["升序",{"2":{"4":2}}],["喜好",{"2":{"4":2}}],["数值数组",{"2":{"399":2}}],["数字",{"2":{"510":2}}],["数字序列转为数组",{"0":{"373":1}}],["数字过大",{"2":{"302":2}}],["数字超过999999999999则报错",{"2":{"302":2}}],["数字转中文",{"0":{"302":1}}],["数字转百分比",{"2":{"132":1}}],["数字转字符串",{"2":{"132":1}}],["数组劫持原理",{"0":{"552":1}}],["数组求和",{"0":{"380":1},"2":{"539":1}}],["数组去重",{"0":{"364":1,"381":1}}],["数组转map",{"2":{"265":1}}],["数组中当前被处理的元素",{"2":{"378":1}}],["数组中正在处理的当前元素的索引",{"2":{"368":2}}],["数组中正在处理的当前元素",{"2":{"368":2}}],["数组中",{"2":{"82":2}}],["数组中列出的组件",{"2":{"82":2}}],["数组中声名",{"2":{"79":2}}],["数组中的查询",{"2":{"4":1}}],["数组",{"0":{"79":1,"80":1,"81":1,"82":1},"2":{"399":1,"527":2}}],["数组大小为3",{"2":{"4":1}}],["数组大小为3db",{"2":{"4":1}}],["数据修改自动触发视图更新",{"2":{"553":1}}],["数据",{"2":{"542":2}}],["数据长期保留",{"2":{"522":1}}],["数据劫持",{"2":{"512":2}}],["数据类型转换",{"0":{"508":1},"1":{"509":1,"510":1,"511":1}}],["数据类型",{"0":{"261":1,"506":1},"1":{"507":1}}],["数据库名",{"2":{"1":2}}],["数据库操作",{"0":{"1":1}}],["数据量大",{"2":{"0":1}}],["张三",{"2":{"35":2,"122":2,"502":2,"503":2,"504":2}}],["张",{"2":{"4":6}}],["27",{"2":{"578":2}}],["277",{"2":{"578":6}}],["262",{"2":{"578":2}}],["266",{"2":{"578":6}}],["2600",{"2":{"493":2,"494":2}}],["2d",{"2":{"551":2}}],["298",{"2":{"578":4}}],["29",{"2":{"494":2}}],["295deg",{"2":{"193":2}}],["2xl",{"2":{"489":1}}],["23",{"2":{"527":2,"578":2}}],["234",{"2":{"385":4}}],["230",{"2":{"198":6}}],["2const",{"2":{"382":1}}],["2=2",{"2":{"296":2}}],["2\\t",{"2":{"255":2,"257":4}}],["2em",{"2":{"195":6}}],["25s",{"2":{"603":2}}],["25",{"2":{"186":2,"370":2,"490":2}}],["255",{"2":{"179":18}}],["2px",{"2":{"183":2,"191":1,"457":1}}],["2s",{"2":{"179":2}}],["2fr",{"2":{"165":1}}],["211",{"2":{"589":4}}],["21const",{"2":{"539":1}}],["210deg",{"2":{"195":2}}],["21",{"2":{"36":2,"268":2,"285":2,"539":3}}],["2m",{"2":{"15":2}}],["2",{"0":{"5":1,"10":1,"21":1,"25":1,"29":1,"32":1,"35":1,"41":1,"55":1,"67":1,"71":1,"85":1,"117":1,"228":1,"233":1,"252":1,"341":1,"417":1,"423":1,"427":1},"2":{"15":12,"35":2,"36":2,"38":2,"46":2,"66":2,"79":2,"80":2,"92":1,"103":2,"107":2,"108":2,"125":2,"137":8,"139":2,"140":1,"143":2,"145":4,"146":1,"147":21,"159":2,"172":10,"195":4,"198":2,"203":2,"210":2,"231":4,"243":9,"256":2,"257":4,"268":8,"270":2,"281":2,"282":8,"285":6,"288":2,"289":2,"291":4,"292":16,"294":2,"295":4,"296":10,"298":2,"299":10,"303":2,"304":2,"315":2,"316":10,"319":18,"321":4,"322":6,"323":2,"324":4,"329":4,"330":4,"341":2,"346":4,"349":2,"363":4,"364":10,"365":6,"370":2,"372":4,"373":4,"378":1,"380":4,"381":4,"382":7,"383":4,"385":4,"389":8,"399":8,"424":2,"426":1,"432":4,"448":1,"468":1,"482":5,"495":2,"512":4,"531":2,"533":4,"539":8,"540":2,"542":8,"571":4,"577":6,"578":18,"599":2,"602":1}}],["222",{"2":{"578":2}}],["22",{"2":{"4":2,"35":2,"385":4,"504":2,"578":2}}],["206",{"2":{"578":2}}],["2015",{"2":{"440":2}}],["2048",{"2":{"402":2}}],["2023",{"2":{"533":2}}],["2022",{"2":{"318":6,"319":10,"346":6}}],["2021",{"2":{"268":2}}],["20px",{"2":{"113":4,"166":6,"178":2,"184":4,"186":4,"189":2,"195":2,"479":1}}],["200deg",{"2":{"481":4}}],["20000",{"2":{"571":2}}],["2000",{"2":{"295":2,"578":2}}],["200px",{"2":{"92":6,"158":2,"165":3,"178":2,"190":2,"195":2,"610":2,"611":2}}],["200",{"2":{"20":2,"30":4,"43":4,"179":6,"578":2}}],["20",{"2":{"4":2,"6":2,"25":4,"29":4,"156":2,"165":2,"262":2,"332":4,"362":4,"365":2,"384":2,"389":8,"503":2}}],["24px",{"2":{"577":2}}],["240deg",{"2":{"195":2}}],["24",{"2":{"4":2,"7":8,"178":4,"495":2,"578":2}}],["pt",{"2":{"488":1}}],["python",{"2":{"393":2}}],["php",{"2":{"393":2}}],["phone",{"2":{"130":10}}],["p0",{"2":{"346":2}}],["png等",{"2":{"484":1}}],["png",{"2":{"333":2,"374":6,"551":8}}],["pnpm",{"2":{"220":4,"564":1}}],["p的状态就跟着改变",{"2":{"314":1}}],["pwsh",{"2":{"224":2,"227":2,"231":2}}],["pending",{"2":{"303":6,"304":10,"307":4,"308":2,"310":2,"311":2,"315":12}}],["pear",{"2":{"123":10,"364":4}}],["perspective",{"2":{"479":1}}],["persist",{"2":{"396":2}}],["person",{"2":{"133":2,"144":20,"269":2,"270":2,"272":2,"276":2,"404":2,"405":2,"406":18,"407":4,"412":10,"498":10}}],["persons",{"2":{"122":4}}],["permission",{"2":{"234":2}}],["percentpipe",{"2":{"132":1}}],["percent",{"2":{"15":4}}],["p3之中有一个实例率先改变状态",{"2":{"314":1}}],["p3",{"2":{"122":2,"295":4,"314":2}}],["p2",{"2":{"122":2,"295":4,"313":4,"314":7,"346":2}}],["p1",{"2":{"122":2,"295":4,"303":4,"307":4,"313":4,"314":6,"346":4,"347":4,"407":6}}],["pinia",{"2":{"506":1}}],["pink",{"2":{"203":2}}],["pie",{"2":{"481":2}}],["piece",{"2":{"177":2}}],["pi",{"2":{"408":4}}],["pivot",{"2":{"289":6}}],["pivotindex",{"2":{"289":4}}],["pipes",{"2":{"577":2}}],["pipe2",{"2":{"108":4}}],["pipe2pipe",{"2":{"108":3}}],["pipepowpipe",{"2":{"107":2}}],["pipepow",{"2":{"107":10}}],["pipetransform",{"2":{"107":4,"108":4}}],["pipe",{"2":{"107":4,"108":4,"112":1}}],["pick",{"2":{"210":2,"214":2,"216":2}}],["picinfo",{"2":{"88":2}}],["picurl",{"2":{"88":2}}],["px转为vh的函数",{"2":{"583":2}}],["px转为vw的函数",{"2":{"583":2}}],["px",{"2":{"91":2,"116":16,"458":1}}],["pkill",{"2":{"72":1}}],["psdregs",{"2":{"348":6}}],["ps",{"2":{"51":2,"56":6,"72":1,"225":1}}],["please",{"2":{"234":2}}],["placeholder",{"2":{"602":2}}],["placeholder=",{"2":{"108":2,"130":4,"610":2}}],["place",{"2":{"168":2,"174":2}}],["plain",{"2":{"20":2,"302":6,"329":2,"330":2}}],["plugins",{"2":{"418":2,"570":2,"577":2,"602":2,"613":2}}],["pluginnpm",{"2":{"417":1}}],["plugin",{"2":{"51":2,"417":1,"418":8,"548":3,"570":1,"601":2,"602":2}}],["purple",{"2":{"481":2}}],["pure",{"2":{"108":2}}],["put",{"2":{"296":10}}],["pub",{"2":{"233":1}}],["pub文件",{"2":{"233":1}}],["publicpath",{"0":{"573":1},"2":{"573":7}}],["publickey",{"2":{"234":2,"235":4}}],["public",{"2":{"46":2,"229":1,"406":6,"599":2}}],["pull前",{"2":{"213":2}}],["pull",{"2":{"55":2,"205":1,"209":2,"213":4,"214":4}}],["pushgit",{"2":{"214":1}}],["push",{"2":{"15":12,"55":2,"96":2,"108":2,"157":8,"206":2,"207":2,"211":8,"214":1,"217":1,"279":4,"282":2,"288":2,"289":4,"292":12,"293":2,"294":2,"299":6,"308":2,"310":2,"311":2,"313":2,"315":4,"316":4,"326":4,"349":2,"357":4,"392":1,"393":2,"395":2,"396":9,"434":4,"493":6,"543":10,"544":12,"570":2,"572":1,"578":4,"599":8}}],["port",{"2":{"573":2}}],["porname",{"2":{"399":2}}],["pormiseb",{"2":{"243":2}}],["pop",{"2":{"212":2,"279":8}}],["populate",{"2":{"12":2}}],["pointer",{"2":{"113":2,"577":2}}],["possibly",{"2":{"434":2}}],["posh路径下bin目录",{"2":{"230":1}}],["poshthemes",{"2":{"223":1}}],["poshthemesget",{"2":{"223":1}}],["posh",{"2":{"222":1,"224":4,"227":4,"229":1,"230":2}}],["position",{"2":{"113":2,"179":2,"184":4,"189":4,"190":6,"195":8,"199":2,"474":8,"490":4,"551":4,"574":2,"577":4,"605":2}}],["postmessage",{"2":{"495":5,"497":1}}],["postcss",{"2":{"488":1}}],["postordertraversal",{"2":{"299":8}}],["postfile",{"2":{"15":2,"45":2,"46":8}}],["post",{"2":{"15":4,"30":6,"42":6,"43":4,"45":2,"46":4,"243":8,"589":2}}],["powershellcore",{"2":{"231":2}}],["powershell",{"2":{"231":4,"234":1}}],["power",{"2":{"107":6,"225":1}}],["pow",{"2":{"107":2,"370":4}}],["printlinkedlist",{"2":{"298":6}}],["private",{"2":{"103":6,"104":4,"105":6,"106":4,"113":12,"118":2,"125":4,"126":8,"396":6,"406":6,"407":2}}],["price",{"2":{"84":8}}],["primaryblock",{"2":{"121":6}}],["primary",{"2":{"15":2,"89":8,"90":2,"93":2,"113":4,"491":8}}],["prune",{"2":{"55":1,"205":1}}],["prerender",{"2":{"590":2}}],["preserve",{"2":{"440":4}}],["preset",{"2":{"418":2,"422":2,"423":2}}],["presets",{"2":{"418":2,"423":2}}],["preordertraversal",{"2":{"299":8}}],["preindex",{"2":{"290":23}}],["preferredauthentications",{"2":{"235":4}}],["prefix",{"2":{"46":4,"301":8,"489":1}}],["prepare",{"2":{"220":2}}],["pre",{"2":{"197":2,"326":14,"327":6,"381":8,"383":6,"385":20,"440":2,"539":14,"599":14}}],["previewlength",{"2":{"602":2}}],["previousvalue",{"2":{"378":5}}],["preventdefaultlistener",{"2":{"551":4}}],["preventdefault",{"2":{"528":1,"615":2}}],["prev",{"2":{"156":2,"298":8,"384":4}}],["prettierignore",{"2":{"357":2}}],["prettier代码格式化",{"2":{"149":1}}],["pretty",{"2":{"4":2}}],["practiceproject",{"2":{"16":2}}],["problem",{"2":{"599":2}}],["project",{"2":{"572":1}}],["production",{"2":{"570":2,"573":4}}],["product08",{"2":{"325":2}}],["product07",{"2":{"325":2}}],["product06",{"2":{"325":2}}],["product05",{"2":{"325":2}}],["product04",{"2":{"325":2}}],["product03",{"2":{"325":4}}],["product02",{"2":{"325":2}}],["product01",{"2":{"325":2}}],["pro",{"2":{"489":1}}],["proxy",{"2":{"414":2,"590":4}}],["protected",{"2":{"405":4,"406":6}}],["proto",{"2":{"274":2,"278":2,"498":1,"499":4,"500":4}}],["prototype",{"0":{"586":1},"1":{"587":1},"2":{"274":1,"276":3,"278":2,"282":8,"300":12,"318":4,"499":6,"500":5,"503":2,"527":4,"533":1,"552":1,"588":1}}],["protocol41",{"2":{"36":2}}],["province",{"2":{"318":6,"319":10}}],["provide",{"2":{"235":1,"554":1}}],["providers",{"0":{"81":1},"2":{"78":1}}],["process",{"2":{"298":2,"570":2,"573":2}}],["promistb",{"2":{"243":2}}],["promista",{"2":{"243":2}}],["promise链式调用",{"0":{"529":1}}],["promisevalue",{"2":{"525":4}}],["promise等es6特性",{"2":{"422":1}}],["promise需要改变",{"2":{"308":1}}],["promises",{"2":{"243":4,"313":12,"314":10,"315":10}}],["promisearr",{"2":{"295":12}}],["promiseall",{"2":{"295":4}}],["promisea",{"2":{"243":2}}],["promise",{"0":{"239":1,"313":1},"2":{"15":8,"146":1,"239":9,"240":2,"242":2,"243":4,"295":10,"303":14,"304":12,"305":4,"306":4,"307":10,"308":10,"309":8,"310":14,"311":30,"312":6,"313":12,"314":15,"315":58,"414":6,"493":2,"494":4,"525":8,"551":2}}],["program",{"2":{"230":2,"231":2}}],["programs",{"2":{"222":1}}],["progress",{"2":{"15":8}}],["properties",{"0":{"586":1},"1":{"587":1},"2":{"588":1}}],["property",{"2":{"432":2}}],["propertydescriptor",{"2":{"426":2}}],["propertykey",{"2":{"426":2}}],["proplugins",{"2":{"570":6}}],["proposed",{"2":{"429":1}}],["proposal",{"2":{"426":1}}],["proptypes",{"2":{"144":26}}],["props简写形式",{"2":{"144":2}}],["props",{"0":{"144":1},"2":{"141":1,"144":6,"150":1,"153":2,"551":2,"554":1}}],["packagename",{"2":{"571":4}}],["package",{"2":{"432":2,"563":2,"564":1,"573":2}}],["packages",{"2":{"414":2}}],["padend",{"2":{"530":1}}],["padding",{"2":{"185":2,"189":2,"195":2,"198":2,"201":2,"475":2,"482":1,"490":4,"491":10,"541":2,"577":2,"603":4}}],["padstart",{"2":{"46":2,"294":2,"530":1}}],["patterntransform=",{"2":{"178":2}}],["patternunits=",{"2":{"178":2}}],["pattern",{"2":{"178":8,"301":24,"578":4}}],["pathpice",{"2":{"599":10}}],["patharr",{"2":{"578":4}}],["paths",{"0":{"433":1},"2":{"433":2,"440":2}}],["pathstr",{"2":{"17":2}}],["path",{"0":{"17":1},"2":{"17":4,"22":16,"43":2,"46":6,"221":2,"230":4,"335":4,"418":8,"563":1,"564":1,"578":8,"584":2,"599":20}}],["palce",{"2":{"167":2}}],["paginationoptions",{"2":{"157":6,"158":4,"159":10}}],["page",{"2":{"157":16,"158":4,"605":2}}],["pager",{"2":{"156":2}}],["pageoptions",{"2":{"156":2,"157":2}}],["pages服务部署",{"2":{"396":1}}],["pages自带的workflow部署",{"2":{"396":1}}],["pages🎉",{"2":{"395":2}}],["pagesize",{"2":{"157":2,"158":6,"159":6}}],["pagesizes",{"2":{"156":2}}],["pages",{"2":{"42":2,"395":2,"396":13}}],["payload",{"2":{"43":2}}],["parcel也很棒",{"2":{"429":1}}],["part",{"2":{"302":4}}],["parentcomponent",{"2":{"103":2,"104":2}}],["parent",{"2":{"96":2,"103":6,"104":6,"105":1,"106":3,"180":2,"474":10,"502":4,"503":4,"504":2,"577":4}}],["parsefloat",{"2":{"509":2,"578":2}}],["parse",{"2":{"157":2,"310":10,"311":10,"315":10,"527":2}}],["parser",{"2":{"43":2}}],["parseint",{"2":{"12":4,"157":4,"373":2,"509":9}}],["params",{"2":{"12":2,"15":4,"539":18}}],["password",{"2":{"9":2,"13":2,"34":2,"42":2,"43":2,"396":6}}],["p",{"2":{"4":2,"56":4,"64":8,"84":12,"87":8,"91":12,"92":24,"95":4,"102":12,"105":4,"106":4,"114":4,"116":16,"117":12,"121":24,"122":16,"123":48,"124":12,"126":12,"133":4,"135":4,"144":10,"205":5,"270":4,"295":12,"308":4,"311":4,"314":2,"345":8,"346":8,"350":6,"406":12,"578":2,"610":8}}],["美女",{"2":{"4":4,"7":6}}],["lg",{"2":{"489":1,"586":6}}],["lmhosts",{"2":{"450":1}}],["lrth",{"2":{"396":2}}],["lrucache",{"2":{"296":4}}],["lru缓存算法",{"0":{"296":1},"2":{"296":2}}],["l=",{"2":{"122":2}}],["l",{"2":{"122":4,"207":4,"234":1,"345":2,"578":4}}],["lssh",{"2":{"234":1}}],["ls",{"2":{"55":1,"62":2,"232":1,"396":2}}],["leftmenuopen",{"2":{"584":4}}],["left",{"2":{"179":6,"189":4,"190":2,"195":6,"289":6,"299":18,"300":20,"474":4,"479":1,"490":2,"551":2,"574":2}}],["less",{"2":{"149":1,"488":1,"548":1}}],["lenarray",{"2":{"392":1,"393":4}}],["len=",{"2":{"122":2}}],["len",{"2":{"122":4,"287":6,"290":4,"292":10,"302":6,"319":6,"540":6}}],["length",{"2":{"15":6,"158":2,"159":2,"279":10,"282":2,"283":2,"287":2,"288":4,"289":6,"290":2,"291":4,"292":18,"295":8,"301":4,"302":18,"313":4,"315":4,"316":6,"318":10,"319":2,"326":2,"357":2,"375":2,"382":2,"393":4,"493":8,"494":8,"495":2,"536":4,"540":2,"543":2,"544":2,"578":2,"599":6}}],["letter",{"2":{"578":6}}],["let",{"0":{"514":1},"1":{"515":1,"516":1},"2":{"5":2,"9":2,"10":2,"11":4,"15":8,"21":2,"22":2,"36":2,"37":2,"38":4,"45":2,"46":16,"108":2,"114":8,"121":2,"122":24,"126":4,"159":8,"243":4,"258":2,"260":2,"262":4,"263":4,"268":2,"278":2,"279":18,"282":8,"283":4,"285":6,"287":8,"288":8,"289":2,"290":6,"291":8,"292":4,"295":12,"297":4,"298":20,"301":20,"302":62,"308":9,"309":4,"310":8,"311":2,"313":7,"314":6,"315":4,"316":10,"318":2,"319":11,"321":3,"322":4,"323":1,"324":16,"325":3,"326":10,"341":6,"342":2,"345":2,"346":16,"347":12,"348":4,"349":3,"350":8,"357":4,"362":2,"363":2,"381":3,"383":1,"385":5,"389":3,"393":2,"399":14,"400":11,"401":2,"402":13,"434":4,"493":2,"494":6,"499":2,"502":2,"503":2,"504":2,"510":2,"514":1,"516":2,"519":6,"520":8,"523":4,"524":4,"525":8,"527":14,"532":2,"536":2,"539":7,"540":2,"542":2,"543":14,"544":10,"577":8,"578":16,"599":32,"610":4,"614":4}}],["layer`",{"2":{"586":2}}],["layout",{"2":{"156":2,"455":1,"459":2,"465":2,"475":1,"577":2}}],["latest",{"2":{"396":2}}],["lastname",{"2":{"412":4}}],["lastres",{"2":{"302":4}}],["last",{"2":{"122":8}}],["lastindexof",{"2":{"15":2,"530":1}}],["label=",{"2":{"609":4}}],["labelstyle",{"2":{"578":12,"580":2}}],["labelcfg",{"2":{"577":4,"578":8}}],["label",{"2":{"61":2,"96":4,"123":16,"578":16,"580":4,"611":2}}],["laoqi",{"2":{"37":2}}],["lang=",{"2":{"15":4,"151":2,"152":2,"153":2,"614":2}}],["loading",{"2":{"610":12}}],["loader和plugin区别",{"0":{"548":1}}],["loader",{"2":{"417":2,"418":10,"422":2,"423":8,"548":4}}],["loaded",{"2":{"15":2}}],["lock",{"2":{"563":1}}],["localstorage",{"2":{"472":1,"522":1,"523":7}}],["locales",{"2":{"268":2}}],["local",{"2":{"61":2,"66":2,"222":1,"573":2}}],["localhost",{"2":{"15":4,"45":2,"46":9,"572":2,"592":1}}],["loop",{"2":{"525":8}}],["looseautocomplete",{"2":{"424":4}}],["lorem",{"2":{"371":4}}],["long",{"2":{"268":2}}],["lowercasepipe",{"2":{"132":1}}],["log2",{"2":{"242":2}}],["log1",{"2":{"242":2}}],["logs",{"2":{"58":2}}],["logout",{"2":{"42":2}}],["login",{"2":{"42":2,"43":2,"55":2}}],["log",{"2":{"10":2,"13":2,"15":2,"16":16,"18":4,"20":4,"21":2,"22":14,"25":8,"28":4,"29":28,"30":6,"34":4,"35":4,"36":8,"37":10,"38":8,"42":2,"43":4,"45":6,"46":2,"61":2,"93":4,"103":22,"104":6,"105":6,"106":4,"109":16,"113":2,"118":2,"121":2,"125":4,"126":4,"130":2,"139":2,"140":2,"145":4,"151":2,"152":2,"153":2,"238":10,"240":4,"241":2,"242":4,"243":6,"245":10,"246":2,"247":2,"262":8,"264":2,"265":4,"269":6,"270":2,"271":4,"272":2,"276":2,"285":2,"293":4,"295":4,"296":18,"297":8,"298":4,"299":6,"301":4,"302":2,"303":2,"307":8,"308":12,"313":4,"314":4,"316":2,"318":6,"319":10,"324":4,"330":4,"331":8,"332":6,"333":2,"340":2,"341":10,"342":4,"346":2,"362":2,"363":2,"364":6,"370":2,"372":2,"381":2,"383":2,"384":2,"385":2,"389":4,"393":2,"404":2,"406":6,"407":2,"408":4,"409":2,"410":6,"411":4,"426":4,"427":2,"493":2,"494":8,"495":2,"498":2,"502":2,"503":2,"504":2,"512":2,"524":4,"525":2,"532":20,"536":6,"539":2}}],["libs",{"2":{"433":4}}],["lib",{"0":{"431":1},"2":{"414":2,"440":2}}],["linkcenter",{"2":{"577":2}}],["link",{"2":{"456":1,"573":1,"599":6}}],["linkedlist",{"2":{"298":4}}],["linedashoffset",{"2":{"578":2}}],["linedash",{"2":{"578":2}}],["lineargradient",{"2":{"478":5}}],["linear",{"2":{"179":2,"186":8,"195":8,"198":2,"199":2,"478":2}}],["line",{"2":{"176":2,"190":2,"198":2,"474":1,"577":4,"578":8}}],["linux目录结构",{"0":{"71":1}}],["linux为",{"2":{"61":2}}],["linux",{"2":{"51":2,"66":2}}],["li",{"2":{"122":8,"144":24,"577":12}}],["light",{"2":{"99":3}}],["listpage",{"2":{"158":2}}],["list",{"2":{"96":2,"157":2,"599":6}}],["listener",{"2":{"293":8}}],["listen",{"2":{"20":2,"21":2,"22":4,"28":2,"29":4,"30":2,"42":4,"43":2,"46":2}}],["lisi",{"2":{"25":6,"399":2}}],["limit=20",{"2":{"12":2}}],["limit",{"2":{"4":2,"12":8,"55":2,"158":2}}],["likes",{"2":{"4":2,"7":8}}],["like",{"2":{"4":8,"157":2,"158":6}}],["lts",{"2":{"396":2}}],["lt",{"2":{"4":8,"5":2,"7":10,"15":36,"21":12,"22":8,"45":10,"46":10,"61":4,"84":16,"86":18,"87":8,"88":4,"89":24,"90":26,"91":12,"92":32,"93":8,"95":16,"96":18,"98":4,"102":34,"104":30,"105":40,"106":40,"107":28,"108":10,"109":1,"113":22,"114":86,"116":52,"117":20,"118":12,"119":4,"121":62,"122":40,"123":96,"124":14,"125":2,"126":28,"128":4,"129":4,"130":16,"133":4,"135":4,"137":12,"139":36,"140":7,"143":6,"144":40,"145":14,"146":4,"150":6,"151":16,"152":16,"153":16,"159":2,"168":16,"170":16,"173":8,"174":4,"178":16,"210":2,"249":2,"256":10,"260":2,"279":4,"281":2,"282":4,"285":6,"287":4,"288":8,"289":6,"290":6,"291":6,"292":16,"294":2,"295":2,"297":8,"300":8,"301":4,"302":10,"303":24,"316":6,"318":2,"319":4,"326":2,"335":12,"346":36,"347":36,"349":32,"350":16,"357":4,"362":2,"365":2,"388":1,"389":2,"393":2,"399":2,"400":2,"402":2,"424":8,"478":16,"482":20,"493":2,"494":2,"536":4,"551":18,"577":16,"586":14,"587":8,"609":18,"610":42,"614":14}}],["$bus",{"2":{"612":6}}],["$background",{"2":{"195":6}}],["$el",{"2":{"610":2}}],["$emit",{"2":{"610":4,"612":2}}],["$event",{"2":{"93":2,"96":2,"109":1,"116":2,"117":4,"125":2}}],["$message",{"2":{"610":2}}],["$host",{"2":{"590":2}}],["$remote",{"2":{"590":2}}],["$refs",{"2":{"584":2,"610":2,"615":4}}],["$router",{"2":{"157":6,"572":2}}],["$route",{"2":{"157":8,"158":2}}],["$px",{"2":{"583":8}}],["$profile",{"2":{"228":1}}],["$profilecode",{"2":{"228":1}}],["$designheight",{"2":{"583":4}}],["$designwidth",{"2":{"583":4}}],["$data",{"2":{"577":2}}],["$on",{"2":{"612":2}}],["$off",{"2":{"612":2}}],["$options",{"2":{"577":2}}],["$or",{"2":{"4":4}}],["$value",{"2":{"574":8}}],["$canvasref",{"2":{"551":10}}],["$color",{"2":{"177":2}}],["$`",{"2":{"346":2}}],["$1",{"2":{"346":2}}],["$y",{"2":{"195":6}}],["$x",{"2":{"195":6}}],["$nexttick",{"2":{"610":2}}],["$notify",{"2":{"159":4,"610":4}}],["$nginx",{"2":{"61":2}}],["$angle",{"2":{"195":10}}],["$any",{"2":{"135":2}}],["$alpha",{"2":{"177":2}}],["$attrs",{"2":{"150":1,"151":4,"152":4,"153":4}}],["$implicit",{"2":{"114":2,"122":2,"126":4}}],["$in",{"2":{"4":2}}],["$",{"0":{"342":1},"2":{"56":2,"157":2,"285":4,"294":2,"302":2,"342":2,"345":2,"346":8,"347":2,"348":2,"350":6,"396":6,"571":2,"577":6,"578":2,"599":12,"613":2,"614":2}}],["$store",{"2":{"584":2}}],["$set",{"2":{"7":8,"11":2}}],["$size",{"2":{"4":2,"195":8}}],["$lt",{"2":{"4":8}}],["o3",{"2":{"504":8}}],["o2",{"2":{"503":8}}],["o1",{"2":{"502":8}}],["omit",{"2":{"424":4}}],["o6ukw45e",{"2":{"357":2}}],["ownkeys",{"2":{"318":2}}],["oldestkey",{"2":{"296":4}}],["oldname",{"2":{"46":8}}],["oh",{"2":{"222":1,"224":2,"227":2,"229":1,"230":2}}],["ohmyposh",{"2":{"222":1}}],["ohmyposhwinget",{"2":{"222":1}}],["overflow",{"2":{"176":8,"177":4,"482":7,"610":2,"611":4}}],["other",{"2":{"123":8}}],["od=",{"2":{"122":2}}],["odd",{"2":{"122":8}}],["od",{"2":{"122":4}}],["outdiv",{"2":{"577":6}}],["outdir",{"2":{"414":4,"440":4}}],["outfile",{"2":{"414":4,"440":2}}],["outline",{"2":{"185":2,"189":2}}],["outlet组件里的value",{"2":{"114":2}}],["outlet组件里的context",{"2":{"114":2}}],["outlet组件中的数据",{"2":{"114":4}}],["outlet",{"2":{"114":14}}],["out",{"2":{"179":2}}],["output变量名=输入属性名+change",{"2":{"116":2}}],["output",{"0":{"96":1},"2":{"94":1,"96":4,"113":4,"116":8,"125":4,"418":2,"573":4}}],["observe",{"2":{"250":2,"615":2}}],["observer",{"2":{"250":6}}],["observable",{"2":{"112":1}}],["objarr1",{"2":{"319":4}}],["obj3",{"2":{"318":4}}],["obj1",{"2":{"318":46}}],["obj对象",{"2":{"274":1}}],["obj对象的原型链",{"2":{"274":1}}],["obj2",{"2":{"265":2,"318":36}}],["obj",{"2":{"157":4,"262":14,"265":2,"272":2,"274":1,"319":24,"326":6,"402":2,"512":3,"527":30}}],["object顶级对象是",{"2":{"499":2}}],["object值",{"2":{"433":1}}],["object\\t",{"2":{"399":2}}],["object对象",{"2":{"278":1}}],["object的原型没有原型",{"2":{"275":1}}],["object中的属性名只能是字符串或符号",{"2":{"265":1}}],["object中存储的数据就可以认为是一种键值对结构",{"2":{"265":1}}],["object",{"2":{"157":6,"274":1,"277":1,"316":2,"318":10,"319":2,"399":1,"414":4,"499":4,"500":1,"506":2,"507":4,"512":2,"527":4,"533":1,"552":1,"577":2,"578":2,"599":4}}],["objectid",{"2":{"6":2,"7":2,"10":2,"13":2}}],["offline",{"2":{"158":2}}],["offset=",{"2":{"478":4}}],["offset=0",{"2":{"12":2}}],["offset",{"2":{"12":4,"15":16}}],["of",{"0":{"586":1},"1":{"587":1},"2":{"108":2,"122":2,"230":4,"243":4,"263":2,"265":2,"318":2,"349":2,"357":2,"588":1}}],["o",{"2":{"66":2,"292":2,"543":2,"544":2}}],["okay",{"2":{"434":6}}],["ok",{"2":{"55":2,"400":2,"428":2,"512":2}}],["okpacket",{"2":{"36":2}}],["opath",{"2":{"578":12}}],["opacity",{"2":{"203":4,"551":2,"577":2,"578":28,"614":4}}],["opt",{"2":{"573":2}}],["optimization",{"2":{"571":2}}],["options",{"2":{"113":14,"157":4,"268":2,"418":2,"423":2,"440":2,"602":6}}],["option",{"2":{"2":2,"333":4,"334":2,"507":8}}],["operate",{"2":{"540":14}}],["opens",{"2":{"426":2,"429":1,"432":1,"438":1}}],["opensaveas",{"2":{"334":2}}],["opensave",{"2":{"334":2}}],["openshow",{"2":{"334":2}}],["opencreate",{"2":{"334":4}}],["openfilepicker",{"2":{"333":2}}],["open",{"2":{"13":2,"234":1,"333":2,"420":2,"573":2,"584":2}}],["op",{"2":{"157":8,"158":2}}],["onresize",{"2":{"584":2}}],["onrejected",{"2":{"305":8,"306":6,"307":2,"308":12,"309":2,"310":16,"311":12,"315":14}}],["ontouchstart=",{"2":{"551":2}}],["ondragstart=",{"2":{"551":2}}],["ondestroy",{"2":{"109":4,"113":2}}],["onmounted",{"2":{"614":2}}],["onmouseleave",{"2":{"125":2}}],["onmouseenter",{"2":{"125":2}}],["onmessage",{"2":{"495":6}}],["onselectdir",{"2":{"357":4}}],["onfetch",{"2":{"335":2}}],["onfulfilled",{"2":{"305":8,"306":2,"307":2,"308":12,"309":2,"310":16,"311":12,"315":14}}],["onlineispref",{"2":{"584":2}}],["online",{"2":{"158":2}}],["onload",{"2":{"15":2,"331":2,"333":2,"335":2,"551":4}}],["onpush策略会把组件从组件树中剥离出去",{"2":{"112":1}}],["onpush",{"2":{"112":1,"113":2}}],["onpushchangedetection",{"2":{"112":1}}],["onpush下触发变更检测时机",{"0":{"112":1}}],["onprogress",{"2":{"15":4}}],["oninit",{"2":{"103":4,"104":4,"105":4,"106":4,"109":4,"113":8,"114":4,"116":8,"121":4}}],["oncontextmenu",{"2":{"551":2}}],["oncontextmenu=",{"2":{"551":4}}],["onchange=",{"2":{"146":4}}],["onchanges",{"2":{"109":4,"126":4}}],["onclick=",{"2":{"143":2}}],["onclick1",{"2":{"93":6}}],["onclick",{"2":{"93":6,"528":1,"536":4}}],["once",{"2":{"13":2}}],["onbuild",{"2":{"61":2}}],["onupload",{"2":{"45":4}}],["onuploadprogress",{"2":{"15":2}}],["on",{"2":{"13":2,"20":2,"21":2,"22":4,"36":2,"293":6,"347":6,"396":4,"551":2,"577":4,"592":1,"609":2}}],["orange",{"2":{"364":6,"481":2}}],["original",{"2":{"298":2}}],["originalname",{"2":{"46":4}}],["origin",{"2":{"184":2,"195":4,"198":2,"205":2,"206":2,"207":2,"211":23,"213":2}}],["orient",{"2":{"176":2}}],["or",{"2":{"4":6,"230":4,"234":1,"440":8,"592":1}}],["or条件",{"2":{"4":1}}],["相比于位图图像",{"2":{"484":1}}],["相邻选择器",{"2":{"476":1}}],["相等",{"2":{"512":1}}],["相等与全等区别",{"0":{"512":1}}],["相等则再递归对比值是否相等",{"2":{"318":1}}],["相等运算符",{"0":{"257":1}}],["相同",{"2":{"599":2}}],["相同则不需要发请求",{"2":{"559":2}}],["相同属性名",{"2":{"554":1}}],["相同属性后定义覆盖先定义",{"2":{"476":1}}],["相同的是否收集",{"2":{"326":2}}],["相同的元素只保留一个",{"2":{"316":2}}],["相同字段and查询中出现多次",{"2":{"4":2}}],["相对定位relative",{"2":{"479":1}}],["相对单位会变成绝对单位",{"2":{"458":1}}],["相对于不同环境打包时的打包命令",{"2":{"573":1}}],["相对于最近滚动祖先定位",{"2":{"479":1}}],["相对于最近的非",{"2":{"479":1}}],["相对于浏览器视口进行定位",{"2":{"479":1}}],["相对于",{"2":{"324":2}}],["相对于原生事件监听",{"2":{"125":1}}],["相对路径在上一层读取不了文件",{"2":{"16":1}}],["相当于执行",{"2":{"563":1}}],["相当于一个标识",{"2":{"232":2}}],["相当于是在原有的提交上进行修改",{"2":{"213":2}}],["相当于用",{"2":{"113":2}}],["相当于在父组件的style中使用标签选择器选择",{"2":{"98":2}}],["相当于对父组件传入的aliasitem变量进行重命名",{"2":{"95":2}}],["相关错误",{"0":{"588":1}}],["相关的两个包",{"2":{"43":2}}],["相关概念",{"0":{"0":1}}],["男",{"2":{"4":12,"5":4,"144":6,"399":2}}],["382",{"2":{"578":2}}],["31",{"2":{"578":2}}],["311",{"2":{"578":2}}],["3s",{"2":{"578":2}}],["3左右",{"2":{"485":1}}],["364",{"2":{"578":2}}],["36",{"2":{"370":2}}],["3777dd",{"2":{"585":2}}],["370",{"2":{"578":2}}],["37",{"2":{"365":2}}],["3个",{"2":{"347":2}}],["3=3",{"2":{"296":4}}],["34|56",{"2":{"341":2}}],["34",{"2":{"285":2,"578":2}}],["359",{"2":{"578":2}}],["35",{"2":{"268":2,"578":2}}],["35px",{"2":{"189":2}}],["32px",{"2":{"603":8}}],["320",{"2":{"578":2}}],["32",{"2":{"268":2}}],["3秒后打印的",{"2":{"238":4}}],["3和",{"2":{"210":2}}],["3em",{"2":{"195":12}}],["3px",{"2":{"98":2,"191":1}}],["333",{"2":{"578":4}}],["333399",{"2":{"478":1}}],["33",{"2":{"84":2,"186":4}}],["3",{"0":{"6":1,"11":1,"22":1,"36":1,"42":1,"56":1,"68":1,"72":1,"86":1,"118":1,"234":1,"253":1,"342":1,"418":1,"428":1},"1":{"57":1,"58":1,"59":1,"60":1,"63":1,"64":1,"66":1,"67":1,"68":1},"2":{"4":2,"16":12,"36":2,"79":2,"80":2,"103":2,"104":2,"107":2,"108":4,"137":5,"140":1,"145":2,"147":17,"165":1,"168":4,"170":4,"172":8,"176":2,"177":2,"179":2,"186":4,"210":2,"243":4,"282":8,"285":2,"288":2,"296":8,"297":8,"298":2,"299":10,"302":4,"303":2,"304":2,"315":4,"316":12,"319":10,"321":4,"322":4,"324":6,"329":4,"330":4,"346":2,"347":4,"363":4,"364":10,"365":2,"370":2,"372":4,"373":4,"378":1,"380":4,"381":4,"382":4,"383":4,"385":2,"393":2,"399":4,"408":2,"418":2,"423":2,"424":2,"432":2,"448":1,"482":1,"493":4,"494":4,"495":2,"512":4,"532":8,"539":8,"540":2,"577":2,"578":12,"602":1}}],["305",{"2":{"578":2}}],["303133",{"2":{"577":2,"578":2}}],["300",{"2":{"493":2,"494":2,"577":4,"578":4}}],["3000",{"2":{"15":4,"45":2,"46":11,"238":8,"578":10}}],["30deg",{"2":{"189":2,"195":4}}],["30db",{"2":{"4":2}}],["30px",{"2":{"166":6,"186":2}}],["30s",{"2":{"43":2}}],["30",{"2":{"4":16,"37":2,"84":2,"156":2,"165":2,"262":2,"346":6,"362":4,"384":2}}],["39",{"2":{"2":12,"4":44,"5":68,"6":12,"7":40,"9":4,"10":8,"11":4,"12":20,"13":68,"15":32,"16":72,"17":16,"18":20,"20":32,"21":8,"22":28,"25":28,"28":20,"29":108,"30":52,"34":32,"35":16,"36":18,"42":60,"43":72,"45":32,"84":12,"85":16,"89":20,"90":24,"91":24,"92":64,"93":16,"95":26,"96":38,"103":72,"104":24,"105":28,"106":24,"107":8,"108":64,"109":48,"113":68,"114":24,"116":56,"117":8,"118":12,"119":8,"121":32,"122":32,"123":24,"124":12,"125":36,"126":28,"130":20,"137":4,"139":4,"140":8,"143":16,"144":32,"145":12,"146":8,"151":8,"152":8,"153":12,"156":4,"157":32,"158":4,"179":4,"189":4,"190":8,"195":8,"197":8,"213":4,"220":8,"230":4,"232":4,"239":12,"240":8,"241":4,"242":12,"243":12,"245":44,"246":4,"247":4,"249":16,"250":12,"251":4,"253":4,"256":28,"257":8,"261":4,"262":4,"265":4,"268":6,"269":4,"270":4,"279":88,"283":12,"293":24,"294":4,"295":4,"302":132,"303":20,"304":12,"305":8,"307":16,"308":4,"313":8,"315":12,"316":12,"318":100,"319":156,"325":72,"326":4,"329":16,"330":24,"331":12,"332":12,"333":24,"334":4,"335":16,"341":16,"345":44,"346":14,"347":40,"348":8,"349":12,"350":4,"357":24,"364":32,"371":16,"372":8,"374":36,"375":8,"384":12,"385":36,"393":20,"395":4,"396":8,"399":32,"400":20,"402":8,"406":24,"407":8,"409":4,"410":4,"411":8,"414":280,"418":32,"433":8,"434":20,"440":80,"495":16,"498":12,"502":4,"503":4,"504":4,"507":8,"509":4,"510":8,"512":8,"519":16,"523":36,"524":12,"525":8,"527":8,"531":8,"532":8,"533":10,"536":16,"539":4,"541":8,"542":40,"551":16,"570":8,"572":8,"573":12,"574":12,"577":48,"578":72,"584":20,"589":24,"590":8,"599":80,"610":20,"612":8,"615":4}}],["a路由组件",{"2":{"612":2}}],["aop",{"2":{"552":1}}],["a标签跳转",{"2":{"528":1}}],["ajax",{"2":{"492":1}}],["audio",{"2":{"483":1}}],["authenticated",{"2":{"235":1}}],["authentication",{"2":{"234":1}}],["author",{"2":{"12":10,"13":2}}],["autozoom",{"2":{"577":6}}],["automatic",{"2":{"234":1}}],["auto自动",{"2":{"165":1}}],["auto",{"2":{"165":2,"177":2,"190":2,"197":2,"198":2,"474":6}}],["aaa",{"2":{"432":2}}],["aaab",{"2":{"126":2}}],["a值只能为99",{"2":{"402":2}}],["average",{"2":{"382":6}}],["aids",{"2":{"327":4}}],["a∩b",{"0":{"323":1,"327":1}}],["a∪b",{"0":{"322":1,"326":1}}],["a++",{"2":{"254":2,"510":4}}],["a+b+c",{"2":{"146":2}}],["a+b",{"2":{"137":1}}],["a任务需要等到b任务执行完后才执行",{"2":{"243":2}}],["a2962a402336",{"2":{"231":2}}],["ack",{"2":{"468":3}}],["accountinfo",{"2":{"609":4}}],["account",{"2":{"589":6}}],["according",{"2":{"578":2}}],["acc",{"2":{"380":4,"382":4}}],["accept",{"2":{"333":2}}],["access",{"2":{"234":2,"235":1}}],["ac1e",{"2":{"231":2}}],["activated",{"2":{"559":5}}],["active",{"2":{"98":3}}],["action来自动化部署",{"2":{"607":1}}],["actions",{"2":{"396":6}}],["action",{"0":{"396":1},"2":{"396":6}}],["action=",{"2":{"46":2}}],["again",{"2":{"230":2}}],["age推断为number",{"2":{"401":1}}],["age推断为numberlet",{"2":{"401":1}}],["agentset",{"2":{"234":1}}],["agent",{"2":{"234":8}}],["agent中",{"0":{"234":1},"2":{"234":1}}],["age默认值为18",{"2":{"144":2}}],["age+1",{"2":{"144":2}}],["age=",{"2":{"29":6,"37":2,"144":6}}],["age",{"2":{"4":34,"5":8,"6":4,"7":14,"25":6,"29":8,"30":2,"35":4,"36":4,"37":4,"144":12,"265":4,"269":8,"270":2,"271":6,"318":6,"319":10,"399":6,"400":4,"401":2,"404":8,"405":8,"406":36,"409":8,"410":8,"412":2,"498":8,"502":4,"503":4,"504":4,"527":2}}],["amale",{"2":{"400":2}}],["amend",{"2":{"213":2}}],["amp",{"2":{"158":4,"159":4,"177":8,"195":2,"255":20,"256":4,"279":12,"282":4,"290":8,"291":4,"292":8,"297":8,"301":8,"302":12,"318":8,"324":4,"346":2,"350":2,"400":6,"420":4,"434":4,"507":4,"512":8,"519":4,"535":1,"544":8,"578":4,"599":4}}],["amd",{"2":{"149":1,"414":2,"430":2,"440":2,"549":1}}],["ababacb",{"2":{"301":3}}],["abababaababacb",{"2":{"301":3}}],["abstract",{"0":{"411":1},"2":{"411":3}}],["abs",{"2":{"297":4,"302":2,"373":2}}],["absolute",{"2":{"113":2,"179":2,"189":2,"190":4,"195":4,"474":4,"490":2,"551":2,"574":2}}],["abc",{"2":{"256":2,"316":6,"531":4}}],["about",{"2":{"21":4}}],["afterdraw",{"2":{"578":10}}],["after",{"2":{"189":2,"190":2,"490":2}}],["afterviewchecked",{"2":{"109":4}}],["afterviewinit",{"2":{"103":4,"104":4,"105":4,"106":4,"109":4,"121":4}}],["aftercontentinit",{"2":{"109":4}}],["aftercontentchecked",{"2":{"109":4}}],["affectedrows",{"2":{"36":4,"37":4,"38":4}}],["affectedrows大于0表示插入成功",{"2":{"36":2}}],["a=",{"2":{"55":2,"145":2,"325":2}}],["alwaysstrict",{"2":{"414":2,"434":1,"440":2}}],["alt",{"2":{"603":2}}],["alternate",{"2":{"203":4}}],["alt=",{"2":{"86":6,"88":2,"551":2}}],["alert标签",{"2":{"113":2}}],["alertcomponent",{"2":{"113":14}}],["alert",{"2":{"113":13,"239":8,"539":2}}],["alertoption",{"2":{"113":6}}],["alerttheme",{"2":{"113":4}}],["alive内置缓存组件",{"0":{"559":1}}],["alice",{"2":{"385":6,"498":6}}],["alias",{"2":{"126":2,"571":2}}],["aliasitem",{"2":{"95":2}}],["align",{"2":{"92":6,"167":4,"168":4,"170":2,"174":7,"474":7,"577":2,"603":2,"611":2}}],["aliyuncs",{"2":{"55":8}}],["aliyun",{"2":{"51":2}}],["allowsyntheticdefaultimports",{"2":{"440":2}}],["allowjs",{"0":{"437":1},"2":{"414":2,"440":2}}],["all组合",{"2":{"243":2}}],["allheros",{"2":{"108":4}}],["all",{"0":{"313":1},"2":{"15":2,"243":2,"313":4,"315":2,"492":2,"571":4,"577":2}}],["allprogress",{"2":{"15":6}}],["addshape",{"2":{"578":28,"580":2}}],["add1",{"2":{"540":10}}],["addtask",{"2":{"493":4}}],["addr",{"2":{"590":2}}],["addrange",{"2":{"574":2}}],["addrule",{"2":{"457":1}}],["address",{"2":{"318":6,"319":10,"399":2,"412":2}}],["added表示成功",{"2":{"234":1}}],["addeventlistener默认绑定冒泡阶段",{"2":{"528":1}}],["addeventlistener",{"2":{"125":1,"249":2,"495":6,"528":1,"551":2,"574":4,"577":2,"584":4,"610":2,"614":2,"615":2}}],["add区别",{"2":{"211":1}}],["addhero",{"2":{"108":4}}],["addnewitem",{"2":{"96":4}}],["additem",{"2":{"96":4}}],["add",{"2":{"51":2,"61":4,"96":4,"209":2,"211":6,"234":4,"266":2,"395":2,"539":22}}],["admin",{"2":{"42":2,"43":4}}],["attachview",{"2":{"113":2}}],["attrs",{"2":{"578":28,"580":2}}],["attr=",{"2":{"150":2}}],["attr=attr",{"2":{"126":2}}],["attributes",{"2":{"150":2}}],["attr",{"2":{"87":4,"102":4,"126":8,"326":6,"541":18,"578":4}}],["at",{"2":{"36":2,"42":2,"43":2,"46":2,"347":6,"530":1}}],["apache2",{"2":{"61":4}}],["apt",{"2":{"55":2,"70":1}}],["appdata",{"2":{"222":1}}],["appunless=",{"2":{"126":6}}],["appunless",{"2":{"126":8}}],["apphighlight=",{"2":{"124":2}}],["apphighlight",{"2":{"124":4,"125":6}}],["apply除了可以调用函数",{"2":{"262":1}}],["apply",{"2":{"262":6,"282":8,"375":2,"519":6,"520":6,"548":1,"577":2,"586":2}}],["apple",{"2":{"123":10,"364":6}}],["applicationref",{"2":{"112":1,"113":4}}],["appref",{"2":{"113":4}}],["appcomponent",{"2":{"82":2,"84":2,"85":2,"89":2,"90":2,"91":2,"92":2,"93":2,"95":2,"96":2,"108":3,"109":2,"116":4,"126":2,"130":2}}],["appmodule",{"2":{"82":2}}],["app",{"2":{"28":6,"29":23,"30":10,"42":18,"43":16,"46":6,"84":2,"85":6,"89":2,"90":2,"91":2,"92":2,"93":2,"95":12,"96":8,"98":6,"102":4,"103":2,"104":14,"105":22,"106":30,"108":2,"109":6,"113":5,"114":6,"116":28,"119":4,"121":6,"122":2,"123":2,"126":2,"130":10,"414":2,"572":5,"573":4}}],["appendchild",{"2":{"113":2,"574":2}}],["append",{"2":{"15":10,"45":2}}],["api技术",{"2":{"492":1}}],["api都能用",{"2":{"125":1}}],["apirouter",{"2":{"30":8}}],["api",{"2":{"27":2,"30":2,"42":8,"43":6,"336":2,"526":2,"561":1,"589":6}}],["a",{"0":{"324":1,"328":1},"2":{"17":4,"55":2,"56":6,"75":2,"137":1,"146":3,"147":2,"161":1,"168":12,"170":12,"173":4,"197":2,"230":6,"234":1,"243":4,"251":8,"252":8,"253":4,"254":2,"255":4,"256":2,"258":4,"264":6,"284":6,"287":20,"297":8,"316":6,"319":8,"321":2,"322":2,"324":16,"327":2,"335":4,"345":2,"346":2,"348":2,"350":10,"388":13,"389":4,"395":2,"400":4,"402":2,"405":4,"432":4,"510":2,"512":21,"519":2,"524":6,"539":8,"578":2,"586":4}}],["antv",{"2":{"578":2}}],["animate",{"2":{"577":2,"578":22}}],["animation",{"2":{"179":2,"203":4}}],["animals",{"2":{"411":2}}],["animal",{"2":{"271":4,"277":1,"409":4,"410":4,"411":2}}],["an",{"2":{"96":2,"295":2}}],["angular",{"2":{"78":1,"84":4,"85":2,"89":2,"90":2,"91":2,"92":2,"93":2,"95":4,"96":4,"103":2,"104":2,"105":2,"106":2,"107":2,"108":5,"109":3,"113":4,"114":2,"116":8,"119":2,"121":6,"122":2,"123":2,"125":2,"126":4,"128":4,"129":5,"130":4,"132":1}}],["angular基础总结一",{"0":{"76":1},"1":{"77":1,"78":1,"79":1,"80":1,"81":1,"82":1,"83":1,"84":1,"85":1,"86":1,"87":1,"88":1,"89":1,"90":1,"91":1,"92":1,"93":1,"94":1,"95":1,"96":1,"97":1,"98":1,"99":1,"100":1,"101":1}}],["any类型时报错",{"2":{"440":2}}],["any类型时是否报错",{"2":{"428":1}}],["any类型可以赋值任意类型",{"2":{"400":1}}],["any类型可以赋值任意类型let",{"2":{"400":1}}],["any\\t\\t",{"2":{"400":2}}],["any",{"2":{"15":2,"108":4,"121":4,"126":2,"333":4,"334":4,"400":2,"428":2,"440":2}}],["and",{"2":{"4":4,"230":2,"234":2,"396":4}}],["and条件",{"2":{"4":1}}],["ascii",{"2":{"531":4}}],["asfghj",{"2":{"402":2}}],["aset",{"2":{"324":4}}],["assign",{"2":{"157":6,"527":2,"577":2,"578":2,"599":2}}],["assertion",{"2":{"134":1}}],["assets",{"2":{"86":2}}],["as",{"0":{"402":1},"2":{"15":2,"113":4,"121":2,"122":4,"126":2,"230":2,"333":2,"334":4,"335":2,"400":2,"402":6}}],["asynciterable",{"2":{"414":4}}],["asyncgenerator",{"2":{"414":2}}],["async的函数并不会阻塞后续同步代码执行",{"2":{"240":2}}],["async标记该函数就是一个异步函数",{"2":{"240":1}}],["asyncpipe",{"2":{"132":1}}],["async",{"0":{"240":1},"1":{"241":1,"242":1,"243":1},"2":{"9":2,"10":2,"12":4,"15":4,"112":1,"122":4,"159":2,"240":2,"241":2,"242":2,"243":5,"333":2,"334":6,"335":2,"357":4,"493":2,"494":2,"551":4,"589":2}}],["area",{"2":{"168":6,"170":6,"173":10}}],["areas",{"2":{"168":2,"170":2}}],["around",{"2":{"167":4}}],["arrowfunction",{"2":{"418":2}}],["arr=",{"2":{"363":2,"364":2,"365":2,"370":2}}],["arr2数组没有的对象",{"2":{"328":2}}],["arr2",{"2":{"292":10,"322":18,"323":4,"324":4,"326":12,"327":8,"328":8,"364":4}}],["arr11",{"2":{"385":3}}],["arr1",{"2":{"292":10,"322":18,"323":4,"324":4,"326":12,"327":6,"328":8,"364":6,"385":2,"399":4}}],["arr数组已全部匹配",{"2":{"279":2}}],["arr",{"2":{"137":1,"146":1,"247":4,"265":4,"279":8,"282":38,"287":26,"288":25,"289":16,"290":19,"316":40,"319":6,"326":14,"360":4,"363":2,"364":6,"365":2,"368":2,"370":2,"372":4,"378":2,"380":4,"381":4,"383":8,"388":1,"389":6,"393":6,"399":4,"402":10,"428":4,"434":2,"527":6,"539":6,"599":2}}],["array可选",{"2":{"368":2}}],["array1",{"2":{"282":4}}],["array",{"2":{"15":4,"265":2,"282":18,"288":4,"291":18,"295":4,"301":2,"318":4,"319":2,"322":2,"324":2,"368":1,"375":2,"378":3,"383":2,"399":4,"414":6,"506":1,"527":6,"552":1}}],["arraybuffer",{"0":{"330":1},"2":{"15":4,"330":6,"336":1}}],["args",{"0":{"264":1},"2":{"264":4,"293":4,"519":10,"520":12,"539":14,"577":4}}],["arguments用来存储函数的实参",{"2":{"263":2}}],["arguments是一个类数组对象",{"2":{"263":2}}],["arguments是函数中又一个隐含参数",{"2":{"263":2}}],["arguments",{"0":{"263":1},"2":{"263":4,"295":2,"577":2}}],["arg变量可以传递给env",{"2":{"61":2}}],["arg",{"2":{"61":4,"512":1}}],["articleschema",{"2":{"13":4}}],["articlecount",{"2":{"12":4}}],["articlelist",{"2":{"12":6}}],["articleid",{"2":{"12":2}}],["article",{"2":{"10":2,"11":16,"12":14,"13":7}}],["axios等",{"2":{"492":1}}],["axios",{"2":{"15":8,"45":6}}],["await必须成对出现",{"2":{"240":1}}],["await关键字的后面要跟一个promise对象",{"2":{"240":1}}],["await",{"0":{"240":1},"1":{"241":1,"242":1,"243":1},"2":{"9":2,"10":2,"11":2,"12":10,"15":10,"158":2,"159":2,"240":3,"241":2,"242":2,"243":12,"330":4,"333":4,"334":20,"335":6,"357":10,"493":2,"494":2,"551":2,"589":2}}],["=str",{"2":{"578":2}}],["=href=",{"2":{"350":2}}],["=地图",{"2":{"350":2}}],["=digitmap",{"2":{"302":2}}],["=nums",{"2":{"362":2}}],["=n",{"2":{"285":2}}],["=10",{"2":{"285":2}}],["=1",{"2":{"285":2}}],["=\\t",{"2":{"256":2,"257":2}}],["=\\t\\t",{"2":{"252":2}}],["==0",{"2":{"363":2}}],["==",{"2":{"42":4,"43":4,"61":4,"147":4,"172":4,"220":2,"257":8,"279":12,"295":2,"298":4,"300":4,"301":4,"302":2,"304":4,"305":8,"306":4,"307":4,"308":6,"309":4,"310":6,"311":8,"313":2,"315":14,"316":2,"318":6,"319":2,"326":2,"327":2,"328":2,"347":6,"365":6,"449":5,"450":3,"500":2,"507":2,"512":19,"519":4,"527":2,"536":2,"544":2,"599":2}}],["===index",{"2":{"364":2}}],["=====",{"2":{"147":10}}],["===",{"2":{"15":4,"21":6,"22":6,"43":2,"75":2,"89":2,"121":4,"157":2,"159":2,"257":4,"279":20,"281":2,"283":2,"284":2,"292":4,"295":2,"297":2,"300":14,"301":6,"302":6,"316":8,"318":26,"319":6,"322":2,"326":4,"328":2,"331":2,"357":4,"364":2,"396":5,"400":2,"428":4,"434":2,"493":2,"494":6,"499":4,"507":4,"512":3,"519":2,"527":6,"540":4,"570":2,"573":2,"577":8,"578":4,"610":4}}],["=user",{"2":{"12":2}}],["=async",{"2":{"11":2}}],["=0",{"2":{"5":2}}],["=",{"2":{"4":10,"9":8,"10":8,"11":8,"12":24,"13":34,"15":92,"16":2,"17":4,"18":2,"20":8,"21":16,"22":40,"25":12,"28":8,"29":42,"30":20,"34":6,"35":4,"36":10,"37":10,"38":12,"42":16,"43":20,"45":10,"46":40,"84":4,"86":4,"87":4,"89":16,"90":18,"91":10,"92":18,"93":4,"95":4,"96":10,"104":2,"107":4,"108":18,"109":1,"113":26,"114":14,"116":32,"117":16,"118":14,"121":18,"122":18,"123":14,"124":4,"125":4,"126":28,"130":8,"137":2,"143":10,"144":16,"145":24,"146":16,"157":46,"158":24,"159":20,"211":22,"220":2,"238":10,"239":18,"240":2,"243":14,"245":2,"246":8,"247":18,"249":10,"250":16,"251":10,"252":12,"253":4,"256":2,"258":2,"260":2,"262":8,"263":2,"264":2,"265":14,"268":8,"269":8,"270":8,"271":6,"274":1,"276":4,"278":6,"279":26,"281":2,"282":22,"283":6,"285":4,"287":26,"288":24,"289":14,"290":16,"291":22,"292":24,"293":14,"294":14,"295":44,"296":18,"297":6,"298":44,"299":26,"300":56,"301":32,"302":76,"303":22,"304":18,"305":8,"306":4,"307":26,"308":42,"309":8,"310":30,"311":28,"312":4,"313":24,"314":26,"315":72,"316":48,"318":18,"319":16,"321":4,"322":22,"323":6,"324":26,"326":38,"327":20,"328":16,"329":4,"330":8,"331":6,"332":2,"333":16,"334":34,"335":22,"340":2,"341":6,"342":4,"345":4,"346":20,"347":12,"348":10,"349":4,"350":14,"357":22,"362":4,"363":2,"364":10,"365":6,"370":2,"371":8,"372":6,"373":6,"374":12,"375":2,"378":2,"380":6,"381":6,"382":6,"383":8,"384":6,"385":16,"388":1,"389":2,"393":8,"399":24,"400":18,"401":2,"402":16,"404":6,"405":8,"406":30,"407":8,"408":2,"409":6,"410":6,"418":8,"424":10,"428":4,"434":10,"475":2,"489":1,"493":32,"494":38,"495":8,"498":6,"499":2,"502":6,"503":8,"504":6,"507":4,"510":4,"512":10,"519":28,"520":22,"523":10,"524":8,"525":14,"526":1,"527":16,"532":4,"536":22,"539":48,"540":26,"541":4,"542":2,"543":28,"544":20,"551":36,"570":4,"571":2,"572":4,"573":2,"574":24,"577":46,"578":118,"579":4,"584":12,"589":2,"599":76,"602":2,"610":28,"614":14,"615":10}}],["0px",{"2":{"605":1}}],["09",{"2":{"578":2}}],["0性能提升",{"0":{"561":1}}],["0个或1个",{"2":{"347":2}}],["0个或多个",{"2":{"347":2}}],["08",{"2":{"325":2,"346":6}}],["07",{"2":{"325":2}}],["0\\t",{"2":{"282":2}}],["00",{"2":{"614":2}}],["009cc9",{"2":{"585":2}}],["00f",{"2":{"478":2}}],["0085f9",{"2":{"177":2}}],["000",{"2":{"168":2,"170":2,"192":2,"200":4}}],["000000",{"2":{"42":2,"43":2,"177":2}}],["06",{"2":{"43":2,"325":2}}],["05em",{"2":{"199":4}}],["05",{"2":{"43":2,"325":2}}],["03",{"2":{"43":2,"325":4}}],["04",{"2":{"43":2,"325":2}}],["024",{"2":{"578":2}}],["020",{"2":{"340":2,"342":2}}],["02",{"2":{"43":2,"318":6,"319":10,"325":2,"533":2}}],["012",{"2":{"578":2}}],["01234",{"2":{"536":2}}],["010|020",{"2":{"340":2,"342":4}}],["01",{"2":{"43":2,"325":2}}],["0",{"2":{"4":6,"13":2,"15":8,"20":4,"30":4,"34":4,"36":8,"37":4,"38":4,"42":10,"43":4,"45":2,"46":4,"84":4,"89":2,"108":2,"113":2,"157":2,"158":2,"159":2,"178":18,"179":6,"183":14,"185":6,"186":16,"188":12,"189":8,"190":8,"191":3,"192":4,"195":40,"198":4,"199":6,"203":8,"231":2,"247":2,"255":2,"260":2,"263":2,"264":2,"267":4,"279":10,"281":2,"282":2,"283":4,"284":2,"285":4,"287":4,"288":4,"289":4,"290":4,"291":4,"292":12,"293":2,"294":2,"295":4,"297":20,"301":12,"302":28,"316":6,"318":2,"319":2,"326":2,"332":10,"346":2,"347":4,"348":4,"357":2,"365":2,"378":2,"380":2,"382":2,"383":4,"384":2,"388":3,"389":2,"393":2,"396":6,"457":1,"474":8,"476":1,"478":12,"490":10,"493":6,"494":8,"495":2,"507":2,"509":2,"511":2,"512":8,"520":2,"532":5,"536":4,"539":2,"540":4,"544":4,"551":10,"571":4,"577":2,"578":84,"580":2,"585":12,"599":8,"603":10,"613":2}}],["icon",{"2":{"577":6,"610":8}}],["iconfontcpe",{"2":{"578":2}}],["iconfonthub",{"2":{"578":2}}],["iconfont",{"2":{"577":6,"578":6}}],["iconprops",{"2":{"424":8}}],["ig",{"2":{"345":2}}],["ie",{"2":{"177":2,"194":1,"418":2,"423":2}}],["i=0",{"2":{"285":2}}],["i=2",{"2":{"285":2}}],["i=",{"2":{"122":2}}],["ipad",{"2":{"489":3}}],["ipconfig",{"2":{"450":1}}],["ipsum",{"2":{"371":4}}],["ip",{"2":{"64":2,"450":1,"451":1,"452":1,"590":3}}],["iterator底层实现机制",{"2":{"506":1}}],["iterable",{"2":{"414":6,"431":2}}],["item4",{"2":{"96":2}}],["item3",{"2":{"96":2}}],["item2",{"2":{"96":2}}],["item1",{"2":{"96":2}}],["items",{"2":{"96":4,"168":10,"174":2,"474":4,"586":4,"587":4,"599":6,"603":2}}],["item变量只可以在本组件使用",{"2":{"95":2}}],["item=",{"2":{"95":2}}],["item",{"2":{"15":4,"95":10,"96":2,"108":4,"122":12,"135":2,"157":4,"168":8,"170":8,"173":2,"174":2,"243":2,"247":4,"282":8,"302":4,"316":24,"318":4,"326":8,"327":12,"385":8,"428":8,"482":6,"493":4,"494":4,"543":6,"578":20,"579":4,"599":40,"609":8}}],["it",{"2":{"55":2,"56":4,"57":2,"59":2,"349":6,"432":2,"586":2,"601":2}}],["io",{"2":{"51":2}}],["isarticledir",{"2":{"599":6}}],["isarray",{"2":{"282":2,"288":2,"295":2,"318":4,"319":2,"383":2,"527":2}}],["isobj",{"2":{"507":2}}],["isobject",{"2":{"316":4}}],["isolatedmodules",{"2":{"440":2}}],["isediting",{"2":{"610":10}}],["isexist",{"2":{"326":4}}],["isequal",{"2":{"318":16,"319":2}}],["isechocond",{"2":{"157":2}}],["isdirectory",{"2":{"599":2}}],["isdisabled均为变量",{"2":{"86":2}}],["isdisabled",{"2":{"86":2}}],["isduplicate",{"2":{"316":6}}],["ismatched",{"2":{"279":2}}],["isvalid",{"2":{"279":2}}],["isintersecting",{"2":{"250":2}}],["isrequired",{"2":{"144":6}}],["ishot",{"2":{"143":14}}],["issues",{"2":{"594":1}}],["issuccess",{"2":{"89":4}}],["isshow",{"2":{"121":14}}],["isnan",{"2":{"107":2,"519":2}}],["is",{"2":{"46":2,"55":2,"230":4,"288":2,"434":2,"519":2,"586":4}}],["islogin",{"2":{"42":4}}],["istr",{"2":{"36":8}}],["immediate=false",{"2":{"519":2}}],["immediate",{"2":{"158":2,"519":10}}],["implements",{"2":{"103":2,"104":2,"105":2,"106":2,"107":2,"108":2,"109":2,"113":4,"114":2,"116":4,"121":2,"126":2}}],["important",{"2":{"603":4,"605":2}}],["important权重最高",{"2":{"476":1}}],["importhelpers",{"2":{"440":2}}],["importscripts",{"2":{"414":2}}],["imports",{"0":{"80":1},"2":{"78":1}}],["import",{"2":{"15":4,"45":2,"59":2,"84":1,"85":1,"89":1,"90":1,"91":1,"92":1,"93":1,"95":2,"96":2,"103":3,"104":3,"105":3,"106":3,"107":1,"108":2,"109":1,"113":4,"114":1,"116":4,"119":1,"121":2,"122":1,"123":1,"125":1,"126":2,"130":2,"157":1,"433":4,"574":2,"577":1,"578":2,"602":6,"614":2}}],["img",{"2":{"86":6,"88":2,"193":1,"249":2,"250":10,"335":2,"374":6,"483":1,"551":24}}],["imgfile",{"2":{"46":2}}],["imagetocanvas",{"2":{"551":4}}],["imagetop",{"2":{"249":4}}],["image2",{"2":{"374":4}}],["image1",{"2":{"374":6}}],["imageid",{"2":{"55":2}}],["images",{"2":{"55":2,"86":2,"249":4,"250":4,"374":4}}],["image",{"2":{"13":2,"55":2,"198":2,"249":8,"250":4,"333":2,"335":2,"551":10}}],["inline",{"2":{"551":2}}],["inlinesources",{"2":{"440":2}}],["inlinesourcemap",{"2":{"440":4}}],["innerhtml",{"2":{"350":2,"577":2}}],["innerheight",{"2":{"249":2}}],["inordertraversal",{"2":{"299":8}}],["invalid",{"0":{"592":1},"1":{"593":1,"594":1},"2":{"592":1}}],["invoke",{"2":{"224":2,"227":2}}],["inventories",{"2":{"158":4}}],["inherit",{"2":{"195":4}}],["inheritattrs",{"0":{"150":1},"1":{"151":1,"152":1,"153":1},"2":{"151":2,"152":2,"153":2}}],["infinity",{"2":{"282":2,"322":2,"571":2}}],["infinite",{"2":{"179":2,"203":4}}],["info",{"2":{"90":2,"237":1}}],["in",{"0":{"277":1},"2":{"179":2,"277":1,"319":2,"385":2,"433":2,"488":1,"527":2,"599":4}}],["initevent",{"2":{"584":2}}],["initevent方法已经过时",{"2":{"584":2}}],["initchart",{"2":{"577":4}}],["initial",{"2":{"571":2}}],["initialvalue",{"2":{"378":5}}],["init",{"2":{"224":2,"227":2,"395":2,"416":1,"418":2}}],["init后才能初始化",{"0":{"219":1}}],["initsearchfromcond",{"2":{"157":2}}],["initpage",{"2":{"157":2,"158":2}}],["include处",{"2":{"491":1}}],["include和exclude",{"0":{"439":1}}],["includeduplicates",{"2":{"374":4}}],["included",{"2":{"230":2}}],["include",{"2":{"195":2,"414":6,"439":2,"440":2,"491":4}}],["includes",{"2":{"157":2,"316":6,"322":2,"323":2,"324":10,"327":2,"357":2,"381":2,"530":1,"599":2}}],["inc",{"2":{"116":8,"130":4}}],["inject",{"2":{"113":4,"554":1}}],["injector",{"2":{"113":4}}],["intl",{"2":{"414":8}}],["intersection",{"2":{"323":2,"327":4}}],["intersectionobserver",{"2":{"250":2}}],["interval",{"2":{"109":2}}],["interface",{"2":{"108":2,"113":2,"412":2,"424":8}}],["int",{"2":{"72":1}}],["into",{"2":{"36":4}}],["instanceof",{"0":{"277":1},"2":{"277":1,"282":4,"295":2,"309":4,"310":6,"311":2,"312":2,"315":4,"316":4,"318":4,"499":2,"525":2}}],["instance",{"2":{"103":8,"113":6}}],["install",{"2":{"51":4,"55":2,"70":2,"220":2,"221":2,"222":2,"570":1}}],["inspect",{"2":{"58":2,"62":4}}],["insertnode",{"2":{"300":8}}],["insertsort",{"2":{"290":2}}],["insertid",{"2":{"36":2}}],["insertmany",{"2":{"5":4}}],["insertone",{"2":{"5":2}}],["insert",{"2":{"2":2,"5":8,"300":4}}],["inputref",{"2":{"610":4}}],["input2",{"2":{"145":6}}],["input1",{"2":{"145":4}}],["inputval=",{"2":{"117":6}}],["inputval",{"2":{"117":14,"610":12}}],["input双向绑定",{"0":{"117":1}}],["input引用发生变化",{"2":{"112":1}}],["input的name属性值为imgfile和upload",{"2":{"46":2}}],["input",{"0":{"95":1},"2":{"45":2,"46":2,"94":1,"95":6,"96":4,"107":4,"108":2,"109":4,"114":4,"116":8,"117":8,"118":8,"123":8,"125":6,"126":4,"130":4,"145":8,"146":4,"483":1,"610":4}}],["index+0",{"2":{"578":2}}],["index++",{"2":{"15":2,"494":2}}],["indexeddb",{"2":{"523":1}}],["index可选",{"2":{"368":2}}],["indexof",{"2":{"316":6,"322":2,"364":4,"530":1}}],["index",{"2":{"13":1,"15":18,"21":2,"22":10,"30":2,"46":5,"78":1,"122":8,"189":4,"190":4,"301":8,"302":2,"313":2,"315":2,"316":4,"318":4,"360":4,"364":6,"368":2,"378":3,"418":4,"432":6,"433":4,"479":1,"494":6,"551":2,"578":10,"599":12,"602":1}}],["if=",{"2":{"610":4}}],["iframe",{"2":{"335":4}}],["if只会控制紧随其后的一条语句",{"2":{"259":2}}],["ifcomponent",{"2":{"121":2}}],["ifcomp",{"2":{"121":4}}],["ifcfg",{"2":{"75":2}}],["if",{"0":{"244":1},"1":{"245":1,"246":1,"247":1},"2":{"12":8,"15":6,"16":4,"18":2,"21":4,"22":10,"34":2,"35":2,"36":6,"37":8,"38":8,"42":4,"43":4,"46":2,"108":2,"113":2,"121":6,"126":8,"129":3,"137":2,"159":2,"230":2,"245":8,"246":2,"247":2,"249":2,"250":2,"259":5,"279":14,"281":4,"282":2,"283":2,"284":2,"285":2,"287":2,"288":4,"289":2,"292":6,"293":4,"295":8,"296":6,"297":8,"299":6,"300":26,"301":6,"302":12,"304":4,"305":8,"306":3,"307":4,"308":10,"309":7,"310":16,"311":14,"312":2,"313":2,"315":22,"316":12,"318":20,"319":10,"326":4,"334":2,"357":6,"365":2,"385":2,"389":4,"400":2,"432":2,"493":2,"494":6,"495":2,"512":2,"519":10,"520":6,"525":4,"527":8,"540":4,"541":4,"543":6,"544":2,"570":2,"574":4,"577":14,"578":26,"584":4,"586":2,"599":10,"610":4,"614":2}}],["i++",{"2":{"5":2,"15":2,"260":2,"279":4,"282":2,"285":4,"287":2,"288":4,"289":2,"290":2,"291":2,"292":6,"295":2,"297":2,"301":4,"302":6,"316":4,"318":2,"319":2,"326":2,"365":2,"393":2,"493":2,"494":2,"536":4,"544":2}}],["i",{"2":{"5":6,"15":12,"34":1,"56":2,"113":4,"122":4,"157":4,"210":6,"214":2,"220":2,"243":2,"260":4,"279":20,"282":10,"283":8,"285":14,"287":6,"288":18,"289":10,"290":8,"291":8,"292":20,"295":14,"297":4,"301":20,"302":22,"316":18,"318":8,"319":8,"326":8,"328":8,"345":2,"346":2,"348":2,"350":6,"365":6,"371":4,"373":4,"393":6,"400":2,"417":2,"418":8,"422":1,"493":4,"494":12,"512":6,"536":18,"544":2,"563":2,"578":12,"601":2}}],["id选择器",{"2":{"476":1}}],["identityfile",{"2":{"235":4}}],["id值不变不刷新",{"2":{"122":2}}],["id\\t",{"2":{"122":2}}],["id=",{"2":{"37":4,"38":2,"46":2,"123":8,"137":4,"139":2,"178":2,"478":2}}],["id",{"2":{"4":4,"5":2,"6":2,"7":2,"10":6,"11":6,"12":2,"35":4,"36":4,"37":6,"38":6,"108":16,"122":6,"233":1,"234":2,"235":4,"325":18,"326":16,"327":8,"328":8,"357":8,"542":10,"543":4,"544":4,"559":2,"578":4,"609":4,"610":8}}],["fcuntion",{"2":{"499":2}}],["f00",{"2":{"478":2}}],["ffcf8b",{"2":{"578":2}}],["ff00cc",{"2":{"478":1}}],["fff",{"2":{"190":2,"200":4,"577":4,"585":2}}],["ftnext",{"2":{"396":2}}],["ftype",{"2":{"357":10}}],["fdkafad",{"2":{"348":2}}],["fh",{"2":{"334":8}}],["funtion",{"2":{"520":2}}],["funcs",{"2":{"540":8}}],["funciton",{"2":{"519":2}}],["func",{"2":{"144":2,"318":6,"319":10,"519":16,"520":12,"536":4,"540":4}}],["function关键字与函数名之间有一个星号",{"2":{"524":1}}],["function",{"2":{"13":2,"16":4,"18":2,"42":2,"43":6,"137":1,"144":1,"146":1,"230":2,"239":7,"240":4,"242":2,"245":4,"246":1,"247":1,"262":2,"263":2,"264":4,"269":2,"272":1,"278":1,"279":4,"281":2,"282":10,"283":6,"284":1,"285":4,"287":1,"289":1,"290":1,"291":1,"292":5,"294":1,"295":1,"297":4,"298":3,"299":6,"300":20,"301":2,"302":6,"305":4,"308":4,"310":4,"311":4,"315":4,"318":12,"319":12,"360":2,"363":2,"368":2,"370":1,"375":2,"378":2,"388":1,"389":4,"393":2,"399":4,"412":2,"426":3,"493":2,"494":4,"495":12,"498":1,"499":2,"500":2,"503":3,"504":4,"506":1,"507":3,"519":9,"520":10,"525":11,"527":4,"528":1,"536":13,"539":12,"540":4,"541":7,"543":2,"544":4,"551":8,"574":4,"577":4,"578":12,"583":4,"584":4,"589":2,"599":8}}],["fulfilled",{"2":{"303":2,"304":2,"307":2,"308":2,"309":2,"310":2,"311":2,"315":6}}],["fufilled",{"2":{"303":4,"304":4,"305":2,"306":2,"315":2}}],["fn3",{"2":{"262":2,"264":2}}],["fn",{"2":{"243":6,"262":13,"371":4,"392":3,"393":4,"525":4,"536":8,"577":4}}],["fn2执行",{"2":{"240":2,"241":2}}],["fn2",{"2":{"240":2,"241":2,"262":7}}],["fn1执行结果",{"2":{"240":2}}],["fn1",{"2":{"240":4,"241":2,"243":4}}],["f更新远程代码",{"2":{"217":1}}],["fxzer",{"2":{"211":22,"395":2,"396":12}}],["fxj",{"2":{"55":2}}],["features",{"2":{"429":1}}],["fetch",{"2":{"205":6,"211":6,"243":8,"335":2,"396":2}}],["fext",{"2":{"17":2}}],["fb3",{"2":{"186":10}}],["flag",{"2":{"282":4,"520":8}}],["flatplus",{"2":{"282":6}}],["flat",{"2":{"282":6}}],["flatten",{"2":{"282":6}}],["fly",{"2":{"276":2}}],["floor",{"2":{"267":2,"288":2,"289":2,"291":4,"292":4,"302":2}}],["flexsearchindexoptions",{"2":{"602":4}}],["flexsearch",{"2":{"601":2,"602":2}}],["flex布局",{"2":{"474":1}}],["flex布局子元素给了高度",{"0":{"180":1}}],["flex",{"2":{"180":6,"202":6,"474":5,"482":4,"586":4,"587":4,"603":4}}],["flier",{"2":{"108":4}}],["fr",{"2":{"335":6}}],["fr片段划分",{"2":{"165":1}}],["fruit",{"2":{"123":26}}],["fromcharcode",{"2":{"530":1,"531":2}}],["from",{"2":{"4":4,"15":4,"35":2,"38":2,"45":2,"61":4,"84":2,"85":2,"89":2,"90":2,"91":2,"92":2,"93":2,"95":4,"96":4,"103":4,"104":4,"105":4,"106":4,"107":2,"108":4,"109":2,"113":6,"114":2,"116":8,"119":2,"121":6,"122":2,"123":2,"125":2,"126":4,"130":4,"157":2,"179":2,"234":2,"265":2,"322":2,"324":2,"432":3,"433":4,"574":2,"578":2,"602":6,"614":2}}],["f=",{"2":{"122":2}}],["f60",{"2":{"91":2}}],["focus",{"2":{"610":2}}],["foo",{"2":{"434":16}}],["footer",{"2":{"105":4,"201":1}}],["folded",{"2":{"195":4}}],["fontfamily",{"2":{"578":6}}],["font终端字体",{"2":{"230":1}}],["fontsize",{"2":{"577":2,"578":14}}],["fontsizepx",{"2":{"116":18}}],["fonts字体",{"2":{"225":1}}],["font",{"2":{"116":8,"190":2,"198":2,"230":1,"231":4,"577":2}}],["found",{"2":{"21":2,"22":4}}],["for循环",{"2":{"297":2}}],["fork后的仓库",{"0":{"209":1},"2":{"211":1}}],["foreach等回调函数默认指向window",{"2":{"517":1}}],["foreach",{"2":{"157":6,"243":2,"249":2,"250":4,"265":2,"293":2,"295":2,"313":2,"315":2,"493":2,"543":6,"544":2,"578":8,"579":2,"584":4,"599":6}}],["for=",{"2":{"123":8}}],["forcomponent",{"2":{"122":2}}],["form",{"2":{"15":12,"45":2,"46":6,"118":4,"431":1}}],["formdata",{"2":{"15":8,"45":12}}],["for",{"2":{"5":1,"15":2,"119":2,"122":2,"137":2,"243":4,"260":4,"263":2,"265":2,"279":4,"282":2,"283":2,"285":4,"287":4,"288":6,"289":2,"290":2,"291":4,"295":2,"297":2,"301":4,"302":8,"311":2,"315":2,"316":6,"318":4,"319":6,"326":2,"349":2,"357":2,"365":2,"392":1,"393":2,"493":2,"494":2,"527":2,"536":4,"599":4}}],["f",{"2":{"18":2,"55":3,"56":4,"122":4,"285":10,"395":2,"400":10,"426":8,"586":14,"587":10}}],["fpath",{"2":{"17":2,"22":18}}],["fs",{"2":{"16":8,"18":8,"22":12,"46":8,"599":16}}],["fangda",{"2":{"577":2}}],["fanxj",{"2":{"55":6}}],["fallthrough",{"2":{"440":2}}],["falsy",{"2":{"255":2}}],["false\\t",{"2":{"610":2}}],["false\\t\\t",{"2":{"255":2,"256":2}}],["false==",{"2":{"257":1}}],["false",{"2":{"13":2,"30":2,"42":4,"43":2,"108":10,"121":4,"126":8,"134":1,"143":2,"150":2,"157":6,"158":2,"159":2,"231":2,"251":2,"255":2,"257":3,"279":14,"300":4,"302":2,"316":2,"318":15,"331":2,"341":4,"342":4,"346":2,"348":2,"359":1,"365":4,"374":4,"396":2,"414":2,"418":2,"426":1,"427":1,"428":1,"434":1,"435":1,"436":1,"437":1,"440":2,"509":1,"512":11,"519":2,"520":2,"551":6,"577":8,"584":2,"585":2,"589":2,"599":4,"609":2,"610":12}}],["fat",{"2":{"347":12}}],["fatal",{"2":{"234":2}}],["face",{"2":{"231":2}}],["factorial",{"2":{"281":4}}],["factory",{"2":{"113":4}}],["factor",{"2":{"107":6}}],["family",{"2":{"198":2}}],["fasle",{"2":{"152":2,"153":2}}],["failupdate",{"2":{"610":2}}],["failed",{"2":{"551":2}}],["fail",{"2":{"42":2,"239":2}}],["favoritescount",{"2":{"13":2}}],["favorited",{"2":{"12":2}}],["fittingstring",{"2":{"578":2}}],["fitviewpadding",{"2":{"577":2}}],["fitview",{"2":{"577":2}}],["fitscreen24",{"2":{"577":2}}],["fibonacci",{"2":{"281":7,"285":10}}],["fin",{"2":{"468":1}}],["finally",{"2":{"239":2,"493":2,"494":2}}],["findmediansortedarrays",{"2":{"292":4}}],["findindex",{"2":{"15":2,"326":4,"327":2}}],["findbyid",{"2":{"12":2}}],["findbyidandupdate",{"2":{"11":2}}],["findbyidandremove",{"2":{"10":2}}],["findone",{"2":{"4":4,"12":2}}],["find",{"2":{"4":36,"12":4,"247":2,"428":4,"434":2}}],["fireevent",{"2":{"584":2}}],["firefox",{"2":{"177":4,"194":1}}],["firstname",{"2":{"412":4}}],["first",{"2":{"122":8,"197":1}}],["firsttpl模板引用赋值给elseblocks变量",{"2":{"121":2}}],["firsttpl",{"2":{"121":4}}],["fixed",{"2":{"113":2,"482":1,"605":2}}],["fieldcount",{"2":{"36":2}}],["fill=",{"2":{"178":4,"478":2}}],["fill",{"2":{"165":1,"301":2,"577":4,"578":26}}],["filehandle",{"2":{"333":4,"334":10}}],["filepicker",{"0":{"333":1},"2":{"334":1}}],["filearraybuffer",{"2":{"330":6,"331":2}}],["filesteam",{"2":{"334":12}}],["files",{"0":{"439":1},"2":{"45":2,"231":2,"414":2,"440":2}}],["filereader",{"0":{"331":1},"2":{"15":2,"331":8,"333":8,"335":4,"336":1}}],["filename就是上传文件的文件名",{"2":{"46":2}}],["filename",{"2":{"15":2,"45":4,"46":10,"418":2}}],["file",{"0":{"329":1,"592":1},"1":{"593":1,"594":1},"2":{"15":34,"45":2,"46":14,"230":2,"234":1,"329":4,"330":6,"331":2,"333":6,"334":4,"335":2,"336":2,"357":6,"592":2}}],["filters",{"2":{"554":1}}],["filterarr",{"2":{"364":4}}],["filter",{"2":{"12":10,"108":2,"193":2,"316":2,"322":4,"323":2,"324":8,"327":2,"328":4,"360":2,"362":2,"363":2,"364":4,"365":2,"479":2,"599":6}}],["square",{"2":{"490":2}}],["sqrt",{"2":{"365":2}}],["sm",{"2":{"424":18,"489":1}}],["sdfj",{"2":{"400":2}}],["sync",{"2":{"396":5}}],["symbol无法转换为数宇",{"2":{"509":1}}],["symbol应用",{"2":{"506":1}}],["symbol",{"2":{"261":4,"265":2,"318":4,"414":10,"506":1,"509":1,"512":5,"539":2}}],["systype",{"2":{"577":2}}],["system32",{"2":{"450":1}}],["systemjs等",{"2":{"430":1}}],["system",{"2":{"54":2,"414":2,"430":1,"440":2}}],["systemctl",{"2":{"51":2,"72":2,"75":2}}],["sys",{"2":{"440":2}}],["sysconfig",{"2":{"75":2}}],["ssh公钥私钥加密解密原理",{"0":{"236":1}}],["ssh",{"2":{"234":8,"235":8,"396":2}}],["skewx",{"2":{"189":2}}],["skip",{"2":{"4":2,"12":4}}],["svg也具有更好的可访问性和seo性能",{"2":{"484":1}}],["svg",{"2":{"178":5,"478":5}}],["sat",{"2":{"347":6}}],["saturate",{"2":{"193":2}}],["sayhello",{"2":{"269":4,"270":2,"271":6,"272":6,"404":2,"406":6}}],["safari",{"2":{"177":2}}],["sass",{"0":{"491":1},"2":{"149":1,"548":1}}],["saveformdata",{"2":{"146":8}}],["saveinput",{"2":{"145":4}}],["saveuninitialized",{"2":{"42":2}}],["save",{"2":{"9":2}}],["switchtoedit",{"2":{"610":2}}],["switchcomponent",{"2":{"123":2}}],["switch",{"2":{"123":2,"137":2,"259":2,"440":4}}],["sbindcomponent",{"2":{"116":4}}],["sbind",{"2":{"116":24,"130":4}}],["soucemaps",{"2":{"440":2}}],["sougou",{"2":{"346":4}}],["sourceroot",{"2":{"440":2}}],["sourcemaps",{"2":{"440":4}}],["sourcemap",{"2":{"440":4}}],["source",{"2":{"231":2,"396":2,"440":2}}],["some",{"2":{"282":4,"328":2}}],["someasyncopt",{"2":{"243":10}}],["somecondition",{"2":{"129":2}}],["solid",{"2":{"91":4,"92":6,"98":2,"185":2,"190":4,"457":1,"482":4,"603":2}}],["sortby=",{"2":{"389":2}}],["sortby\\t可选",{"2":{"388":2}}],["sortby",{"2":{"12":4,"388":2,"389":2}}],["sort",{"0":{"386":1},"1":{"387":1,"388":1,"389":1},"2":{"4":2,"12":2,"387":1,"388":4,"389":4,"578":4}}],["sl",{"2":{"66":2}}],["slicepipe",{"2":{"132":1}}],["slice",{"0":{"532":1},"2":{"15":12,"108":2,"283":2,"292":4,"302":4,"527":4,"530":1,"532":12,"599":2,"614":2}}],["src属性多了个",{"0":{"593":1}}],["srclist",{"2":{"374":6}}],["src赋值给src",{"2":{"249":1}}],["src=",{"2":{"86":4,"88":2,"139":6,"303":2,"335":4,"551":6}}],["src",{"2":{"61":2,"86":2,"249":8,"250":8,"374":2,"414":4,"418":4,"432":20,"433":9,"439":2,"440":2,"551":2,"571":2}}],["s",{"2":{"56":2,"73":2,"95":2,"96":2,"121":8,"210":1,"302":4,"307":2,"344":4,"346":8,"347":8,"349":4,"586":6,"587":4}}],["sitemap",{"2":{"590":3}}],["sitemap插件使用问题",{"0":{"590":1}}],["simple",{"0":{"590":1}}],["simplechanges",{"2":{"109":4,"126":4}}],["sidebarpath",{"2":{"599":6}}],["sidebarlist",{"2":{"599":10}}],["sidebarstr",{"2":{"599":4}}],["sidebars",{"2":{"599":6}}],["sidebarobj",{"2":{"599":14}}],["sidebar",{"2":{"584":2,"599":24}}],["sizing改变其计算方式",{"2":{"475":1}}],["sizing",{"2":{"475":2}}],["sizes",{"2":{"156":2}}],["sizer",{"2":{"130":4}}],["sizechange",{"2":{"116":6,"158":2}}],["size+1",{"2":{"116":4}}],["size=16",{"2":{"116":4}}],["size",{"2":{"15":10,"116":24,"130":10,"157":10,"158":4,"186":6,"190":2,"198":2,"199":2,"265":2,"266":2,"296":2,"357":8,"424":32,"577":2,"578":14}}],["sin",{"2":{"195":2}}],["single",{"2":{"46":4,"571":2,"578":2,"610":2}}],["sign",{"2":{"43":4}}],["signature",{"2":{"43":2}}],["steparg",{"2":{"525":10}}],["step",{"2":{"525":4}}],["steps",{"2":{"203":2,"396":2}}],["studio",{"2":{"440":2}}],["stdout",{"2":{"298":2}}],["strokeopacity",{"2":{"578":12}}],["stroke",{"2":{"577":4,"578":10}}],["strarray",{"2":{"393":2}}],["strarray=",{"2":{"393":2}}],["strawberry",{"2":{"364":6}}],["street",{"2":{"318":6,"319":10}}],["stretch",{"2":{"174":4}}],["str",{"2":{"279":22,"283":18,"302":16,"341":4,"371":6,"372":4,"393":4,"578":10}}],["str4",{"2":{"279":2}}],["str3",{"2":{"279":2}}],["str2",{"2":{"279":2}}],["str1",{"2":{"279":2}}],["strictfunctiontypes",{"2":{"440":2}}],["strictfunctiontypes和",{"2":{"434":1}}],["strict相当于启用",{"2":{"434":1}}],["strictpropertyinitialization",{"0":{"427":1},"2":{"434":1}}],["strict",{"2":{"414":4,"419":2,"427":1,"440":4}}],["strictnullchecks或启用",{"2":{"427":1}}],["strictnullchecks",{"0":{"434":1},"2":{"134":1,"414":2,"434":1,"440":2}}],["strictnullchecks后",{"2":{"134":1}}],["string类型",{"2":{"432":1}}],["string\\t",{"2":{"401":2}}],["stringify",{"2":{"157":2,"527":2,"599":2}}],["string",{"2":{"13":20,"15":6,"95":4,"96":8,"108":6,"113":4,"125":8,"130":2,"144":12,"261":2,"318":2,"335":6,"399":16,"400":18,"402":2,"404":4,"405":8,"406":18,"407":6,"409":4,"410":4,"412":6,"414":6,"424":14,"426":2,"427":2,"431":1,"434":2,"506":2,"510":1,"531":2,"551":2,"610":8}}],["stylus",{"2":{"488":1}}],["stylus等语法转换",{"2":{"149":1}}],["style=",{"2":{"347":8,"551":4,"577":6,"610":2}}],["style3",{"2":{"92":10}}],["style2",{"2":{"92":10}}],["style1",{"2":{"92":10}}],["styleurls",{"2":{"85":4,"103":2,"104":2,"105":2,"106":2,"109":2,"113":2,"114":2,"116":8}}],["stylesheets",{"2":{"457":2}}],["styles",{"2":{"84":2,"89":2,"90":2,"91":2,"92":2,"93":2,"113":2,"602":1}}],["style",{"2":{"15":4,"91":10,"92":6,"116":8,"125":2,"177":2,"458":1,"491":14,"574":4,"577":14,"578":28,"580":2}}],["star1",{"2":{"499":6}}],["star",{"2":{"499":6}}],["startpoint",{"2":{"578":6}}],["start来启动开发服务器",{"2":{"421":1}}],["startdate",{"2":{"294":10}}],["startuptype",{"2":{"234":3}}],["startingdirectory",{"2":{"231":2}}],["start",{"2":{"51":2,"56":2,"72":1,"158":2,"168":4,"172":6,"173":6,"174":4,"234":3,"294":4,"420":2,"499":2,"520":6,"586":2,"587":2,"603":2}}],["startswith",{"2":{"46":2,"302":2,"530":1,"599":2}}],["stack",{"2":{"279":18,"543":10}}],["stash",{"2":{"212":4}}],["standalone",{"2":{"118":4}}],["standalone设为true",{"2":{"118":1}}],["statsync",{"2":{"599":2}}],["state已更新",{"2":{"147":1}}],["state",{"0":{"143":1},"2":{"141":1,"143":4,"156":2}}],["statement3",{"2":{"129":2}}],["statement2",{"2":{"129":2}}],["statement1",{"2":{"129":2}}],["static",{"2":{"42":2,"103":6,"105":4,"106":2,"121":2,"144":2,"269":2,"303":6,"304":6,"312":4,"313":1,"314":2,"315":14,"406":1,"408":4,"479":1}}],["status",{"2":{"30":4,"42":10,"43":10,"72":1,"158":4,"303":6,"304":10,"305":4,"306":4,"307":8,"308":6,"309":4,"310":6,"311":6,"315":16}}],["storeid",{"2":{"506":1}}],["store",{"0":{"156":1},"2":{"156":2,"222":1}}],["storage",{"2":{"46":2}}],["stopimmediatepropagation",{"2":{"528":1}}],["stoppropagation",{"2":{"528":1}}],["stopsignal",{"2":{"61":2}}],["stop",{"2":{"56":2,"72":1,"478":8}}],["stock",{"2":{"22":8}}],["spec",{"2":{"439":2,"440":2}}],["specifies",{"2":{"432":2}}],["specified",{"2":{"420":2}}],["speak",{"2":{"245":6,"246":2,"247":2}}],["spelling",{"2":{"230":2}}],["space",{"2":{"167":8,"176":2,"197":2,"611":2}}],["span",{"2":{"113":4,"137":4,"172":4,"347":20,"610":16}}],["spark",{"2":{"15":8}}],["sparkmd5",{"2":{"15":4}}],["splitpath",{"2":{"599":8}}],["splitchunks",{"2":{"571":2}}],["split",{"2":{"46":2,"283":2,"302":8,"357":4,"371":2,"530":1,"578":4,"599":2}}],["splice",{"2":{"15":2,"289":2,"319":2}}],["suoxiao",{"2":{"577":2}}],["super",{"2":{"271":2,"405":2,"406":6}}],["sure",{"2":{"234":2,"586":2}}],["such",{"2":{"234":1}}],["successfully",{"2":{"235":1}}],["success",{"2":{"30":4,"42":2,"89":4,"90":2,"158":6,"159":6,"239":2,"574":4,"610":2}}],["succ",{"2":{"10":2,"11":2,"12":4}}],["sum2",{"2":{"264":2}}],["sum",{"2":{"84":2,"146":2,"263":2,"378":2,"380":6,"384":4,"408":4,"539":6}}],["sudo",{"2":{"51":2}}],["subject",{"2":{"384":6}}],["substr",{"2":{"530":1,"578":2}}],["substring区别",{"0":{"532":1}}],["substring",{"2":{"15":2,"530":1,"532":12}}],["subscribe",{"2":{"104":2,"113":2}}],["submit",{"2":{"46":2,"111":1,"112":1}}],["score",{"2":{"384":8}}],["scoped",{"2":{"15":2,"488":1}}],["sc=han",{"2":{"345":2}}],["scrollhandler",{"2":{"615":2}}],["scrollheight",{"2":{"577":2,"614":6}}],["scrollleft",{"2":{"615":4}}],["scrolltop",{"2":{"614":2}}],["scrollwidth",{"2":{"577":2}}],["scroll",{"2":{"249":2,"577":2,"614":2}}],["scrollbar",{"2":{"177":12}}],["scripthost等",{"2":{"431":1}}],["scripthost",{"2":{"414":2,"431":2}}],["scripts",{"2":{"75":2,"420":2,"563":1,"564":1,"573":2}}],["script",{"2":{"15":4,"45":4,"139":16,"150":1,"151":8,"152":8,"153":8,"220":2,"230":2,"303":8,"456":1,"610":4,"614":4}}],["scss",{"2":{"15":2,"85":2,"113":2,"488":1,"491":1,"583":1}}],["schema",{"2":{"13":10,"224":4,"227":2}}],["serve",{"2":{"420":2,"563":1,"573":4}}],["serverstatus",{"2":{"36":2}}],["server",{"2":{"20":6,"21":6,"22":12,"30":2,"42":2,"43":2,"46":2,"211":12,"417":2,"418":2,"573":2}}],["service",{"0":{"496":1},"2":{"234":6,"563":6,"573":6}}],["sepia",{"2":{"193":2}}],["self",{"2":{"174":14,"364":4,"495":3,"578":4}}],["selectnode",{"2":{"574":2}}],["selectsort",{"2":{"288":2}}],["selected",{"2":{"123":2}}],["select=",{"2":{"102":6}}],["selector",{"2":{"84":2,"85":2,"89":2,"90":2,"91":2,"92":2,"93":2,"95":4,"96":4,"103":2,"104":2,"105":2,"106":2,"108":2,"109":2,"113":4,"114":2,"116":8,"119":2,"121":6,"122":2,"123":2,"125":2,"126":4,"130":4}}],["select",{"2":{"4":4,"13":2,"34":2,"35":2,"357":2,"483":1,"574":2}}],["section",{"2":{"102":6,"126":4,"605":2}}],["secondary",{"2":{"89":4,"491":8}}],["secrets",{"2":{"396":10}}],["secretkey",{"2":{"43":8}}],["secret",{"2":{"42":2,"43":4}}],["searchdone",{"2":{"612":6}}],["searchplugin",{"2":{"602":4}}],["searchnode",{"2":{"300":8}}],["searchconds",{"2":{"157":6,"158":2}}],["search",{"2":{"55":4,"158":2,"300":4,"601":2,"602":2}}],["sessionstorage",{"2":{"472":1,"522":1,"523":9}}],["session配置后才有",{"2":{"42":2}}],["session",{"0":{"42":1},"2":{"42":26}}],["setitem",{"2":{"523":4}}],["setinterval是异步",{"2":{"526":1}}],["setinterval",{"2":{"111":1,"314":4,"477":1}}],["setuint8",{"2":{"332":2}}],["setup",{"2":{"15":2,"45":2,"151":2,"152":2,"153":2,"396":5,"614":2}}],["setmonth",{"2":{"294":2}}],["setname",{"2":{"270":4}}],["setting",{"2":{"433":6}}],["settings",{"2":{"396":4}}],["settimeout",{"2":{"111":1,"146":1,"238":7,"240":2,"293":2,"295":2,"306":4,"307":6,"308":4,"309":4,"310":4,"311":4,"315":8,"493":4,"494":2,"519":4,"520":4,"525":4,"526":2,"577":2,"584":4}}],["setter方法",{"2":{"270":2}}],["setter方法操作属性带来的好处",{"2":{"270":1}}],["setattribute",{"2":{"249":2,"250":2}}],["setsate",{"2":{"147":4}}],["setstate",{"2":{"143":2,"146":4,"578":2}}],["setval",{"2":{"118":2}}],["setoptions",{"2":{"113":4}}],["setheader",{"2":{"20":2,"21":2,"22":4}}],["set",{"0":{"266":1},"2":{"13":2,"36":2,"37":4,"38":2,"211":5,"220":2,"265":2,"266":8,"270":4,"296":4,"316":4,"322":8,"323":2,"324":10,"374":2,"395":2,"407":2,"431":1,"536":4,"584":2,"590":4}}],["send",{"2":{"9":2,"28":2,"29":8,"30":4,"42":10,"43":10,"46":2}}],["sex=",{"2":{"144":6}}],["sex默认值为男",{"2":{"144":2}}],["sex",{"2":{"4":12,"5":4,"144":14}}],["shift",{"2":{"493":2,"512":2,"543":2,"544":4}}],["shine",{"2":{"179":6}}],["shenzhen",{"2":{"318":6,"319":10}}],["shellsort",{"2":{"291":2}}],["shellshow",{"2":{"2":1}}],["shell配置文件",{"2":{"228":1}}],["shell启动时执行的脚本",{"2":{"227":1}}],["shell选择自己安装的字体",{"2":{"225":1}}],["shell",{"2":{"61":2,"224":2,"227":2,"235":1}}],["shellfor",{"2":{"5":1}}],["shelldb",{"2":{"4":12,"5":2,"6":1,"7":1}}],["shelluse",{"2":{"1":1}}],["shouldend",{"2":{"577":2}}],["should",{"2":{"295":2}}],["shortcuts",{"2":{"586":2,"587":2}}],["short",{"2":{"268":2}}],["showdirectorypicker",{"2":{"357":2}}],["showdatacomponent",{"2":{"113":2}}],["showsavefilepicker",{"2":{"334":2}}],["showopenfilepicker",{"2":{"333":2,"334":2}}],["showunless",{"2":{"126":14}}],["showalert",{"2":{"113":2}}],["show",{"2":{"1":2,"113":6,"126":2,"610":2}}],["shape",{"2":{"578":44}}],["shapestyle",{"2":{"578":8}}],["sharedmemory",{"2":{"414":4}}],["sha",{"2":{"210":2}}],["shadow",{"2":{"102":6,"183":2,"185":2,"191":1,"192":2,"195":4,"199":2,"200":4}}],["shadowdom",{"2":{"101":1}}],["sh",{"2":{"61":2,"395":3}}],["shshow",{"2":{"1":1}}],["查找强联通分量",{"2":{"547":1}}],["查找拓扑排序",{"2":{"547":1}}],["查找图的最小生成树",{"2":{"546":1}}],["查找连通块",{"2":{"546":1,"547":1}}],["查找最短路径",{"2":{"546":1}}],["查",{"2":{"530":1}}],["查询某些属性或调用某些方法",{"2":{"465":1}}],["查询结果",{"2":{"35":2}}],["查询语句",{"2":{"35":2}}],["查询数据",{"0":{"35":1},"2":{"577":2}}],["查询名字中含有",{"2":{"4":2}}],["查询条件中使用查询操作符",{"2":{"4":1}}],["查询符合条件的第一个",{"2":{"4":2}}],["查询第一个",{"2":{"4":2}}],["查询所有",{"2":{"4":4}}],["查询",{"0":{"4":1,"12":1},"2":{"4":2}}],["查看私钥列表",{"2":{"234":1}}],["查看生成的公钥",{"2":{"233":1}}],["查看生成的文件",{"2":{"232":1}}],["查看nginx进程",{"2":{"72":1}}],["查看nginx运行状态",{"2":{"72":1}}],["查看nginx版本等信息",{"2":{"72":1}}],["查看网卡",{"2":{"75":2}}],["查看网卡信息",{"2":{"62":2}}],["查看网络源数据",{"2":{"62":2}}],["查看网络",{"2":{"62":2}}],["查看容器内部细节",{"2":{"58":1}}],["查看容器内部细节docker",{"2":{"58":1}}],["查看容器日志",{"0":{"58":1},"2":{"58":2}}],["查看数据库集合\\tshow",{"2":{"2":2}}],["查看所在数据库",{"2":{"1":2}}],["查看所有数据库",{"2":{"1":1}}],["1f12aa",{"2":{"348":2}}],["1fr",{"2":{"165":2}}],["1=1",{"2":{"296":6}}],["1+1",{"2":{"290":1}}],["137",{"2":{"578":2}}],["138",{"2":{"578":4}}],["133",{"2":{"578":6}}],["132",{"2":{"578":2}}],["131",{"2":{"493":2}}],["13121a",{"2":{"178":2}}],["13",{"0":{"438":1},"2":{"285":2,"318":6,"319":8,"331":2,"578":2}}],["17",{"2":{"194":1}}],["17+",{"2":{"147":1}}],["1em",{"2":{"185":2,"195":4,"201":2}}],["1536px",{"2":{"489":2}}],["15em",{"2":{"199":2}}],["155",{"2":{"190":6}}],["15px",{"2":{"183":4,"186":2}}],["1500",{"2":{"578":4}}],["150",{"2":{"179":2,"578":2}}],["15",{"2":{"179":2,"195":2,"297":8,"331":2}}],["168",{"2":{"589":4}}],["169",{"2":{"578":2}}],["1677728421211",{"2":{"533":1}}],["1677728421211number",{"2":{"533":1}}],["1678519417983",{"2":{"316":2}}],["16",{"2":{"116":4,"130":2,"147":1,"370":2,"490":2,"526":1}}],["111",{"2":{"385":8}}],["110deg",{"2":{"481":4}}],["110",{"2":{"362":2,"578":2}}],["11",{"0":{"94":1,"261":1,"436":1},"2":{"319":2,"333":2,"365":2,"418":2,"423":2,"532":8,"533":2,"540":2,"578":2}}],["1px",{"2":{"91":4,"92":6,"168":2,"170":2,"199":2,"200":24,"482":4,"603":2}}],["142",{"2":{"578":2}}],["143",{"2":{"494":2,"578":2}}],["141",{"2":{"494":2}}],["1415926",{"2":{"408":2}}],["14",{"0":{"439":1},"2":{"66":2,"331":2}}],["1agt",{"2":{"55":1}}],["120",{"2":{"584":4}}],["12020",{"2":{"342":2}}],["12px",{"2":{"509":2,"603":2}}],["1280px",{"2":{"489":2}}],["12\\t",{"2":{"255":2}}],["123function",{"2":{"524":1}}],["123+",{"2":{"253":1}}],["123",{"2":{"253":7,"255":2,"373":4,"399":2,"408":2,"434":2,"524":5,"527":2}}],["123456",{"2":{"341":2}}],["12345",{"2":{"150":2}}],["127",{"2":{"20":2,"30":2,"34":2,"42":2,"43":2}}],["12",{"0":{"437":1},"2":{"18":2,"256":2,"302":2,"509":2,"577":2,"578":2}}],["1080",{"2":{"583":2}}],["109",{"2":{"578":2}}],["105",{"2":{"578":2}}],["1058",{"2":{"234":1}}],["102",{"2":{"578":4}}],["10240",{"2":{"613":2}}],["1024px",{"2":{"489":2}}],["1024代表",{"2":{"489":1}}],["1024",{"2":{"15":8,"402":2}}],["10function",{"2":{"536":1}}],["1010",{"2":{"533":2}}],["10let",{"2":{"510":1}}],["10const",{"2":{"380":1}}],["10个",{"2":{"347":2}}],["10a",{"2":{"251":1}}],["10+",{"2":{"177":2}}],["10px",{"2":{"113":4,"168":2,"170":2,"183":2,"184":4,"189":2,"482":2,"491":10,"603":2}}],["10",{"0":{"93":1,"260":1,"278":1,"350":1,"435":1},"1":{"351":1,"352":1,"353":1},"2":{"156":2,"157":4,"159":2,"251":13,"252":6,"256":2,"260":2,"262":2,"268":2,"302":4,"347":4,"348":2,"380":3,"384":2,"389":8,"393":2,"476":1,"495":2,"510":7,"533":6,"536":3,"540":10,"551":2,"577":4,"578":14,"585":4}}],["100vw",{"2":{"583":2}}],["100vh",{"2":{"202":2,"583":2}}],["1000ms",{"2":{"526":1}}],["1000",{"2":{"314":2,"476":1,"493":2,"494":2,"525":4,"578":2}}],["1000100001",{"2":{"302":2}}],["100000",{"2":{"288":2}}],["10000",{"2":{"288":2,"578":2}}],["1000px",{"2":{"201":2}}],["100px",{"2":{"15":4,"165":6,"168":4,"170":4,"190":18,"195":4,"482":4}}],["100",{"0":{"362":1},"2":{"15":2,"178":6,"180":2,"184":4,"186":6,"188":8,"195":2,"199":2,"203":2,"307":2,"362":2,"476":1,"478":12,"490":4,"493":2,"494":2,"536":2,"551":4,"577":2,"578":2,"602":2,"603":2,"614":4,"615":2}}],["192",{"2":{"589":4}}],["1920",{"2":{"583":2}}],["195",{"2":{"578":2}}],["19\\t",{"2":{"401":2}}],["190",{"2":{"362":2,"578":2}}],["199",{"2":{"190":6,"578":2}}],["19",{"2":{"5":4,"35":2,"144":2,"332":2}}],["186px",{"2":{"611":2}}],["186",{"2":{"578":2}}],["1890ff",{"2":{"578":2}}],["18px",{"2":{"577":2}}],["18const",{"2":{"540":1}}],["18deg",{"2":{"481":4}}],["18db",{"2":{"4":1}}],["184",{"2":{"198":2}}],["180deg",{"2":{"195":2}}],["18",{"2":{"4":3,"5":4,"6":2,"7":6,"25":2,"29":4,"30":2,"144":8,"265":4,"318":6,"319":10,"399":2,"400":2,"406":6,"498":6,"502":2,"540":1,"578":2}}],["1",{"0":{"4":1,"9":1,"20":1,"24":1,"28":1,"31":1,"34":1,"40":1,"54":1,"66":1,"70":1,"84":1,"116":1,"227":1,"232":1,"251":1,"340":1,"416":1,"426":1},"2":{"4":14,"12":2,"15":6,"16":2,"20":2,"30":6,"34":8,"35":2,"36":4,"38":2,"42":6,"43":2,"46":2,"55":7,"61":4,"80":1,"84":4,"92":1,"103":2,"107":2,"108":2,"116":4,"125":2,"137":7,"139":2,"140":1,"143":2,"145":4,"146":1,"147":25,"157":8,"158":2,"159":12,"172":14,"178":4,"180":2,"189":4,"190":4,"193":2,"195":8,"198":2,"199":2,"202":2,"203":2,"213":4,"239":10,"243":9,"247":2,"255":10,"260":2,"267":4,"268":4,"270":2,"279":3,"281":8,"283":4,"285":10,"287":4,"288":2,"289":4,"290":8,"291":2,"292":4,"294":2,"295":4,"296":20,"297":2,"298":2,"299":10,"301":10,"302":18,"303":2,"304":2,"315":2,"316":18,"318":6,"319":22,"321":2,"322":6,"324":6,"326":4,"327":2,"329":4,"330":4,"346":10,"349":4,"357":4,"363":4,"364":10,"365":6,"370":4,"372":4,"373":4,"378":1,"380":4,"381":6,"382":4,"383":4,"385":16,"389":12,"393":2,"399":6,"402":4,"420":2,"422":1,"424":2,"432":4,"434":4,"440":2,"448":1,"468":1,"476":1,"482":5,"495":6,"509":1,"512":4,"539":8,"540":4,"542":14,"564":2,"571":2,"577":4,"578":18,"585":14,"588":1,"599":8,"602":1,"614":6}}],["四次挥手",{"0":{"468":1}}],["四位一组",{"2":{"302":2}}],["四分之一椭圆",{"2":{"188":1}}],["四分之一椭圆border",{"2":{"188":1}}],["四",{"0":{"3":1,"23":1,"50":1,"306":1,"409":1,"454":1,"459":1},"1":{"4":1,"5":1,"6":1,"7":1,"24":1,"25":1,"410":1},"2":{"302":6}}],["李四",{"2":{"2":2,"5":4,"35":2,"122":2}}],["crawllinks",{"2":{"590":2}}],["credentials",{"2":{"396":2}}],["createrange",{"2":{"574":2}}],["createref调用后可以返回一个容器",{"2":{"145":2}}],["createref形式",{"2":{"145":4}}],["createref",{"2":{"145":2}}],["created",{"0":{"557":1,"558":1},"2":{"555":2,"556":6,"559":2}}],["createtask",{"2":{"493":4,"494":4}}],["createeventobject",{"2":{"584":2}}],["createevent",{"2":{"584":4}}],["createelement",{"2":{"375":6,"574":2,"577":2}}],["createembeddedview",{"2":{"126":2}}],["createobjecturl",{"2":{"335":4}}],["createwritable",{"2":{"334":4}}],["create",{"2":{"62":2,"113":2,"552":1}}],["createpool",{"2":{"34":2}}],["createserver",{"2":{"20":2,"21":2,"22":4}}],["createfilechunk",{"2":{"15":4}}],["createat",{"2":{"13":2}}],["createcollection",{"2":{"2":2}}],["creeateat",{"2":{"12":2}}],["c`",{"2":{"586":4}}],["c396ed",{"2":{"578":4}}],["cfg",{"2":{"578":62,"580":2}}],["cfr",{"2":{"113":4}}],["c为2",{"2":{"399":2}}],["cicle",{"2":{"578":2}}],["circular",{"2":{"577":2}}],["circle",{"2":{"178":4,"578":12,"610":4}}],["city",{"2":{"318":6,"319":10}}],["cycle",{"2":{"311":2,"315":2}}],["cy=",{"2":{"178":2}}],["cstr",{"2":{"302":12}}],["css下重新覆盖样式",{"2":{"602":1}}],["css3",{"2":{"478":1}}],["css基础面试题",{"0":{"473":1},"1":{"474":1,"475":1,"476":1,"477":1,"478":1,"479":1,"480":1,"481":1,"482":1,"483":1,"484":1,"485":1,"486":1,"487":1,"488":1,"489":1}}],["cssom",{"2":{"455":2,"456":2}}],["cssfooter",{"2":{"201":1}}],["csstext",{"2":{"200":1}}],["cssdd+dt",{"2":{"197":1}}],["csshyphens",{"2":{"197":1}}],["csshtml",{"2":{"177":1}}],["cssimg",{"2":{"193":1}}],["cssbody",{"2":{"202":1}}],["cssborder",{"2":{"188":1}}],["cssbox",{"2":{"183":1,"192":1,"195":1}}],["cssbackground",{"2":{"184":1,"185":1}}],["csssvg",{"2":{"178":1}}],["css常用代码段",{"0":{"175":1},"1":{"176":1,"177":1,"178":1,"179":1,"180":1}}],["css",{"0":{"181":1,"457":1,"476":1,"567":1},"1":{"182":1,"183":1,"184":1,"185":1,"186":1,"187":1,"188":1,"189":1,"190":1,"191":1,"192":1,"193":1,"194":1,"195":1,"196":1,"197":1,"198":1,"199":1,"200":1,"201":1,"202":1,"203":1},"2":{"98":1,"99":2,"103":2,"104":2,"105":2,"106":2,"109":2,"114":2,"116":8,"161":1,"164":1,"166":1,"167":2,"168":1,"170":1,"172":1,"173":2,"174":1,"176":2,"179":1,"180":1,"181":1,"186":1,"189":1,"190":1,"195":1,"198":1,"199":1,"203":1,"444":1,"445":1,"449":1,"455":1,"456":4,"474":5,"477":1,"481":1,"482":1,"483":1,"488":2,"489":1,"490":2,"491":1,"548":1,"586":2,"603":1,"605":1,"611":1}}],["cjs",{"2":{"220":2,"357":4}}],["czrc",{"2":{"221":1}}],["cz",{"0":{"221":1},"2":{"218":2,"221":5}}],["cx=",{"2":{"178":2}}],["ccc",{"2":{"98":2,"183":2,"186":8,"195":2,"482":4}}],["cloud",{"2":{"578":4}}],["cloudcombo",{"2":{"578":4}}],["close=",{"2":{"609":2}}],["closed",{"2":{"113":6}}],["close",{"2":{"113":4,"334":4,"584":2,"609":4,"610":2}}],["cleanwebpackplugin",{"2":{"418":4}}],["clean",{"2":{"417":2,"418":4}}],["cleartimeout",{"2":{"519":6,"577":2}}],["clear",{"2":{"126":2,"265":2,"523":4,"577":2}}],["clamp",{"2":{"176":2}}],["classic模块解析方式",{"2":{"432":2}}],["classic",{"2":{"432":2,"440":2}}],["class库的同学",{"2":{"427":1}}],["class同时需要设置strictfunctiontypes选项为false",{"2":{"426":1}}],["class等库",{"2":{"426":1}}],["class=",{"2":{"89":12,"102":2,"104":6,"105":6,"106":2,"113":4,"123":4,"151":2,"152":2,"153":2,"168":8,"170":8,"357":2,"482":8,"577":6,"586":6,"587":4,"610":10,"614":2}}],["class",{"0":{"411":1},"2":{"84":2,"85":2,"89":14,"90":8,"91":2,"92":2,"93":2,"95":4,"96":4,"103":2,"104":2,"105":2,"106":2,"107":2,"108":4,"109":2,"113":6,"114":2,"116":8,"119":2,"121":6,"122":6,"123":2,"125":2,"126":6,"130":4,"140":2,"143":2,"144":2,"145":1,"269":2,"270":2,"271":4,"293":2,"296":2,"298":2,"299":2,"303":1,"304":1,"315":1,"404":3,"405":4,"406":6,"407":1,"408":1,"409":3,"410":3,"411":4,"426":3,"427":2,"493":2,"502":3,"586":4}}],["clientwidth",{"2":{"615":4}}],["cli3",{"2":{"432":1}}],["cli3的typescript模板",{"2":{"429":1}}],["cli与",{"0":{"220":1}}],["click=",{"2":{"357":2,"610":6}}],["click",{"2":{"86":2,"93":6,"96":2,"108":2,"111":1,"112":1,"113":2,"116":8,"121":2,"126":2,"130":4,"574":6,"577":4,"609":2,"610":2}}],["cli",{"0":{"563":1},"2":{"51":2,"218":1,"220":2,"417":2,"418":2,"563":6,"573":6}}],["cd",{"2":{"75":2,"395":6}}],["cmd和es6",{"2":{"549":1}}],["cmdlet",{"2":{"230":2}}],["cmd等",{"2":{"149":1}}],["cmd等指令运行时的用户身份",{"2":{"61":2}}],["cmd",{"2":{"61":4}}],["cpe",{"2":{"578":4}}],["cp",{"2":{"59":2}}],["ctrl+q+p",{"2":{"56":2}}],["cnssh",{"2":{"235":1}}],["cn\\t",{"2":{"235":2}}],["cn",{"2":{"55":8,"235":3,"268":4}}],["center",{"2":{"92":6,"167":4,"168":12,"170":4,"174":4,"474":12,"551":4,"577":4,"578":14,"580":2,"586":6,"587":6,"603":4}}],["centos7联网",{"0":{"75":1}}],["centos",{"2":{"51":2,"70":1}}],["centos安装docker",{"0":{"51":1}}],["ce",{"2":{"51":8}}],["ceil",{"2":{"15":2,"159":2}}],["cboxss",{"2":{"106":4}}],["cboxs",{"2":{"106":4}}],["cbox",{"2":{"105":14,"106":14}}],["cb",{"2":{"46":8}}],["c",{"2":{"17":2,"61":8,"145":12,"146":2,"168":12,"170":12,"173":4,"231":2,"232":2,"326":2,"371":8,"393":2,"399":4,"426":2,"539":8,"551":4,"578":20,"586":18,"587":16,"603":2}}],["custom",{"2":{"586":2}}],["customtitle",{"2":{"87":4}}],["customrequest",{"2":{"15":4}}],["cur+pre",{"2":{"539":2}}],["curring",{"2":{"539":6}}],["currunit",{"2":{"302":8}}],["currentwidth",{"2":{"578":10}}],["currentvalue",{"2":{"360":4,"368":4,"378":5}}],["current",{"2":{"290":10,"298":22,"300":38,"551":6}}],["current插入到arr",{"2":{"290":1}}],["currentrow",{"2":{"159":2}}],["currentchange",{"2":{"158":2}}],["currentpage",{"2":{"157":4,"158":4,"159":18}}],["currentitem",{"2":{"95":4}}],["curpage",{"2":{"159":6}}],["cursor",{"2":{"113":2,"577":4}}],["cur",{"2":{"15":20,"326":14,"327":6,"381":6,"383":8,"384":4,"385":8,"539":14,"599":14}}],["china",{"2":{"585":4}}],["chinese",{"2":{"384":2}}],["children",{"2":{"357":14,"474":6,"542":6,"543":10,"544":10,"578":8,"579":2}}],["child1",{"2":{"180":2}}],["childs1",{"2":{"104":6}}],["childs",{"2":{"104":4}}],["childdata",{"2":{"103":12}}],["childinstance",{"2":{"103":12}}],["childcomponent",{"2":{"103":10,"104":8}}],["child",{"2":{"98":6,"103":4,"104":16,"105":14,"106":11,"180":2,"197":1,"375":2,"502":4,"503":6,"504":4,"543":12,"544":4}}],["ch",{"2":{"279":17}}],["cherry",{"2":{"216":2}}],["checkbox",{"2":{"611":4}}],["checkjs",{"2":{"414":2,"440":2}}],["check",{"2":{"230":2,"610":2}}],["checkout",{"2":{"212":2,"217":2,"396":5,"607":1}}],["checkfile",{"2":{"15":2}}],["checkfileexist",{"2":{"15":4}}],["chrome",{"2":{"177":2,"194":1,"418":2,"420":2,"423":2,"450":1}}],["chatgpt",{"2":{"588":1}}],["chaining",{"2":{"311":2,"315":2}}],["chart",{"2":{"584":8}}],["chartsinstance",{"2":{"584":4}}],["chartloading",{"2":{"577":4}}],["charcodeat与fromcharcode",{"0":{"531":1}}],["charcodeat",{"2":{"530":1,"531":2}}],["charset",{"2":{"491":2}}],["charset=utf",{"2":{"20":4,"21":2,"22":4}}],["char",{"2":{"302":6}}],["charat",{"2":{"279":2,"530":1}}],["changeorigin",{"2":{"589":2}}],["changelog",{"0":{"221":1},"2":{"218":3,"221":6}}],["changeweather",{"2":{"143":2}}],["change",{"2":{"116":8}}],["changedetection",{"2":{"113":2}}],["changedetectionstrategy",{"2":{"111":2,"112":2,"113":4,"121":2}}],["changedetectorref",{"2":{"112":2}}],["changedrows",{"2":{"36":2}}],["changes",{"2":{"104":6,"109":6,"126":4}}],["change=",{"2":{"45":2}}],["chunkcount",{"2":{"15":4}}],["chunk",{"2":{"15":18}}],["chunksize",{"2":{"15":8}}],["chunks",{"2":{"15":26,"571":6}}],["canceledit",{"2":{"610":6}}],["cancelupdate",{"2":{"610":2}}],["cancelable",{"2":{"584":2}}],["cannot",{"0":{"586":1},"1":{"587":1},"2":{"588":1}}],["canvases",{"2":{"551":2}}],["canvas画图片",{"2":{"551":2}}],["canvas是更好的选择",{"2":{"484":1}}],["canvas是一种基于位图的绘图技术",{"2":{"484":1}}],["canvas要求开发者掌握像素级别的操作",{"2":{"484":1}}],["canvas和svg都是用于创建图形的html5元素",{"2":{"484":1}}],["canvas和svg区别",{"0":{"484":1}}],["canvas",{"2":{"335":2,"551":11,"577":4}}],["canfly",{"2":{"108":24}}],["carr",{"2":{"302":4}}],["cachegroups",{"2":{"571":2}}],["cache",{"2":{"296":50,"450":1,"471":2}}],["cached",{"2":{"208":4}}],["capacity",{"2":{"296":8}}],["campbell",{"2":{"231":2}}],["case",{"2":{"137":2,"259":2,"440":2}}],["calc",{"2":{"184":4,"201":2}}],["calcfilehash",{"2":{"15":4}}],["called",{"2":{"426":2}}],["call和bind与apply",{"2":{"262":1}}],["callbacks",{"2":{"307":4,"308":2,"310":2,"311":2,"315":8}}],["callback",{"2":{"250":4,"307":8,"315":8,"368":2,"378":6}}],["call",{"2":{"130":2,"262":5,"318":4,"504":2,"507":1}}],["callphone",{"2":{"130":6}}],["cat",{"2":{"13":4,"59":2,"233":1,"347":6}}],["catch捕获异常",{"2":{"242":2}}],["catch",{"2":{"9":2,"10":2,"11":2,"12":4,"45":2,"239":4,"242":2,"295":8,"304":2,"306":4,"308":8,"309":4,"310":10,"311":2,"315":4,"493":2,"494":2}}],["could",{"2":{"234":3}}],["count++",{"2":{"295":2,"494":2}}],["countdocuments",{"2":{"12":2}}],["count",{"2":{"4":2,"12":2,"36":6,"122":8,"295":4,"494":4}}],["code=",{"2":{"577":6}}],["coderfxj",{"2":{"235":1}}],["coder8888",{"2":{"43":2}}],["code终端报错",{"2":{"230":1}}],["code终端配置",{"0":{"230":1}}],["code",{"2":{"228":1,"433":2,"577":8}}],["cos",{"2":{"195":2}}],["correct",{"2":{"217":2,"230":2,"234":2}}],["corner",{"2":{"195":4}}],["corejs版本",{"2":{"423":2}}],["corejs",{"2":{"418":2,"423":2}}],["core",{"2":{"84":2,"85":2,"89":2,"90":2,"91":2,"92":2,"93":2,"95":4,"96":4,"103":2,"104":2,"105":2,"106":2,"107":2,"108":4,"109":2,"113":4,"114":2,"116":8,"119":2,"121":6,"122":2,"123":2,"125":2,"126":4,"130":4,"357":2,"414":2,"422":5,"440":2}}],["cors",{"0":{"31":1,"32":1},"2":{"30":6,"43":6}}],["cors解决跨域",{"2":{"30":2}}],["copy",{"2":{"61":4,"574":8}}],["combos",{"2":{"577":4,"578":2}}],["combo",{"2":{"577":2,"578":4}}],["comlet",{"2":{"532":1}}],["com|cn|cc|net|org",{"2":{"346":2}}],["com+",{"2":{"341":2}}],["compressionwebpackplugin",{"2":{"613":2}}],["compileonsave",{"2":{"440":2}}],["compileroptions",{"2":{"414":4,"419":2,"439":2,"440":2}}],["compare",{"2":{"388":4}}],["complete",{"2":{"161":1}}],["computed",{"2":{"157":2,"458":1,"554":1}}],["componentupdated",{"2":{"574":2}}],["components",{"2":{"113":2,"414":2,"433":4,"554":1}}],["componentref",{"2":{"113":20}}],["componentfactoryresolver",{"2":{"113":4}}],["component",{"2":{"84":4,"85":8,"89":4,"90":4,"91":4,"92":4,"93":4,"95":8,"96":8,"100":1,"102":2,"103":11,"104":12,"105":10,"106":10,"108":4,"109":8,"113":16,"114":11,"116":32,"119":4,"121":12,"122":4,"123":4,"126":4,"130":9,"140":2,"143":2,"144":2,"145":2,"375":2,"426":1}}],["composecurl",{"2":{"66":1}}],["compose",{"0":{"540":1},"2":{"51":2,"66":5,"540":8}}],["commonregister",{"2":{"577":4,"578":2}}],["common",{"2":{"488":1,"535":1,"571":4}}],["commonjs规范",{"2":{"549":1}}],["commonjs",{"2":{"149":1,"414":2,"430":3,"440":4}}],["commandline",{"2":{"231":4}}],["commitizen",{"2":{"218":1,"221":2}}],["commitlint",{"0":{"220":2},"2":{"218":3,"220":12}}],["commit",{"2":{"55":2,"210":2,"213":2,"216":2,"221":1,"395":2,"584":2}}],["com",{"2":{"51":2,"55":8,"66":2,"211":22,"229":1,"232":2,"234":2,"235":8,"346":12,"347":12,"349":12,"350":4,"395":2,"396":6,"532":7,"572":1,"573":1}}],["cookies",{"2":{"523":2,"584":2}}],["cookie",{"0":{"41":1},"2":{"41":2,"42":2,"472":1,"522":1,"523":7}}],["collapsible",{"2":{"599":4}}],["collapsed",{"2":{"579":2,"599":4}}],["collection",{"2":{"414":2}}],["collectionname",{"2":{"2":2}}],["collections",{"2":{"2":2}}],["color=",{"2":{"478":4}}],["color​​​",{"2":{"466":1}}],["colorscheme",{"2":{"231":2}}],["colorchange",{"2":{"125":4}}],["color",{"2":{"84":2,"91":2,"99":3,"124":4,"125":6,"177":4,"178":2,"190":6,"203":2,"347":8,"399":8,"491":20,"577":2,"603":4}}],["columns",{"2":{"168":2,"170":2}}],["column",{"2":{"36":2,"166":2,"172":8,"173":6,"180":2,"202":2}}],["concurrencyrequest",{"2":{"494":4}}],["concat",{"2":{"282":10,"289":2,"322":6,"324":6,"326":6,"527":4,"530":1,"539":6,"543":2,"599":2}}],["conic",{"2":{"481":2}}],["convertarr",{"2":{"383":6}}],["conventional",{"0":{"220":1,"221":1},"2":{"218":3,"220":4,"221":6}}],["cond",{"2":{"157":14}}],["conds",{"2":{"157":20,"158":4}}],["condition为false时显示",{"2":{"121":2}}],["condition为true时显示",{"2":{"121":2}}],["condition为假时显示",{"2":{"121":2}}],["condition为真时显示",{"2":{"121":2}}],["condition",{"2":{"121":20}}],["conditions",{"2":{"12":2,"158":2}}],["confirm",{"2":{"610":4}}],["confirmupdate",{"2":{"610":4}}],["configurewebpack",{"2":{"571":2}}],["configs",{"2":{"414":2}}],["config",{"0":{"220":1,"423":1,"573":1},"2":{"13":4,"51":2,"213":2,"218":1,"220":10,"224":2,"227":2,"229":1,"418":1,"440":2,"570":2,"573":1,"586":2,"587":2,"599":2,"602":3,"613":2}}],["conf",{"2":{"61":8,"73":2,"590":2}}],["control",{"2":{"471":2}}],["continue跳过当前循环",{"2":{"260":1}}],["continue",{"2":{"214":2,"357":2}}],["contains",{"2":{"610":2}}],["contain",{"2":{"551":2}}],["container",{"0":{"129":1},"2":{"63":2,"106":2,"113":10,"114":12,"129":4,"482":4,"577":2}}],["containerd",{"2":{"51":2}}],["contactsdata",{"2":{"159":2}}],["context在内部ng",{"2":{"114":2}}],["context",{"2":{"99":2,"114":14,"126":10,"571":2}}],["contentbox",{"2":{"105":4}}],["contentboxcomponent",{"2":{"105":4,"106":8}}],["contentchildren没有",{"2":{"106":2}}],["contentchildren",{"0":{"106":1},"2":{"106":6}}],["contentchildcomponent",{"2":{"105":2,"106":2}}],["contentchild",{"0":{"105":1},"2":{"105":8}}],["content",{"2":{"20":4,"21":10,"22":4,"45":2,"102":16,"105":36,"106":40,"113":10,"123":4,"167":10,"170":4,"179":2,"184":2,"189":2,"190":4,"195":4,"197":4,"198":2,"349":2,"474":8,"475":5,"490":4,"603":4}}],["connecting",{"2":{"234":1}}],["connection",{"2":{"13":2,"234":1}}],["connect",{"2":{"13":2}}],["consolas",{"2":{"198":2}}],["console",{"2":{"10":2,"13":6,"15":2,"16":16,"18":4,"20":2,"21":2,"22":14,"25":8,"28":4,"29":28,"30":6,"34":4,"35":4,"36":8,"37":10,"38":8,"42":2,"43":4,"45":6,"46":2,"93":4,"103":22,"104":6,"105":6,"106":4,"109":16,"113":2,"118":2,"121":2,"125":4,"126":4,"130":2,"145":4,"151":2,"152":2,"153":2,"238":10,"240":4,"241":2,"242":4,"243":6,"245":10,"246":2,"247":2,"262":4,"264":2,"265":4,"269":6,"270":2,"271":4,"272":2,"276":2,"285":2,"293":4,"295":4,"296":18,"297":8,"298":4,"299":6,"301":4,"302":2,"303":2,"307":8,"308":12,"313":4,"314":4,"316":2,"318":6,"319":10,"324":4,"330":4,"331":8,"332":6,"333":2,"340":2,"341":10,"342":4,"346":2,"349":2,"362":2,"363":2,"364":6,"370":2,"372":2,"381":2,"383":2,"384":2,"385":2,"389":4,"393":2,"404":2,"406":6,"407":2,"408":4,"409":2,"410":6,"411":4,"426":4,"427":2,"493":2,"494":8,"495":2,"498":2,"502":2,"503":2,"504":2,"512":2,"524":4,"525":2,"532":20,"536":6,"539":2,"570":3}}],["constlet",{"2":{"402":1}}],["constructor",{"2":{"103":10,"104":2,"105":2,"106":2,"108":2,"109":2,"113":4,"114":2,"116":4,"119":2,"121":2,"125":2,"126":2,"130":4,"269":2,"270":2,"271":4,"274":1,"293":2,"296":2,"298":2,"299":2,"303":2,"304":2,"315":2,"319":4,"404":4,"405":6,"406":12,"407":2,"409":2,"410":2,"493":2,"499":4,"527":4}}],["const",{"0":{"402":1,"514":1,"515":1},"1":{"515":1,"516":1},"2":{"10":2,"11":2,"12":14,"13":23,"15":56,"16":1,"17":2,"18":1,"20":3,"21":5,"22":18,"25":4,"28":3,"29":16,"30":12,"34":3,"35":2,"36":4,"37":4,"42":5,"43":17,"45":2,"46":13,"108":2,"113":4,"137":1,"144":2,"145":2,"157":4,"158":2,"159":4,"240":2,"243":12,"245":2,"246":2,"247":4,"249":5,"250":9,"265":9,"268":1,"271":2,"279":2,"288":2,"289":8,"292":14,"293":1,"294":12,"295":2,"296":10,"299":2,"314":1,"316":18,"318":14,"319":6,"322":8,"326":8,"327":6,"328":4,"329":3,"330":8,"331":1,"332":1,"333":9,"334":22,"335":10,"357":13,"362":1,"364":3,"365":2,"371":1,"372":3,"373":1,"374":4,"378":2,"383":2,"393":5,"402":7,"406":6,"407":2,"409":2,"410":2,"418":6,"493":12,"494":14,"507":1,"514":1,"515":1,"516":2,"536":11,"539":11,"540":12,"544":4,"551":7,"570":2,"571":2,"572":2,"574":6,"577":10,"578":60,"589":2,"599":16,"614":4}}],["ture",{"2":{"500":1}}],["turefunction",{"2":{"500":1}}],["tuple\\t",{"2":{"400":2}}],["tcp",{"2":{"451":3,"452":1}}],["twinkle",{"2":{"203":6}}],["tplvarcomponent",{"2":{"130":2}}],["tpl",{"2":{"130":2}}],["tmppoint",{"2":{"578":6}}],["tmpoutletcomponent",{"2":{"114":2}}],["tmp",{"2":{"114":16}}],["times",{"2":{"493":4,"494":8}}],["timer",{"2":{"238":2,"519":24,"520":8,"577":10}}],["tiff",{"2":{"385":4}}],["tick",{"2":{"112":1}}],["tip",{"2":{"112":1,"118":1,"140":1,"147":1,"249":1,"262":1,"270":1,"274":1,"359":1,"367":1,"378":1,"388":1,"575":1,"594":1,"605":1,"616":1}}],["title=",{"2":{"577":6,"609":2,"610":2}}],["titlecasepipe",{"2":{"132":1}}],["title",{"2":{"11":2,"13":2,"84":6,"87":4,"99":3,"137":2,"303":4,"333":2,"418":2,"542":10,"574":4,"609":2}}],["th",{"2":{"577":4}}],["thu",{"2":{"533":2}}],["thumb",{"2":{"177":2}}],["throttle",{"2":{"520":6}}],["throwfn",{"2":{"551":6}}],["throw",{"2":{"288":2,"302":2,"311":2,"315":2,"519":2,"551":2}}],["that",{"2":{"230":2}}],["thisarg可选",{"2":{"368":2}}],["thisvalue",{"2":{"360":2,"368":2}}],["this表示当前所创建的对象",{"2":{"269":2}}],["this由bind第一个参数决定",{"2":{"262":1}}],["this是新建的对象",{"2":{"262":1}}],["this是调用方法的对象",{"2":{"262":1}}],["this是window",{"2":{"262":1}}],["this的值也不同",{"2":{"262":1}}],["this指向",{"0":{"262":1,"517":1}}],["this",{"2":{"96":4,"103":22,"104":6,"105":6,"106":4,"108":14,"113":34,"116":16,"118":4,"121":6,"125":10,"126":32,"139":2,"140":2,"143":6,"144":2,"145":12,"146":6,"151":4,"152":4,"153":4,"157":20,"158":6,"159":22,"240":2,"241":2,"262":8,"269":10,"270":16,"271":4,"278":2,"293":12,"296":10,"298":4,"299":6,"300":44,"303":20,"304":24,"305":8,"306":8,"307":16,"308":12,"309":8,"310":28,"311":24,"315":54,"404":8,"405":8,"406":24,"407":6,"409":6,"410":6,"427":2,"440":2,"493":28,"495":3,"498":5,"504":2,"519":6,"520":6,"577":56,"578":4,"584":14,"610":22,"612":4,"615":38}}],["the",{"2":{"230":7,"234":4,"347":16,"578":2,"586":2}}],["themes",{"2":{"222":1,"224":2,"227":2}}],["theme",{"2":{"89":4,"113":8,"488":1,"602":1}}],["then方法",{"2":{"315":2}}],["then方法构建",{"0":{"305":1}}],["then的穿透处理",{"2":{"308":4}}],["then的链式操作",{"0":{"308":1}}],["then返回的时promise",{"2":{"308":1}}],["thenblock",{"2":{"121":4}}],["then",{"2":{"15":2,"45":2,"121":2,"239":12,"295":8,"305":2,"307":2,"308":5,"309":4,"310":7,"311":5,"312":2,"313":4,"314":4,"315":10,"357":2,"494":2,"525":4}}],["t\\t",{"2":{"73":2,"122":2}}],["t",{"2":{"36":2,"56":2,"122":2,"126":8,"232":2,"235":6,"424":6}}],["txt",{"2":{"16":14,"18":2,"329":2,"330":2}}],["ts文件",{"2":{"599":2}}],["tslib",{"2":{"440":2}}],["tslint",{"2":{"134":1}}],["tsx",{"2":{"432":4,"439":1}}],["ts中import",{"2":{"432":2}}],["ts中属性具有三种修饰符",{"2":{"406":1}}],["ts模板默认设置为node策略",{"2":{"432":1}}],["ts是有默认推导的",{"2":{"428":1}}],["tsexport",{"2":{"427":1}}],["tsfunction",{"2":{"426":1}}],["ts无法直接转换",{"2":{"422":1}}],["ts$",{"2":{"418":2,"423":2}}],["ts编译器不会报错",{"2":{"431":1}}],["ts编译器可以更具它的信息来对代码进行编译",{"2":{"414":2}}],["ts编译配置",{"0":{"414":1}}],["ts新增类型",{"0":{"400":1}}],["tstype",{"2":{"335":1}}],["tsconfig",{"0":{"425":1,"440":1},"1":{"426":1,"427":1,"428":1,"429":1,"430":1,"431":1,"432":1,"433":1,"434":1,"435":1,"436":1,"437":1,"438":1,"439":1,"440":1},"2":{"134":1,"414":4,"425":1}}],["ts",{"0":{"599":1},"2":{"15":2,"103":1,"104":1,"105":1,"106":1,"113":1,"114":1,"116":2,"151":2,"152":2,"153":2,"334":1,"417":2,"418":8,"423":2,"424":1,"428":1,"432":12,"433":3,"434":1,"439":5,"440":10,"586":2,"587":3,"599":8,"602":3,"614":2}}],["tel",{"2":{"340":4,"342":8}}],["television",{"2":{"95":2}}],["tem",{"2":{"288":4}}],["temp",{"2":{"287":4,"291":6}}],["template中的元素是不可见的",{"2":{"128":1}}],["templateref",{"2":{"121":6,"126":12,"130":1}}],["templateref拓展",{"2":{"121":1}}],["template也可以绑定",{"2":{"114":2}}],["template使用效果一样",{"2":{"114":2}}],["templateurl",{"2":{"85":2,"103":2,"104":2,"105":2,"106":2,"109":2,"113":2,"114":2,"116":2}}],["template",{"0":{"128":1},"2":{"15":8,"45":4,"84":2,"89":2,"90":2,"91":2,"92":2,"93":2,"95":4,"96":4,"108":2,"113":2,"114":24,"116":6,"119":2,"121":28,"122":6,"123":18,"126":2,"128":4,"130":4,"150":4,"151":4,"152":4,"153":4,"165":7,"168":6,"170":6,"418":2,"610":4,"614":4}}],["terminate",{"2":{"495":2}}],["terminal",{"2":{"231":2}}],["term",{"2":{"72":2,"230":2}}],["testmodule",{"2":{"433":2}}],["test指定的时规则生效的文件",{"2":{"418":2}}],["testarr",{"2":{"288":4}}],["test3",{"2":{"144":4}}],["test2",{"2":{"144":2}}],["test1",{"2":{"144":2}}],["test",{"2":{"61":2,"137":1,"143":2,"145":2,"269":2,"302":2,"329":2,"330":2,"340":2,"341":8,"342":4,"346":2,"348":4,"418":2,"420":4,"423":2,"434":2,"500":4,"525":2,"571":2,"578":4,"586":6,"587":4}}],["testdb01",{"2":{"1":4}}],["textval",{"2":{"610":6}}],["textbaseline",{"2":{"578":8,"580":2}}],["textalign",{"2":{"578":14,"580":2}}],["textarea",{"2":{"334":8,"483":1,"574":18}}],["text",{"2":{"20":4,"21":2,"22":4,"92":6,"108":2,"117":6,"139":8,"145":8,"146":4,"176":8,"199":2,"200":2,"301":16,"329":2,"330":2,"334":2,"335":2,"432":1,"474":1,"578":42,"580":4,"599":12,"610":14,"611":2}}],["typeroots",{"2":{"440":2}}],["typeroots和types",{"0":{"438":1}}],["typedarrays",{"2":{"414":2}}],["typeof是按照二进制值进行检测类型的详细转换机制",{"2":{"507":1}}],["typeof",{"2":{"305":4,"308":4,"310":4,"311":4,"315":4,"318":10,"319":2,"400":2,"507":6,"519":6,"527":2}}],["typeerrorlet",{"2":{"311":1}}],["typeerror",{"0":{"586":1},"1":{"587":1},"2":{"295":2,"311":3,"315":2,"509":1,"519":2,"588":1,"592":1}}],["type=",{"2":{"15":2,"45":2,"46":4,"89":12,"90":12,"108":2,"117":2,"123":8,"139":8,"145":8,"146":4}}],["type",{"2":{"13":26,"15":2,"20":4,"21":2,"22":4,"45":2,"113":2,"117":4,"159":4,"220":2,"329":2,"330":2,"335":7,"424":12,"577":8,"610":2}}],["types包",{"2":{"438":1}}],["typescript插件",{"2":{"440":2}}],["typescript1",{"2":{"440":2}}],["typescript是es6的超集",{"2":{"429":1}}],["typescript和es6中引入了class的概念",{"2":{"426":1}}],["typescript带来的类型系统以及强大的ide支持",{"2":{"425":1}}],["typescriptabstract",{"2":{"411":1}}],["typescriptclass",{"2":{"404":1,"405":2,"406":3,"407":1,"408":1,"409":1,"410":1}}],["typescriptchangedetection",{"2":{"111":1,"112":1}}],["typescript字面量\\t",{"2":{"400":1}}],["typescriptenum",{"2":{"399":1}}],["typescriptlet",{"2":{"399":2,"400":3,"401":1,"402":2}}],["typescript",{"0":{"425":1},"1":{"426":1,"427":1,"428":1,"429":1,"430":1,"431":1,"432":1,"433":1,"434":1,"435":1,"436":1,"437":1,"438":1,"439":1,"440":1},"2":{"117":1,"118":1,"123":1,"135":1,"399":4,"400":2,"404":1,"412":1,"417":2,"418":2,"420":1,"440":4,"602":1}}],["typescriptimport",{"2":{"84":1,"85":1,"89":1,"90":1,"91":1,"92":1,"93":1,"95":2,"96":2,"103":1,"104":1,"105":1,"106":1,"107":1,"108":2,"109":1,"113":2,"114":1,"116":4,"119":1,"121":3,"122":1,"123":1,"125":1,"126":2,"130":2}}],["types",{"2":{"10":2,"13":2,"432":2,"438":2,"440":2}}],["tofixed",{"2":{"614":2}}],["toolbar",{"2":{"577":12}}],["tools",{"2":{"408":6}}],["toblob",{"2":{"551":2}}],["tolowercase",{"2":{"530":1}}],["tolocalelowercase",{"2":{"530":1}}],["tolocalestring",{"2":{"268":2}}],["tolocaletimestring",{"2":{"268":2}}],["tolocaledatestring",{"2":{"268":2}}],["touppercase",{"2":{"371":2,"530":1}}],["todataurl",{"2":{"335":2,"551":4}}],["today",{"2":{"95":2}}],["tom",{"2":{"144":2,"318":6,"319":10}}],["tomcat82",{"2":{"64":4}}],["tomcat81",{"2":{"64":4}}],["tomcat",{"2":{"64":8}}],["toggleleftmenu",{"2":{"584":4}}],["toggle",{"2":{"121":2,"126":2}}],["topdirarr",{"2":{"599":4}}],["topochart",{"2":{"577":6}}],["toprimitive",{"2":{"509":1,"512":5,"539":2}}],["top++",{"2":{"279":2}}],["top",{"2":{"113":6,"178":2,"179":2,"189":2,"190":4,"195":4,"249":2,"279":15,"474":4,"479":2,"490":4,"551":2}}],["to",{"2":{"96":2,"161":1,"179":4,"186":2,"195":2,"234":3,"396":8,"478":1,"551":2,"578":2}}],["tostring",{"0":{"533":1},"2":{"46":2,"294":2,"302":4,"316":2,"318":8,"509":1,"512":7,"533":7}}],["tokenstr",{"2":{"43":4}}],["token",{"2":{"43":14,"396":4}}],["total",{"2":{"15":4,"156":2,"158":4,"159":10}}],["totalcount",{"2":{"12":4}}],["tojson",{"2":{"9":2}}],["tailwindcss动态绑定类不能随着渐变",{"0":{"614":1}}],["tailwindcss断点对应设备",{"0":{"489":1}}],["tainted",{"2":{"551":2}}],["table",{"2":{"482":1}}],["tables",{"2":{"2":2}}],["tan",{"2":{"185":2}}],["tar",{"2":{"59":2}}],["tar\\t",{"2":{"59":2}}],["target选项不同而不同",{"2":{"430":1,"431":1}}],["targets",{"2":{"418":2,"423":2}}],["target得到发生事件的dom元素对象",{"2":{"146":1}}],["target",{"0":{"429":1},"2":{"15":2,"45":2,"93":2,"117":2,"146":4,"247":6,"250":2,"326":4,"331":10,"333":2,"335":2,"414":4,"419":2,"426":2,"429":1,"440":2,"589":4,"610":2}}],["tasks",{"2":{"494":20}}],["taskqueue",{"2":{"493":4}}],["task",{"2":{"15":8,"493":12}}],["taskpool",{"2":{"15":18}}],["tagboxwidth",{"2":{"615":2}}],["tagboxref",{"2":{"615":6}}],["taggit",{"2":{"207":1}}],["tag名",{"2":{"207":4}}],["tag",{"2":{"12":6,"55":4,"207":9}}],["taglistwidth",{"2":{"615":4}}],["taglistresizeobserver",{"2":{"615":6}}],["taglistref",{"2":{"615":16}}],["taglist",{"2":{"11":2,"12":2,"13":2}}],["tree",{"2":{"542":2}}],["treenode",{"2":{"299":16}}],["transition",{"2":{"603":2}}],["transpilemodule",{"2":{"440":2}}],["transparent",{"2":{"189":2,"190":4,"195":8,"198":2,"603":4}}],["translatey",{"2":{"195":4,"605":1}}],["translate",{"2":{"178":2,"474":2}}],["transform",{"2":{"107":2,"108":2,"179":2,"189":2,"195":8,"302":4,"464":1,"466":4,"474":3,"479":1,"570":3,"605":2}}],["track",{"2":{"177":2}}],["trackbyhero",{"2":{"122":2}}],["trackbyperson",{"2":{"122":4}}],["trimend",{"2":{"530":1}}],["trimstart",{"2":{"530":1}}],["trim",{"2":{"108":2,"530":1,"610":2}}],["triggered",{"2":{"293":4}}],["trigger",{"2":{"15":2}}],["try",{"2":{"9":2,"10":2,"11":2,"12":4,"230":2,"242":4,"304":2,"306":4,"308":8,"309":4,"310":10,"311":2,"315":4,"493":2,"494":2}}],["truelet",{"2":{"279":1,"340":1,"348":1}}],["true显示",{"2":{"121":2}}],["true",{"2":{"7":4,"11":2,"13":14,"36":2,"42":4,"46":2,"89":4,"90":4,"103":6,"105":4,"106":5,"108":4,"118":4,"121":8,"122":8,"126":2,"134":1,"151":2,"156":2,"158":6,"159":2,"213":2,"214":2,"251":2,"255":2,"256":6,"257":4,"262":4,"279":6,"300":4,"316":2,"318":6,"326":2,"340":1,"341":4,"346":2,"348":1,"359":2,"365":4,"374":2,"400":2,"414":18,"419":2,"440":46,"509":1,"511":1,"512":4,"519":2,"520":4,"528":1,"577":6,"578":14,"579":2,"584":6,"585":4,"589":2,"590":2,"599":4,"610":4,"613":2}}],["三次握手的目的",{"2":{"451":1}}],["三",{"0":{"2":1,"19":1,"49":1,"97":1,"305":1,"324":1,"328":1,"402":1,"407":1,"452":1,"458":1,"581":1},"1":{"20":1,"21":1,"22":1,"98":1,"99":1,"100":1,"101":1,"408":1,"453":1},"2":{"302":6}}],["创建一个新对象",{"2":{"498":1}}],["创建一个普通的js对象",{"2":{"278":1}}],["创建有效的离线体验",{"2":{"497":1}}],["创建package",{"2":{"416":1,"418":2}}],["创建了一个高阶函数",{"2":{"392":1}}],["创建config件",{"0":{"235":1}}],["创建组件",{"2":{"143":2,"144":2}}],["创建组件的示例",{"2":{"113":2}}],["创建类式组件",{"2":{"140":2}}],["创建函数式组件",{"2":{"139":2}}],["创建指定类型的组件工厂",{"2":{"113":2}}],["创建它并插入",{"2":{"78":1}}],["创建服务器",{"0":{"28":1}}],["创建文件",{"2":{"334":2}}],["创建文件hash值",{"2":{"15":2}}],["创建文件唯一",{"2":{"14":1}}],["创建分片",{"2":{"15":2}}],["创建任务池",{"2":{"14":1}}],["创建",{"0":{"20":1},"2":{"1":1,"20":1,"266":2,"615":2}}],["\\tprops",{"2":{"610":2}}],["\\tparent",{"2":{"504":2}}],["\\tgeo",{"2":{"585":2}}],["\\tgetsnapshotbeforeupdate",{"2":{"147":2}}],["\\tgetderivedstatefromprops",{"2":{"147":4}}],["\\tbtns",{"2":{"536":2}}],["\\tthis",{"2":{"503":4,"504":4}}],["\\ttrue",{"2":{"126":2}}],["\\tmounted",{"2":{"610":2}}],["\\tmonths",{"2":{"294":2}}],["\\tmerge",{"2":{"211":4}}],["\\tmethods",{"2":{"157":2,"610":2}}],["\\tarr",{"2":{"289":2}}],["\\tage",{"2":{"144":8}}],["\\tlet",{"2":{"279":2,"525":2}}],["\\tobject",{"2":{"261":2}}],["\\tnew",{"2":{"613":2}}],["\\tnewfn",{"2":{"262":2}}],["\\tnumber",{"2":{"261":2}}],["\\tnan",{"2":{"255":2}}],["\\tname",{"2":{"144":4,"262":2,"610":2}}],["\\t两端为字符串则逐个比较字符的unicode编码\\t",{"2":{"256":2}}],["\\tf",{"2":{"400":2}}],["\\tfalse",{"2":{"255":2}}],["\\tfetch",{"2":{"211":6}}],["\\tundefined",{"2":{"255":2}}],["\\turl",{"2":{"211":8}}],["\\t第一个值为",{"2":{"255":2}}],["\\t++",{"2":{"254":2}}],["\\tif",{"2":{"159":2,"279":2,"365":4,"519":4}}],["\\tdfs",{"2":{"543":2}}],["\\tdata",{"2":{"157":2,"610":2}}],["\\tdb",{"2":{"5":2}}],["\\t2",{"2":{"147":4}}],["\\t12",{"2":{"255":2}}],["\\t1",{"2":{"147":4}}],["\\tremote",{"2":{"211":4}}],["\\treturn",{"2":{"144":2,"146":4,"158":2,"283":2}}],["\\trender",{"2":{"140":2,"143":2,"144":2,"145":2,"147":8}}],["\\tseries",{"2":{"585":2}}],["\\tsex",{"2":{"144":8}}],["\\tshouldcomponentupdate",{"2":{"147":4}}],["\\tshowdata",{"2":{"145":2}}],["\\tspeak",{"2":{"144":2}}],["\\tstate",{"2":{"143":2}}],["\\tcreated",{"2":{"610":2}}],["\\tcomputed",{"2":{"610":2}}],["\\tcomponents",{"2":{"610":2}}],["\\tcomponentdidupdate",{"2":{"147":4}}],["\\tcomponentdidmount",{"2":{"147":4}}],["\\tcomponentwillunmount",{"2":{"147":4}}],["\\tcomponentwillupdate",{"2":{"147":2}}],["\\tcomponentwillmount",{"2":{"147":2}}],["\\tconstructor",{"2":{"147":4,"502":4}}],["\\tconst",{"2":{"144":2}}],["\\tconsole",{"2":{"20":2,"262":2}}],["\\tchangeweather",{"2":{"143":2}}],["\\twatch",{"2":{"610":2}}],["\\twriteconcern",{"2":{"7":2}}],["\\twhere",{"2":{"4":10}}],["\\t\\tminratio",{"2":{"613":2}}],["\\t\\tmaxwidth",{"2":{"610":2}}],["\\t\\tmap",{"2":{"585":2}}],["\\t\\tdeleteoriginalassets",{"2":{"613":2}}],["\\t\\tdocument",{"2":{"610":2}}],["\\t\\texclude",{"2":{"613":2}}],["\\t\\tname",{"2":{"610":2}}],["\\t\\tnull",{"2":{"255":2}}],["\\t\\tthreshold",{"2":{"613":2}}],["\\t\\tthis",{"2":{"143":2,"146":2,"502":4,"612":4}}],["\\t\\ttest",{"2":{"613":2}}],["\\t\\ttextval",{"2":{"610":2}}],["\\t\\tzoom",{"2":{"585":2}}],["\\t\\troam",{"2":{"585":2}}],["\\t\\tregions",{"2":{"585":2}}],["\\t\\trender",{"2":{"375":2}}],["\\t\\trelateoptions",{"2":{"158":2}}],["\\t\\treturn",{"2":{"140":2,"143":2,"144":2,"145":2,"146":2,"157":2,"610":2}}],["\\t\\treactdom",{"2":{"139":2}}],["\\t\\titemstyle",{"2":{"585":2}}],["\\t\\tif",{"2":{"525":2}}],["\\t\\tinitsearchfromcond",{"2":{"157":2}}],["\\t\\t0",{"2":{"255":2}}],["\\t\\talgorithm",{"2":{"613":2}}],["\\t\\taspectscale",{"2":{"585":2}}],["\\t\\tasync",{"2":{"158":2}}],["\\t\\tawait",{"2":{"243":2}}],["\\t\\thandlecurrentchange",{"2":{"158":2}}],["\\t\\thandlesizechange",{"2":{"158":2}}],["\\t\\tcurrentchange",{"2":{"157":2}}],["\\t\\tconst",{"2":{"143":4,"144":2,"145":2}}],["\\t\\tconsole",{"2":{"140":2,"262":2}}],["\\t\\tsuccessupdate",{"2":{"610":2}}],["\\t\\tsuper",{"2":{"502":2}}],["\\t\\tswitchtoedit",{"2":{"610":2}}],["\\t\\tstring",{"2":{"530":1}}],["\\t\\tsizechange",{"2":{"157":2}}],["\\t\\tsearchconddone",{"2":{"158":2}}],["\\t\\tsearch",{"2":{"157":2}}],["\\t\\tfunction",{"2":{"139":2}}],["\\t\\t\\tdefault",{"2":{"610":6}}],["\\t\\t\\tmap",{"2":{"585":2}}],["\\t\\t\\tzoom",{"2":{"585":2}}],["\\t\\t\\tloading",{"2":{"610":2}}],["\\t\\t\\tlabel",{"2":{"585":2}}],["\\t\\t\\tlet",{"2":{"157":4,"158":2,"610":2}}],["\\t\\t\\tgeoindex",{"2":{"585":2}}],["\\t\\t\\tgridloading",{"2":{"157":2}}],["\\t\\t\\tnormal",{"2":{"585":2}}],["\\t\\t\\tqobj",{"2":{"158":6}}],["\\t\\t\\tconds",{"2":{"157":2}}],["\\t\\t\\tconst",{"2":{"157":6,"158":2}}],["\\t\\t\\tconsole",{"2":{"139":2}}],["\\t\\t\\ttext",{"2":{"610":2}}],["\\t\\t\\ttype",{"2":{"585":2,"610":6}}],["\\t\\t\\tthis",{"2":{"157":12,"158":12,"610":16}}],["\\t\\t\\ttrackby",{"2":{"122":2}}],["\\t\\t\\tpaginationoptions",{"2":{"157":2}}],["\\t\\t\\tsearchconds",{"2":{"157":2}}],["\\t\\t\\tinputval",{"2":{"610":2}}],["\\t\\t\\tindex",{"2":{"122":2}}],["\\t\\t\\tisediting",{"2":{"610":2}}],["\\t\\t\\tisechocond",{"2":{"157":2}}],["\\t\\t\\titemstyle",{"2":{"585":2}}],["\\t\\t\\tif",{"2":{"157":2,"158":2,"610":4}}],["\\t\\t\\twrapperloading",{"2":{"157":2}}],["\\t\\t\\t执行了reactdom",{"2":{"139":2}}],["\\t\\t\\treturn",{"2":{"139":2,"146":2,"375":2}}],["\\t\\t\\t\\treturn",{"2":{"610":4}}],["\\t\\t\\t\\tref=",{"2":{"610":2}}],["\\t\\t\\t\\tthis",{"2":{"610":10}}],["\\t\\t\\t\\ttitle=",{"2":{"610":4}}],["\\t\\t\\t\\ttotal",{"2":{"157":2}}],["\\t\\t\\t\\tsize=",{"2":{"610":2}}],["\\t\\t\\t\\tshadowoffsety",{"2":{"585":2}}],["\\t\\t\\t\\tshadowoffsetx",{"2":{"585":2}}],["\\t\\t\\t\\tshadowcolor",{"2":{"585":2}}],["\\t\\t\\t\\tv",{"2":{"610":4}}],["\\t\\t\\t\\tclearable",{"2":{"610":2}}],["\\t\\t\\t\\tclass=",{"2":{"610":4}}],["\\t\\t\\t\\tcurrentpage",{"2":{"157":2}}],["\\t\\t\\t\\temphasis",{"2":{"585":4}}],["\\t\\t\\t\\tnormal",{"2":{"585":4}}],["\\t\\t\\t\\tname",{"2":{"585":2}}],["\\t\\t\\t\\titemstyle",{"2":{"585":2}}],["\\t\\t\\t\\tgroup",{"2":{"157":2}}],["\\t\\t\\t\\toptions",{"2":{"157":2}}],["\\t\\t\\t\\tquery",{"2":{"157":6}}],["\\t\\t\\t\\tpagesize",{"2":{"157":2}}],["\\t\\t\\t\\t\\tborderwidth",{"2":{"585":2}}],["\\t\\t\\t\\t\\tbordertype",{"2":{"585":2}}],["\\t\\t\\t\\t\\tbordercolor",{"2":{"585":2}}],["\\t\\t\\t\\t\\ttextstyle",{"2":{"585":4}}],["\\t\\t\\t\\t\\tthis",{"2":{"158":4}}],["\\t\\t\\t\\t\\tshow",{"2":{"585":2}}],["\\t\\t\\t\\t\\tnormal",{"2":{"585":2}}],["\\t\\t\\t\\t\\tareacolor",{"2":{"585":4}}],["\\t\\t\\t\\t\\tmodel",{"2":{"158":2}}],["\\t\\t\\t\\t\\tlist",{"2":{"158":2}}],["\\t\\t\\t\\t\\tinputwidth",{"2":{"158":2}}],["\\t\\t\\t\\t\\tif",{"2":{"157":2}}],["\\t\\t\\t\\t\\t",{"2":{"157":2,"158":2,"585":6}}],["\\t\\t\\t\\t\\t\\tcolor",{"2":{"585":4}}],["\\t\\t\\t\\t\\t\\tconst",{"2":{"157":2}}],["\\t\\t\\t\\t\\t\\tlabel",{"2":{"585":2}}],["\\t\\t\\t\\t\\t\\topacity",{"2":{"585":2}}],["\\t\\t\\t\\t\\t\\tobj",{"2":{"157":6}}],["\\t\\t\\t\\t\\t\\t\\tcolor",{"2":{"585":2}}],["\\t\\t\\t\\t\\t\\t\\tshow",{"2":{"585":2}}],["\\t\\t\\t\\t\\t\\t\\t",{"2":{"158":2,"263":2}}],["\\t\\t\\t\\t\\t\\t\\t\\t\\tlabel",{"2":{"158":6}}],["\\t\\t\\t\\t\\t\\t\\t\\t\\tname",{"2":{"158":6}}],["\\t\\t\\t\\t\\t\\t\\t\\t",{"2":{"158":12}}],["\\t\\t\\t\\t\\t\\t\\tvaluelist",{"2":{"158":2}}],["\\t\\t\\t\\t\\t\\t\\tplaceholder",{"2":{"158":6}}],["\\t\\t\\t\\t\\t\\t\\tlabel",{"2":{"158":8}}],["\\t\\t\\t\\t\\t\\t\\top",{"2":{"158":8}}],["\\t\\t\\t\\t\\t\\t\\tname",{"2":{"158":8}}],["\\t\\t\\t\\t\\t\\t",{"2":{"158":16,"585":2}}],["\\t\\t\\t\\t\\t\\tthis",{"2":{"157":2}}],["\\t\\t\\t\\t\\t2",{"2":{"139":2}}],["\\t\\t\\t\\t\\t1",{"2":{"139":2}}],["\\t\\t\\t\\t",{"2":{"137":2,"144":6,"145":2,"157":6,"158":4,"209":2,"585":10,"610":12}}],["\\t\\t\\t",{"2":{"137":4,"144":4,"145":6,"157":8,"158":2,"375":4,"585":10,"610":26}}],["\\t\\t",{"2":{"4":2,"137":2,"139":10,"140":4,"144":2,"145":2,"146":2,"157":24,"158":14,"243":2,"255":4,"375":2,"402":2,"520":2,"533":6,"585":8,"610":30}}],["\\t",{"2":{"1":8,"2":8,"4":18,"6":10,"7":8,"16":4,"20":4,"121":2,"122":2,"125":4,"126":4,"130":4,"139":21,"140":2,"143":8,"144":6,"145":8,"146":4,"151":2,"152":2,"153":2,"157":6,"158":2,"206":2,"239":4,"252":4,"255":10,"256":8,"257":6,"259":6,"260":6,"268":2,"269":2,"270":2,"271":2,"276":2,"279":8,"282":4,"289":2,"315":2,"375":2,"399":4,"400":2,"402":6,"412":4,"423":2,"502":4,"523":2,"525":2,"533":2,"536":2,"585":4,"610":14,"612":2,"613":2}}],["dnpm",{"2":{"601":1}}],["dns",{"2":{"450":6}}],["ddd",{"2":{"585":2}}],["dd+dt",{"2":{"197":1}}],["duration",{"2":{"578":18}}],["d+",{"2":{"350":2}}],["djfkdjakdjfkjd",{"2":{"345":2}}],["drag",{"2":{"577":4}}],["drawshape",{"2":{"578":10}}],["drawchart",{"2":{"577":4}}],["drawimage",{"2":{"551":2}}],["draw",{"2":{"466":2,"578":4}}],["drivers",{"2":{"450":1}}],["driective",{"2":{"126":4}}],["drop",{"2":{"2":2}}],["dropdatabase",{"2":{"1":2}}],["dfs",{"0":{"543":1},"2":{"543":11}}],["df",{"2":{"54":2}}],["darwin",{"2":{"592":1}}],["dark",{"2":{"578":2}}],["dance",{"2":{"318":2,"319":6}}],["danger",{"2":{"89":12,"113":2,"134":1,"592":1}}],["dangling=true",{"2":{"55":1}}],["dash",{"2":{"578":2}}],["dashed",{"2":{"168":2,"170":2,"585":2}}],["dasfsada",{"2":{"119":2}}],["day",{"2":{"46":4,"268":2}}],["dataview",{"0":{"332":1},"2":{"332":18}}],["datatype",{"2":{"146":8}}],["database",{"2":{"34":2}}],["databases",{"2":{"1":2}}],["data",{"2":{"15":4,"16":12,"22":8,"30":4,"43":4,"45":2,"46":2,"87":2,"113":6,"158":1,"249":7,"250":6,"335":8,"495":8,"520":2,"523":2,"536":6,"554":1,"577":8,"579":2,"589":6}}],["date类型返回",{"2":{"533":1}}],["date类型转换成unix时间戳",{"2":{"316":1}}],["datestr",{"2":{"346":2}}],["datepipe",{"2":{"132":1}}],["date",{"2":{"13":8,"46":12,"108":2,"268":2,"294":4,"316":6,"318":17,"319":24,"506":1,"527":6,"533":4}}],["dstr",{"2":{"38":8}}],["doresize",{"2":{"584":4}}],["dog",{"2":{"271":8,"272":2,"277":1,"409":8,"410":8,"411":2}}],["do",{"2":{"260":2}}],["done",{"2":{"243":6,"525":4}}],["does",{"2":{"235":1,"586":2}}],["doesn",{"2":{"36":2}}],["down",{"2":{"111":1,"112":1}}],["download",{"2":{"66":2}}],["domexception",{"2":{"551":2}}],["dom树和",{"2":{"459":1}}],["dom",{"0":{"560":2},"2":{"82":2,"109":2,"112":2,"129":2,"139":4,"141":2,"414":4,"431":5,"455":2,"456":2,"497":1,"560":8}}],["docsearch",{"2":{"603":6}}],["docs",{"2":{"395":4,"599":14}}],["doctype",{"2":{"303":2}}],["docheck",{"2":{"109":4}}],["docker0",{"2":{"62":2}}],["docker网络",{"0":{"62":1},"1":{"63":1,"64":1}}],["dockerfile构建时运行",{"2":{"61":2}}],["dockerfile",{"2":{"61":1}}],["docker容器端口",{"2":{"56":2}}],["docker",{"0":{"54":1},"2":{"51":18,"54":4,"55":20,"56":24,"57":2,"58":2,"59":6,"61":10,"62":12,"64":7,"66":6}}],["documentelement",{"2":{"614":2}}],["document",{"2":{"7":2,"113":2,"137":2,"139":2,"140":2,"143":2,"144":8,"145":2,"249":2,"250":2,"374":4,"457":2,"523":6,"536":2,"551":2,"574":12,"577":6,"584":6,"614":2}}],["d",{"2":{"16":2,"17":4,"56":2,"57":2,"62":4,"63":2,"64":8,"206":2,"207":4,"220":2,"268":8,"302":10,"340":2,"342":4,"344":4,"346":6,"350":2,"399":6,"417":2,"418":8,"422":1,"432":6,"439":1,"440":2,"570":1,"601":1}}],["dialog",{"2":{"609":4}}],["dialogregister",{"2":{"578":2}}],["diff",{"2":{"328":4}}],["difference",{"2":{"324":12}}],["digitize",{"2":{"373":6}}],["digitmap",{"2":{"302":2}}],["digit",{"2":{"268":6,"302":6}}],["div2",{"2":{"540":6}}],["div",{"2":{"104":12,"105":12,"106":4,"107":24,"108":4,"113":4,"114":32,"116":8,"119":4,"121":8,"123":8,"137":4,"139":4,"145":4,"151":4,"152":4,"153":4,"168":16,"170":16,"375":2,"457":1,"482":16,"551":8,"577":2,"583":4,"586":12,"587":8,"610":4,"615":1}}],["dirstr",{"2":{"599":8}}],["dir=dist",{"2":{"573":2}}],["dir=",{"2":{"573":2}}],["dirdata",{"2":{"357":6}}],["dirhandle",{"2":{"357":8}}],["directorydata",{"2":{"357":2}}],["directory",{"2":{"234":1,"357":2}}],["direction",{"2":{"180":2,"202":2,"615":4}}],["directives",{"2":{"554":1}}],["directive",{"2":{"125":4,"126":4,"574":2,"586":2}}],["dir就是上传文件存放的目录",{"2":{"46":2}}],["dir",{"2":{"46":8,"349":2,"357":4,"396":2,"599":20}}],["dirname+",{"2":{"16":12}}],["dirname",{"2":{"16":8,"22":8,"418":2,"599":10}}],["dirname输出是路径是",{"2":{"16":1}}],["dirname代表当前文件所处目录",{"2":{"16":1}}],["disconnect",{"2":{"615":2}}],["dispatchevent",{"2":{"584":4}}],["displaydns",{"2":{"450":1}}],["display",{"2":{"113":2,"164":2,"168":2,"170":2,"176":2,"177":2,"180":2,"189":2,"190":4,"202":2,"474":8,"482":2,"490":2,"551":2,"603":4}}],["disappearing",{"2":{"578":2}}],["disabled",{"2":{"86":2}}],["dist",{"2":{"357":2,"395":4,"396":2,"414":4,"418":2}}],["distinct",{"2":{"4":2}}],["diskstorage",{"2":{"46":2}}],["dealdata",{"2":{"577":4}}],["deactivated",{"2":{"559":1}}],["debounce",{"2":{"519":6,"577":4}}],["defineconfig",{"2":{"602":4}}],["definenuxtconfig",{"2":{"589":2}}],["defined",{"2":{"586":2}}],["defineproperty",{"2":{"512":2}}],["defaultcombo",{"2":{"577":2}}],["defaultchangedetection",{"2":{"111":1}}],["defaultedge",{"2":{"577":2}}],["defaultnode",{"2":{"577":2}}],["defaultprops",{"2":{"144":4}}],["default",{"2":{"13":14,"111":1,"114":14,"151":2,"152":2,"153":2,"156":2,"157":2,"259":2,"427":2,"440":2,"577":2,"585":2,"589":2,"599":2,"602":4,"610":4}}],["deltay",{"2":{"615":2}}],["delays",{"2":{"577":4}}],["delay\\t",{"2":{"519":2}}],["delay",{"2":{"493":12,"494":12,"519":16,"520":12,"577":4,"578":12}}],["deleteafterpage",{"2":{"159":6}}],["deletearticle",{"2":{"10":2}}],["deleted",{"2":{"38":2}}],["delete",{"2":{"9":2,"38":2,"206":2,"207":2,"265":2,"266":2,"296":6}}],["deletemany",{"2":{"6":2}}],["deleteone",{"2":{"6":2}}],["deprecated",{"2":{"584":2}}],["deploy",{"2":{"396":6}}],["depth",{"2":{"282":4,"396":2}}],["denied",{"2":{"234":2}}],["devproxy",{"2":{"589":2}}],["dev",{"2":{"417":2,"418":2}}],["dev分支后",{"2":{"205":1}}],["development",{"2":{"139":4}}],["deepgeneratesidebar",{"2":{"599":4}}],["deepgetfile",{"2":{"599":6}}],["deepclone",{"2":{"319":6,"527":4}}],["deeppink",{"2":{"183":2}}],["deep",{"2":{"158":2,"282":4,"611":2}}],["decimal",{"2":{"513":1}}],["decimalpipe",{"2":{"132":1}}],["declaration",{"2":{"440":2}}],["declarations",{"0":{"79":1},"2":{"78":1,"80":2}}],["decrcomponent",{"2":{"119":2}}],["decr",{"2":{"119":2}}],["dec",{"2":{"116":8}}],["detail",{"2":{"318":6,"319":10}}],["detach",{"2":{"112":2}}],["detected",{"2":{"311":2,"315":2}}],["detectchanges",{"2":{"112":3}}],["destoryed",{"2":{"555":2}}],["destory",{"2":{"113":2}}],["dest",{"2":{"61":2}}],["destination",{"2":{"46":2,"396":2}}],["destroy",{"2":{"42":2,"113":2,"577":2}}],["descriptions",{"2":{"609":12}}],["descriptionsitem",{"2":{"609":1}}],["descriptor",{"2":{"426":2}}],["descendants",{"2":{"106":3}}],["desc",{"2":{"11":2,"13":2}}],["demo",{"2":{"15":2,"137":1,"145":4}}],["dburi",{"2":{"13":4}}],["db",{"2":{"1":4,"2":6,"4":24,"5":10,"6":8,"7":7,"13":6,"34":4,"35":2,"36":4,"37":4,"38":4}}],["dbs",{"2":{"1":2}}],["二是",{"2":{"524":1}}],["二叉搜索树的插入和查找",{"0":{"300":1}}],["二叉树三种遍历方式",{"2":{"299":1}}],["二叉树的遍历",{"0":{"299":1}}],["二楞1",{"2":{"5":2}}],["二楞",{"2":{"5":2}}],["二",{"0":{"1":1,"18":1,"48":1,"83":1,"138":1,"304":1,"323":1,"327":1,"401":1,"406":1,"415":1,"451":1,"457":1,"580":1},"1":{"84":1,"85":1,"86":1,"87":1,"88":1,"89":1,"90":1,"91":1,"92":1,"93":1,"94":1,"95":1,"96":1,"139":1,"140":1,"141":1,"142":1,"143":1,"144":1,"145":1,"146":1,"147":1,"416":1,"417":1,"418":1,"419":1,"420":1,"421":1,"422":1,"423":1},"2":{"302":6}}],["高效做法",{"2":{"243":2}}],["高阶函数之",{"0":{"376":1,"386":1},"1":{"377":1,"378":1,"379":1,"380":1,"381":1,"382":1,"383":1,"384":1,"385":1,"387":1,"388":1,"389":1}}],["高阶函数之map",{"0":{"366":1},"1":{"367":1,"368":1,"369":1,"370":1,"371":1,"372":1,"373":1,"374":1,"375":1}}],["高阶函数之filter",{"0":{"358":1},"1":{"359":1,"360":1,"361":1,"362":1,"363":1,"364":1,"365":1}}],["高阶函数",{"2":{"146":1}}],["高可用性",{"2":{"0":1}}],["高性能",{"2":{"0":1}}],["一键复制",{"0":{"574":1}}],["一是",{"2":{"524":1}}],["一方面会导致繁忙的主线程白白的消耗时间",{"2":{"447":1}}],["一败涂地",{"2":{"303":2,"307":4,"308":2}}],["一十",{"2":{"302":2}}],["一修改就是修改所有实例的原型",{"2":{"275":1}}],["一些巧妙的技巧",{"2":{"181":1}}],["一定是数字运算",{"2":{"510":2}}],["一定会引起",{"2":{"466":1}}],["一定注意区分",{"2":{"137":1}}],["一定要在路由之前注册中间件",{"2":{"29":1}}],["一段组价默认的内容",{"2":{"114":4}}],["一段父组件传入的内容",{"2":{"114":4}}],["一段提示",{"2":{"113":2}}],["一段文字",{"2":{"91":2,"121":6}}],["一行文字",{"2":{"87":2}}],["一般来说",{"2":{"573":1}}],["一般我们都不会配置base属性",{"2":{"572":1}}],["一般会进行以下几步",{"2":{"450":1}}],["一般在这个钩子中做一些收尾的事",{"2":{"147":4}}],["一般在这个钩子中做一些初始化的事",{"2":{"147":4}}],["一般对象",{"2":{"137":1}}],["一般指定信号名",{"2":{"61":2}}],["一般语句为",{"2":{"61":2}}],["一次性删除多个再运行的",{"2":{"56":1}}],["一次性删除多个再运行的docker",{"2":{"56":1}}],["一次镜像",{"2":{"47":1}}],["一个没找到则返回",{"2":{"509":2}}],["一个进程中至少包含一个线程",{"2":{"443":1}}],["一个",{"2":{"347":2}}],["一个或多个",{"2":{"347":2}}],["一个表达式会产生一个值",{"2":{"137":1}}],["一个组件只能被一个模块声名",{"2":{"79":2}}],["一个镜像可以创建多个容器",{"2":{"49":1}}],["一个只读的模板",{"2":{"49":1}}],["一",{"0":{"0":1,"16":1,"47":1,"69":1,"77":1,"136":1,"159":1,"303":1,"322":1,"326":1,"398":1,"404":1,"414":1,"450":1,"456":1,"579":1},"1":{"17":1,"70":1,"71":1,"72":1,"78":1,"79":1,"80":1,"81":1,"82":1,"137":1,"399":1,"400":1,"405":1},"2":{"302":6}}]],"serializationVersion":2}';export{t as default};
diff --git a/assets/chunks/DemoWrap.1b6e7adf.js b/assets/chunks/DemoWrap.1b6e7adf.js
new file mode 100644
index 00000000..9fe2df7e
--- /dev/null
+++ b/assets/chunks/DemoWrap.1b6e7adf.js
@@ -0,0 +1 @@
+import{d,g as u,h as m,a7 as i,C as f,o as a,c as r,k,e as n,H as v,w as c,b as h,a as g,r as y,a8 as C,t as B,_ as b}from"./framework.c53372a0.js";const x={key:0,class:"demo-source-link"},D={key:1,class:"error"},$="https://github.com/fxzer/zerdocs/blob/master/docs",L=d({__name:"DemoWrap",props:{pkg:{},path:{}},setup(l){const e=l,t=u(()=>e.pkg&&e.path?`/${e.pkg}/${e.path}`:""),o=m(null);i(s=>{o.value=s});const p=`${$}${t.value}`;return(s,N)=>{const _=f("ClientOnly");return a(),r("div",{key:t.value,class:"demo wide"},[t.value?(a(),r("p",x,[k("a",{href:p,target:"_blank"},"源码地址")])):n("",!0),v(_,null,{default:c(()=>[(a(),h(C,null,{fallback:c(()=>[g(" Loading demo... ")]),default:c(()=>[y(s.$slots,"default",{},void 0,!0)]),_:3}))]),_:3}),o.value?(a(),r("div",D,B(o.value),1)):n("",!0)])}}});const w=b(L,[["__scopeId","data-v-9caf4c6f"]]);export{w as D};
diff --git a/assets/chunks/VPLocalSearchBox.0bede1e4.js b/assets/chunks/VPLocalSearchBox.0bede1e4.js
new file mode 100644
index 00000000..7cbad3da
--- /dev/null
+++ b/assets/chunks/VPLocalSearchBox.0bede1e4.js
@@ -0,0 +1,7 @@
+import{X as pt,h as ie,x as Be,ao as kt,ap as Nt,d as It,E as be,aq as et,g as we,ar as Dt,as as _t,y as Ot,at as Rt,j as De,O as de,V as xe,au as Mt,S as Lt,U as Pt,av as zt,Y as Bt,s as Vt,aw as $t,o as X,b as Wt,k as F,a1 as Kt,l as U,a4 as jt,a5 as Jt,ax as Ut,c as te,n as tt,e as Fe,D as rt,F as at,a as he,t as ve,ay as Ht,p as Gt,m as Qt,az as nt,aA as qt,ae as Yt,ak as Zt,_ as Xt}from"./framework.c53372a0.js";import{u as er,c as tr}from"./theme.1e9d2528.js";const rr={root:()=>pt(()=>import("./@localSearchIndexroot.20abec5d.js"),[])};/*!
+* tabbable 6.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/var yt=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[href]:not([inert])","button:not([inert])","[tabindex]:not(slot):not([inert])","audio[controls]:not([inert])","video[controls]:not([inert])",'[contenteditable]:not([contenteditable="false"]):not([inert])',"details>summary:first-of-type:not([inert])","details:not([inert])"],Ae=yt.join(","),mt=typeof Element>"u",se=mt?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,Ce=!mt&&Element.prototype.getRootNode?function(o){var e;return o==null||(e=o.getRootNode)===null||e===void 0?void 0:e.call(o)}:function(o){return o==null?void 0:o.ownerDocument},Te=function o(e,t){var r;t===void 0&&(t=!0);var n=e==null||(r=e.getAttribute)===null||r===void 0?void 0:r.call(e,"inert"),a=n===""||n==="true",i=a||t&&e&&o(e.parentNode);return i},ar=function(e){var t,r=e==null||(t=e.getAttribute)===null||t===void 0?void 0:t.call(e,"contenteditable");return r===""||r==="true"},gt=function(e,t,r){if(Te(e))return[];var n=Array.prototype.slice.apply(e.querySelectorAll(Ae));return t&&se.call(e,Ae)&&n.unshift(e),n=n.filter(r),n},bt=function o(e,t,r){for(var n=[],a=Array.from(e);a.length;){var i=a.shift();if(!Te(i,!1))if(i.tagName==="SLOT"){var s=i.assignedElements(),u=s.length?s:i.children,l=o(u,!0,r);r.flatten?n.push.apply(n,l):n.push({scopeParent:i,candidates:l})}else{var d=se.call(i,Ae);d&&r.filter(i)&&(t||!e.includes(i))&&n.push(i);var h=i.shadowRoot||typeof r.getShadowRoot=="function"&&r.getShadowRoot(i),v=!Te(h,!1)&&(!r.shadowRootFilter||r.shadowRootFilter(i));if(h&&v){var m=o(h===!0?i.children:h.children,!0,r);r.flatten?n.push.apply(n,m):n.push({scopeParent:i,candidates:m})}else a.unshift.apply(a,i.children)}}return n},wt=function(e){return!isNaN(parseInt(e.getAttribute("tabindex"),10))},oe=function(e){if(!e)throw new Error("No node provided");return e.tabIndex<0&&(/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||ar(e))&&!wt(e)?0:e.tabIndex},nr=function(e,t){var r=oe(e);return r<0&&t&&!wt(e)?0:r},ir=function(e,t){return e.tabIndex===t.tabIndex?e.documentOrder-t.documentOrder:e.tabIndex-t.tabIndex},xt=function(e){return e.tagName==="INPUT"},or=function(e){return xt(e)&&e.type==="hidden"},sr=function(e){var t=e.tagName==="DETAILS"&&Array.prototype.slice.apply(e.children).some(function(r){return r.tagName==="SUMMARY"});return t},ur=function(e,t){for(var r=0;r<e.length;r++)if(e[r].checked&&e[r].form===t)return e[r]},lr=function(e){if(!e.name)return!0;var t=e.form||Ce(e),r=function(s){return t.querySelectorAll('input[type="radio"][name="'+s+'"]')},n;if(typeof window<"u"&&typeof window.CSS<"u"&&typeof window.CSS.escape=="function")n=r(window.CSS.escape(e.name));else try{n=r(e.name)}catch(i){return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s",i.message),!1}var a=ur(n,e.form);return!a||a===e},cr=function(e){return xt(e)&&e.type==="radio"},fr=function(e){return cr(e)&&!lr(e)},dr=function(e){var t,r=e&&Ce(e),n=(t=r)===null||t===void 0?void 0:t.host,a=!1;if(r&&r!==e){var i,s,u;for(a=!!((i=n)!==null&&i!==void 0&&(s=i.ownerDocument)!==null&&s!==void 0&&s.contains(n)||e!=null&&(u=e.ownerDocument)!==null&&u!==void 0&&u.contains(e));!a&&n;){var l,d,h;r=Ce(n),n=(l=r)===null||l===void 0?void 0:l.host,a=!!((d=n)!==null&&d!==void 0&&(h=d.ownerDocument)!==null&&h!==void 0&&h.contains(n))}}return a},it=function(e){var t=e.getBoundingClientRect(),r=t.width,n=t.height;return r===0&&n===0},hr=function(e,t){var r=t.displayCheck,n=t.getShadowRoot;if(getComputedStyle(e).visibility==="hidden")return!0;var a=se.call(e,"details>summary:first-of-type"),i=a?e.parentElement:e;if(se.call(i,"details:not([open]) *"))return!0;if(!r||r==="full"||r==="legacy-full"){if(typeof n=="function"){for(var s=e;e;){var u=e.parentElement,l=Ce(e);if(u&&!u.shadowRoot&&n(u)===!0)return it(e);e.assignedSlot?e=e.assignedSlot:!u&&l!==e.ownerDocument?e=l.host:e=u}e=s}if(dr(e))return!e.getClientRects().length;if(r!=="legacy-full")return!0}else if(r==="non-zero-area")return it(e);return!1},vr=function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var t=e.parentElement;t;){if(t.tagName==="FIELDSET"&&t.disabled){for(var r=0;r<t.children.length;r++){var n=t.children.item(r);if(n.tagName==="LEGEND")return se.call(t,"fieldset[disabled] *")?!0:!n.contains(e)}return!0}t=t.parentElement}return!1},ke=function(e,t){return!(t.disabled||Te(t)||or(t)||hr(t,e)||sr(t)||vr(t))},Ve=function(e,t){return!(fr(t)||oe(t)<0||!ke(e,t))},pr=function(e){var t=parseInt(e.getAttribute("tabindex"),10);return!!(isNaN(t)||t>=0)},yr=function o(e){var t=[],r=[];return e.forEach(function(n,a){var i=!!n.scopeParent,s=i?n.scopeParent:n,u=nr(s,i),l=i?o(n.candidates):s;u===0?i?t.push.apply(t,l):t.push(s):r.push({documentOrder:a,tabIndex:u,item:n,isScope:i,content:l})}),r.sort(ir).reduce(function(n,a){return a.isScope?n.push.apply(n,a.content):n.push(a.content),n},[]).concat(t)},mr=function(e,t){t=t||{};var r;return t.getShadowRoot?r=bt([e],t.includeContainer,{filter:Ve.bind(null,t),flatten:!1,getShadowRoot:t.getShadowRoot,shadowRootFilter:pr}):r=gt(e,t.includeContainer,Ve.bind(null,t)),yr(r)},gr=function(e,t){t=t||{};var r;return t.getShadowRoot?r=bt([e],t.includeContainer,{filter:ke.bind(null,t),flatten:!0,getShadowRoot:t.getShadowRoot}):r=gt(e,t.includeContainer,ke.bind(null,t)),r},ue=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return se.call(e,Ae)===!1?!1:Ve(t,e)},br=yt.concat("iframe").join(","),_e=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return se.call(e,br)===!1?!1:ke(t,e)};/*!
+* focus-trap 7.5.4
+* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
+*/function ot(o,e){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(o);e&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable})),t.push.apply(t,r)}return t}function st(o){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?ot(Object(t),!0).forEach(function(r){wr(o,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):ot(Object(t)).forEach(function(r){Object.defineProperty(o,r,Object.getOwnPropertyDescriptor(t,r))})}return o}function wr(o,e,t){return e=Fr(e),e in o?Object.defineProperty(o,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):o[e]=t,o}function xr(o,e){if(typeof o!="object"||o===null)return o;var t=o[Symbol.toPrimitive];if(t!==void 0){var r=t.call(o,e||"default");if(typeof r!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(o)}function Fr(o){var e=xr(o,"string");return typeof e=="symbol"?e:String(e)}var ut={activateTrap:function(e,t){if(e.length>0){var r=e[e.length-1];r!==t&&r.pause()}var n=e.indexOf(t);n===-1||e.splice(n,1),e.push(t)},deactivateTrap:function(e,t){var r=e.indexOf(t);r!==-1&&e.splice(r,1),e.length>0&&e[e.length-1].unpause()}},Er=function(e){return e.tagName&&e.tagName.toLowerCase()==="input"&&typeof e.select=="function"},Sr=function(e){return(e==null?void 0:e.key)==="Escape"||(e==null?void 0:e.key)==="Esc"||(e==null?void 0:e.keyCode)===27},me=function(e){return(e==null?void 0:e.key)==="Tab"||(e==null?void 0:e.keyCode)===9},Ar=function(e){return me(e)&&!e.shiftKey},Cr=function(e){return me(e)&&e.shiftKey},lt=function(e){return setTimeout(e,0)},ct=function(e,t){var r=-1;return e.every(function(n,a){return t(n)?(r=a,!1):!0}),r},pe=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return typeof e=="function"?e.apply(void 0,r):e},Ee=function(e){return e.target.shadowRoot&&typeof e.composedPath=="function"?e.composedPath()[0]:e.target},Tr=[],kr=function(e,t){var r=(t==null?void 0:t.document)||document,n=(t==null?void 0:t.trapStack)||Tr,a=st({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:Ar,isKeyBackward:Cr},t),i={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0,recentNavEvent:void 0},s,u=function(c,f,p){return c&&c[f]!==void 0?c[f]:a[p||f]},l=function(c,f){var p=typeof(f==null?void 0:f.composedPath)=="function"?f.composedPath():void 0;return i.containerGroups.findIndex(function(N){var k=N.container,M=N.tabbableNodes;return k.contains(c)||(p==null?void 0:p.includes(k))||M.find(function(z){return z===c})})},d=function(c){var f=a[c];if(typeof f=="function"){for(var p=arguments.length,N=new Array(p>1?p-1:0),k=1;k<p;k++)N[k-1]=arguments[k];f=f.apply(void 0,N)}if(f===!0&&(f=void 0),!f){if(f===void 0||f===!1)return f;throw new Error("`".concat(c,"` was specified but was not a node, or did not return a node"))}var M=f;if(typeof f=="string"&&(M=r.querySelector(f),!M))throw new Error("`".concat(c,"` as selector refers to no known node"));return M},h=function(){var c=d("initialFocus");if(c===!1)return!1;if(c===void 0||!_e(c,a.tabbableOptions))if(l(r.activeElement)>=0)c=r.activeElement;else{var f=i.tabbableGroups[0],p=f&&f.firstTabbableNode;c=p||d("fallbackFocus")}if(!c)throw new Error("Your focus-trap needs to have at least one focusable element");return c},v=function(){if(i.containerGroups=i.containers.map(function(c){var f=mr(c,a.tabbableOptions),p=gr(c,a.tabbableOptions),N=f.length>0?f[0]:void 0,k=f.length>0?f[f.length-1]:void 0,M=p.find(function(w){return ue(w)}),z=p.slice().reverse().find(function(w){return ue(w)}),y=!!f.find(function(w){return oe(w)>0});return{container:c,tabbableNodes:f,focusableNodes:p,posTabIndexesFound:y,firstTabbableNode:N,lastTabbableNode:k,firstDomTabbableNode:M,lastDomTabbableNode:z,nextTabbableNode:function(B){var G=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0,K=f.indexOf(B);return K<0?G?p.slice(p.indexOf(B)+1).find(function(j){return ue(j)}):p.slice(0,p.indexOf(B)).reverse().find(function(j){return ue(j)}):f[K+(G?1:-1)]}}}),i.tabbableGroups=i.containerGroups.filter(function(c){return c.tabbableNodes.length>0}),i.tabbableGroups.length<=0&&!d("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(i.containerGroups.find(function(c){return c.posTabIndexesFound})&&i.containerGroups.length>1)throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},m=function x(c){var f=c.activeElement;if(f)return f.shadowRoot&&f.shadowRoot.activeElement!==null?x(f.shadowRoot):f},b=function x(c){if(c!==!1&&c!==m(document)){if(!c||!c.focus){x(h());return}c.focus({preventScroll:!!a.preventScroll}),i.mostRecentlyFocusedNode=c,Er(c)&&c.select()}},E=function(c){var f=d("setReturnFocus",c);return f||(f===!1?!1:c)},g=function(c){var f=c.target,p=c.event,N=c.isBackward,k=N===void 0?!1:N;f=f||Ee(p),v();var M=null;if(i.tabbableGroups.length>0){var z=l(f,p),y=z>=0?i.containerGroups[z]:void 0;if(z<0)k?M=i.tabbableGroups[i.tabbableGroups.length-1].lastTabbableNode:M=i.tabbableGroups[0].firstTabbableNode;else if(k){var w=ct(i.tabbableGroups,function(J){var Q=J.firstTabbableNode;return f===Q});if(w<0&&(y.container===f||_e(f,a.tabbableOptions)&&!ue(f,a.tabbableOptions)&&!y.nextTabbableNode(f,!1))&&(w=z),w>=0){var B=w===0?i.tabbableGroups.length-1:w-1,G=i.tabbableGroups[B];M=oe(f)>=0?G.lastTabbableNode:G.lastDomTabbableNode}else me(p)||(M=y.nextTabbableNode(f,!1))}else{var K=ct(i.tabbableGroups,function(J){var Q=J.lastTabbableNode;return f===Q});if(K<0&&(y.container===f||_e(f,a.tabbableOptions)&&!ue(f,a.tabbableOptions)&&!y.nextTabbableNode(f))&&(K=z),K>=0){var j=K===i.tabbableGroups.length-1?0:K+1,V=i.tabbableGroups[j];M=oe(f)>=0?V.firstTabbableNode:V.firstDomTabbableNode}else me(p)||(M=y.nextTabbableNode(f))}}else M=d("fallbackFocus");return M},S=function(c){var f=Ee(c);if(!(l(f,c)>=0)){if(pe(a.clickOutsideDeactivates,c)){s.deactivate({returnFocus:a.returnFocusOnDeactivate});return}pe(a.allowOutsideClick,c)||c.preventDefault()}},T=function(c){var f=Ee(c),p=l(f,c)>=0;if(p||f instanceof Document)p&&(i.mostRecentlyFocusedNode=f);else{c.stopImmediatePropagation();var N,k=!0;if(i.mostRecentlyFocusedNode)if(oe(i.mostRecentlyFocusedNode)>0){var M=l(i.mostRecentlyFocusedNode),z=i.containerGroups[M].tabbableNodes;if(z.length>0){var y=z.findIndex(function(w){return w===i.mostRecentlyFocusedNode});y>=0&&(a.isKeyForward(i.recentNavEvent)?y+1<z.length&&(N=z[y+1],k=!1):y-1>=0&&(N=z[y-1],k=!1))}}else i.containerGroups.some(function(w){return w.tabbableNodes.some(function(B){return oe(B)>0})})||(k=!1);else k=!1;k&&(N=g({target:i.mostRecentlyFocusedNode,isBackward:a.isKeyBackward(i.recentNavEvent)})),b(N||i.mostRecentlyFocusedNode||h())}i.recentNavEvent=void 0},C=function(c){var f=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1;i.recentNavEvent=c;var p=g({event:c,isBackward:f});p&&(me(c)&&c.preventDefault(),b(p))},R=function(c){if(Sr(c)&&pe(a.escapeDeactivates,c)!==!1){c.preventDefault(),s.deactivate();return}(a.isKeyForward(c)||a.isKeyBackward(c))&&C(c,a.isKeyBackward(c))},L=function(c){var f=Ee(c);l(f,c)>=0||pe(a.clickOutsideDeactivates,c)||pe(a.allowOutsideClick,c)||(c.preventDefault(),c.stopImmediatePropagation())},P=function(){if(i.active)return ut.activateTrap(n,s),i.delayInitialFocusTimer=a.delayInitialFocus?lt(function(){b(h())}):b(h()),r.addEventListener("focusin",T,!0),r.addEventListener("mousedown",S,{capture:!0,passive:!1}),r.addEventListener("touchstart",S,{capture:!0,passive:!1}),r.addEventListener("click",L,{capture:!0,passive:!1}),r.addEventListener("keydown",R,{capture:!0,passive:!1}),s},I=function(){if(i.active)return r.removeEventListener("focusin",T,!0),r.removeEventListener("mousedown",S,!0),r.removeEventListener("touchstart",S,!0),r.removeEventListener("click",L,!0),r.removeEventListener("keydown",R,!0),s},A=function(c){var f=c.some(function(p){var N=Array.from(p.removedNodes);return N.some(function(k){return k===i.mostRecentlyFocusedNode})});f&&b(h())},_=typeof window<"u"&&"MutationObserver"in window?new MutationObserver(A):void 0,O=function(){_&&(_.disconnect(),i.active&&!i.paused&&i.containers.map(function(c){_.observe(c,{subtree:!0,childList:!0})}))};return s={get active(){return i.active},get paused(){return i.paused},activate:function(c){if(i.active)return this;var f=u(c,"onActivate"),p=u(c,"onPostActivate"),N=u(c,"checkCanFocusTrap");N||v(),i.active=!0,i.paused=!1,i.nodeFocusedBeforeActivation=r.activeElement,f==null||f();var k=function(){N&&v(),P(),O(),p==null||p()};return N?(N(i.containers.concat()).then(k,k),this):(k(),this)},deactivate:function(c){if(!i.active)return this;var f=st({onDeactivate:a.onDeactivate,onPostDeactivate:a.onPostDeactivate,checkCanReturnFocus:a.checkCanReturnFocus},c);clearTimeout(i.delayInitialFocusTimer),i.delayInitialFocusTimer=void 0,I(),i.active=!1,i.paused=!1,O(),ut.deactivateTrap(n,s);var p=u(f,"onDeactivate"),N=u(f,"onPostDeactivate"),k=u(f,"checkCanReturnFocus"),M=u(f,"returnFocus","returnFocusOnDeactivate");p==null||p();var z=function(){lt(function(){M&&b(E(i.nodeFocusedBeforeActivation)),N==null||N()})};return M&&k?(k(E(i.nodeFocusedBeforeActivation)).then(z,z),this):(z(),this)},pause:function(c){if(i.paused||!i.active)return this;var f=u(c,"onPause"),p=u(c,"onPostPause");return i.paused=!0,f==null||f(),I(),O(),p==null||p(),this},unpause:function(c){if(!i.paused||!i.active)return this;var f=u(c,"onUnpause"),p=u(c,"onPostUnpause");return i.paused=!1,f==null||f(),v(),P(),O(),p==null||p(),this},updateContainerElements:function(c){var f=[].concat(c).filter(Boolean);return i.containers=f.map(function(p){return typeof p=="string"?r.querySelector(p):p}),i.active&&v(),O(),this}},s.updateContainerElements(e),s};function Nr(o,e={}){let t;const{immediate:r,...n}=e,a=ie(!1),i=ie(!1),s=h=>t&&t.activate(h),u=h=>t&&t.deactivate(h),l=()=>{t&&(t.pause(),i.value=!0)},d=()=>{t&&(t.unpause(),i.value=!1)};return Be(()=>kt(o),h=>{h&&(t=kr(h,{...n,onActivate(){a.value=!0,e.onActivate&&e.onActivate()},onDeactivate(){a.value=!1,e.onDeactivate&&e.onDeactivate()}}),r&&s())},{flush:"post"}),Nt(()=>u()),{hasFocus:a,isPaused:i,activate:s,deactivate:u,pause:l,unpause:d}}class ce{constructor(e,t=!0,r=[],n=5e3){this.ctx=e,this.iframes=t,this.exclude=r,this.iframesTimeout=n}static matches(e,t){const r=typeof t=="string"?[t]:t,n=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.oMatchesSelector||e.webkitMatchesSelector;if(n){let a=!1;return r.every(i=>n.call(e,i)?(a=!0,!1):!0),a}else return!1}getContexts(){let e,t=[];return typeof this.ctx>"u"||!this.ctx?e=[]:NodeList.prototype.isPrototypeOf(this.ctx)?e=Array.prototype.slice.call(this.ctx):Array.isArray(this.ctx)?e=this.ctx:typeof this.ctx=="string"?e=Array.prototype.slice.call(document.querySelectorAll(this.ctx)):e=[this.ctx],e.forEach(r=>{const n=t.filter(a=>a.contains(r)).length>0;t.indexOf(r)===-1&&!n&&t.push(r)}),t}getIframeContents(e,t,r=()=>{}){let n;try{const a=e.contentWindow;if(n=a.document,!a||!n)throw new Error("iframe inaccessible")}catch{r()}n&&t(n)}isIframeBlank(e){const t="about:blank",r=e.getAttribute("src").trim();return e.contentWindow.location.href===t&&r!==t&&r}observeIframeLoad(e,t,r){let n=!1,a=null;const i=()=>{if(!n){n=!0,clearTimeout(a);try{this.isIframeBlank(e)||(e.removeEventListener("load",i),this.getIframeContents(e,t,r))}catch{r()}}};e.addEventListener("load",i),a=setTimeout(i,this.iframesTimeout)}onIframeReady(e,t,r){try{e.contentWindow.document.readyState==="complete"?this.isIframeBlank(e)?this.observeIframeLoad(e,t,r):this.getIframeContents(e,t,r):this.observeIframeLoad(e,t,r)}catch{r()}}waitForIframes(e,t){let r=0;this.forEachIframe(e,()=>!0,n=>{r++,this.waitForIframes(n.querySelector("html"),()=>{--r||t()})},n=>{n||t()})}forEachIframe(e,t,r,n=()=>{}){let a=e.querySelectorAll("iframe"),i=a.length,s=0;a=Array.prototype.slice.call(a);const u=()=>{--i<=0&&n(s)};i||u(),a.forEach(l=>{ce.matches(l,this.exclude)?u():this.onIframeReady(l,d=>{t(l)&&(s++,r(d)),u()},u)})}createIterator(e,t,r){return document.createNodeIterator(e,t,r,!1)}createInstanceOnIframe(e){return new ce(e.querySelector("html"),this.iframes)}compareNodeIframe(e,t,r){const n=e.compareDocumentPosition(r),a=Node.DOCUMENT_POSITION_PRECEDING;if(n&a)if(t!==null){const i=t.compareDocumentPosition(r),s=Node.DOCUMENT_POSITION_FOLLOWING;if(i&s)return!0}else return!0;return!1}getIteratorNode(e){const t=e.previousNode();let r;return t===null?r=e.nextNode():r=e.nextNode()&&e.nextNode(),{prevNode:t,node:r}}checkIframeFilter(e,t,r,n){let a=!1,i=!1;return n.forEach((s,u)=>{s.val===r&&(a=u,i=s.handled)}),this.compareNodeIframe(e,t,r)?(a===!1&&!i?n.push({val:r,handled:!0}):a!==!1&&!i&&(n[a].handled=!0),!0):(a===!1&&n.push({val:r,handled:!1}),!1)}handleOpenIframes(e,t,r,n){e.forEach(a=>{a.handled||this.getIframeContents(a.val,i=>{this.createInstanceOnIframe(i).forEachNode(t,r,n)})})}iterateThroughNodes(e,t,r,n,a){const i=this.createIterator(t,e,n);let s=[],u=[],l,d,h=()=>({prevNode:d,node:l}=this.getIteratorNode(i),l);for(;h();)this.iframes&&this.forEachIframe(t,v=>this.checkIframeFilter(l,d,v,s),v=>{this.createInstanceOnIframe(v).forEachNode(e,m=>u.push(m),n)}),u.push(l);u.forEach(v=>{r(v)}),this.iframes&&this.handleOpenIframes(s,e,r,n),a()}forEachNode(e,t,r,n=()=>{}){const a=this.getContexts();let i=a.length;i||n(),a.forEach(s=>{const u=()=>{this.iterateThroughNodes(e,s,t,r,()=>{--i<=0&&n()})};this.iframes?this.waitForIframes(s,u):u()})}}let Ir=class{constructor(e){this.ctx=e,this.ie=!1;const t=window.navigator.userAgent;(t.indexOf("MSIE")>-1||t.indexOf("Trident")>-1)&&(this.ie=!0)}set opt(e){this._opt=Object.assign({},{element:"",className:"",exclude:[],iframes:!1,iframesTimeout:5e3,separateWordSearch:!0,diacritics:!0,synonyms:{},accuracy:"partially",acrossElements:!1,caseSensitive:!1,ignoreJoiners:!1,ignoreGroups:0,ignorePunctuation:[],wildcards:"disabled",each:()=>{},noMatch:()=>{},filter:()=>!0,done:()=>{},debug:!1,log:window.console},e)}get opt(){return this._opt}get iterator(){return new ce(this.ctx,this.opt.iframes,this.opt.exclude,this.opt.iframesTimeout)}log(e,t="debug"){const r=this.opt.log;this.opt.debug&&typeof r=="object"&&typeof r[t]=="function"&&r[t](`mark.js: ${e}`)}escapeStr(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}createRegExp(e){return this.opt.wildcards!=="disabled"&&(e=this.setupWildcardsRegExp(e)),e=this.escapeStr(e),Object.keys(this.opt.synonyms).length&&(e=this.createSynonymsRegExp(e)),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),this.opt.diacritics&&(e=this.createDiacriticsRegExp(e)),e=this.createMergedBlanksRegExp(e),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.createJoinersRegExp(e)),this.opt.wildcards!=="disabled"&&(e=this.createWildcardsRegExp(e)),e=this.createAccuracyRegExp(e),e}createSynonymsRegExp(e){const t=this.opt.synonyms,r=this.opt.caseSensitive?"":"i",n=this.opt.ignoreJoiners||this.opt.ignorePunctuation.length?"\0":"";for(let a in t)if(t.hasOwnProperty(a)){const i=t[a],s=this.opt.wildcards!=="disabled"?this.setupWildcardsRegExp(a):this.escapeStr(a),u=this.opt.wildcards!=="disabled"?this.setupWildcardsRegExp(i):this.escapeStr(i);s!==""&&u!==""&&(e=e.replace(new RegExp(`(${this.escapeStr(s)}|${this.escapeStr(u)})`,`gm${r}`),n+`(${this.processSynomyms(s)}|${this.processSynomyms(u)})`+n))}return e}processSynomyms(e){return(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),e}setupWildcardsRegExp(e){return e=e.replace(/(?:\\)*\?/g,t=>t.charAt(0)==="\\"?"?":"
"),e.replace(/(?:\\)*\*/g,t=>t.charAt(0)==="\\"?"*":"")}createWildcardsRegExp(e){let t=this.opt.wildcards==="withSpaces";return e.replace(/\u0001/g,t?"[\\S\\s]?":"\\S?").replace(/\u0002/g,t?"[\\S\\s]*?":"\\S*")}setupIgnoreJoinersRegExp(e){return e.replace(/[^(|)\\]/g,(t,r,n)=>{let a=n.charAt(r+1);return/[(|)\\]/.test(a)||a===""?t:t+"\0"})}createJoinersRegExp(e){let t=[];const r=this.opt.ignorePunctuation;return Array.isArray(r)&&r.length&&t.push(this.escapeStr(r.join(""))),this.opt.ignoreJoiners&&t.push("\\u00ad\\u200b\\u200c\\u200d"),t.length?e.split(/\u0000+/).join(`[${t.join("")}]*`):e}createDiacriticsRegExp(e){const t=this.opt.caseSensitive?"":"i",r=this.opt.caseSensitive?["aàáảãạăằắẳẵặâầấẩẫậäåāą","AÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬÄÅĀĄ","cçćč","CÇĆČ","dđď","DĐĎ","eèéẻẽẹêềếểễệëěēę","EÈÉẺẼẸÊỀẾỂỄỆËĚĒĘ","iìíỉĩịîïī","IÌÍỈĨỊÎÏĪ","lł","LŁ","nñňń","NÑŇŃ","oòóỏõọôồốổỗộơởỡớờợöøō","OÒÓỎÕỌÔỒỐỔỖỘƠỞỠỚỜỢÖØŌ","rř","RŘ","sšśșş","SŠŚȘŞ","tťțţ","TŤȚŢ","uùúủũụưừứửữựûüůū","UÙÚỦŨỤƯỪỨỬỮỰÛÜŮŪ","yýỳỷỹỵÿ","YÝỲỶỸỴŸ","zžżź","ZŽŻŹ"]:["aàáảãạăằắẳẵặâầấẩẫậäåāąAÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬÄÅĀĄ","cçćčCÇĆČ","dđďDĐĎ","eèéẻẽẹêềếểễệëěēęEÈÉẺẼẸÊỀẾỂỄỆËĚĒĘ","iìíỉĩịîïīIÌÍỈĨỊÎÏĪ","lłLŁ","nñňńNÑŇŃ","oòóỏõọôồốổỗộơởỡớờợöøōOÒÓỎÕỌÔỒỐỔỖỘƠỞỠỚỜỢÖØŌ","rřRŘ","sšśșşSŠŚȘŞ","tťțţTŤȚŢ","uùúủũụưừứửữựûüůūUÙÚỦŨỤƯỪỨỬỮỰÛÜŮŪ","yýỳỷỹỵÿYÝỲỶỸỴŸ","zžżźZŽŻŹ"];let n=[];return e.split("").forEach(a=>{r.every(i=>{if(i.indexOf(a)!==-1){if(n.indexOf(i)>-1)return!1;e=e.replace(new RegExp(`[${i}]`,`gm${t}`),`[${i}]`),n.push(i)}return!0})}),e}createMergedBlanksRegExp(e){return e.replace(/[\s]+/gmi,"[\\s]+")}createAccuracyRegExp(e){const t="!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~¡¿";let r=this.opt.accuracy,n=typeof r=="string"?r:r.value,a=typeof r=="string"?[]:r.limiters,i="";switch(a.forEach(s=>{i+=`|${this.escapeStr(s)}`}),n){case"partially":default:return`()(${e})`;case"complementary":return i="\\s"+(i||this.escapeStr(t)),`()([^${i}]*${e}[^${i}]*)`;case"exactly":return`(^|\\s${i})(${e})(?=$|\\s${i})`}}getSeparatedKeywords(e){let t=[];return e.forEach(r=>{this.opt.separateWordSearch?r.split(" ").forEach(n=>{n.trim()&&t.indexOf(n)===-1&&t.push(n)}):r.trim()&&t.indexOf(r)===-1&&t.push(r)}),{keywords:t.sort((r,n)=>n.length-r.length),length:t.length}}isNumeric(e){return Number(parseFloat(e))==e}checkRanges(e){if(!Array.isArray(e)||Object.prototype.toString.call(e[0])!=="[object Object]")return this.log("markRanges() will only accept an array of objects"),this.opt.noMatch(e),[];const t=[];let r=0;return e.sort((n,a)=>n.start-a.start).forEach(n=>{let{start:a,end:i,valid:s}=this.callNoMatchOnInvalidRanges(n,r);s&&(n.start=a,n.length=i-a,t.push(n),r=i)}),t}callNoMatchOnInvalidRanges(e,t){let r,n,a=!1;return e&&typeof e.start<"u"?(r=parseInt(e.start,10),n=r+parseInt(e.length,10),this.isNumeric(e.start)&&this.isNumeric(e.length)&&n-t>0&&n-r>0?a=!0:(this.log(`Ignoring invalid or overlapping range: ${JSON.stringify(e)}`),this.opt.noMatch(e))):(this.log(`Ignoring invalid range: ${JSON.stringify(e)}`),this.opt.noMatch(e)),{start:r,end:n,valid:a}}checkWhitespaceRanges(e,t,r){let n,a=!0,i=r.length,s=t-i,u=parseInt(e.start,10)-s;return u=u>i?i:u,n=u+parseInt(e.length,10),n>i&&(n=i,this.log(`End range automatically set to the max value of ${i}`)),u<0||n-u<0||u>i||n>i?(a=!1,this.log(`Invalid range: ${JSON.stringify(e)}`),this.opt.noMatch(e)):r.substring(u,n).replace(/\s+/g,"")===""&&(a=!1,this.log("Skipping whitespace only range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:u,end:n,valid:a}}getTextNodes(e){let t="",r=[];this.iterator.forEachNode(NodeFilter.SHOW_TEXT,n=>{r.push({start:t.length,end:(t+=n.textContent).length,node:n})},n=>this.matchesExclude(n.parentNode)?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT,()=>{e({value:t,nodes:r})})}matchesExclude(e){return ce.matches(e,this.opt.exclude.concat(["script","style","title","head","html"]))}wrapRangeInTextNode(e,t,r){const n=this.opt.element?this.opt.element:"mark",a=e.splitText(t),i=a.splitText(r-t);let s=document.createElement(n);return s.setAttribute("data-markjs","true"),this.opt.className&&s.setAttribute("class",this.opt.className),s.textContent=a.textContent,a.parentNode.replaceChild(s,a),i}wrapRangeInMappedTextNode(e,t,r,n,a){e.nodes.every((i,s)=>{const u=e.nodes[s+1];if(typeof u>"u"||u.start>t){if(!n(i.node))return!1;const l=t-i.start,d=(r>i.end?i.end:r)-i.start,h=e.value.substr(0,i.start),v=e.value.substr(d+i.start);if(i.node=this.wrapRangeInTextNode(i.node,l,d),e.value=h+v,e.nodes.forEach((m,b)=>{b>=s&&(e.nodes[b].start>0&&b!==s&&(e.nodes[b].start-=d),e.nodes[b].end-=d)}),r-=d,a(i.node.previousSibling,i.start),r>i.end)t=i.end;else return!1}return!0})}wrapMatches(e,t,r,n,a){const i=t===0?0:t+1;this.getTextNodes(s=>{s.nodes.forEach(u=>{u=u.node;let l;for(;(l=e.exec(u.textContent))!==null&&l[i]!=="";){if(!r(l[i],u))continue;let d=l.index;if(i!==0)for(let h=1;h<i;h++)d+=l[h].length;u=this.wrapRangeInTextNode(u,d,d+l[i].length),n(u.previousSibling),e.lastIndex=0}}),a()})}wrapMatchesAcrossElements(e,t,r,n,a){const i=t===0?0:t+1;this.getTextNodes(s=>{let u;for(;(u=e.exec(s.value))!==null&&u[i]!=="";){let l=u.index;if(i!==0)for(let h=1;h<i;h++)l+=u[h].length;const d=l+u[i].length;this.wrapRangeInMappedTextNode(s,l,d,h=>r(u[i],h),(h,v)=>{e.lastIndex=v,n(h)})}a()})}wrapRangeFromIndex(e,t,r,n){this.getTextNodes(a=>{const i=a.value.length;e.forEach((s,u)=>{let{start:l,end:d,valid:h}=this.checkWhitespaceRanges(s,i,a.value);h&&this.wrapRangeInMappedTextNode(a,l,d,v=>t(v,s,a.value.substring(l,d),u),v=>{r(v,s)})}),n()})}unwrapMatches(e){const t=e.parentNode;let r=document.createDocumentFragment();for(;e.firstChild;)r.appendChild(e.removeChild(e.firstChild));t.replaceChild(r,e),this.ie?this.normalizeTextNode(t):t.normalize()}normalizeTextNode(e){if(e){if(e.nodeType===3)for(;e.nextSibling&&e.nextSibling.nodeType===3;)e.nodeValue+=e.nextSibling.nodeValue,e.parentNode.removeChild(e.nextSibling);else this.normalizeTextNode(e.firstChild);this.normalizeTextNode(e.nextSibling)}}markRegExp(e,t){this.opt=t,this.log(`Searching with expression "${e}"`);let r=0,n="wrapMatches";const a=i=>{r++,this.opt.each(i)};this.opt.acrossElements&&(n="wrapMatchesAcrossElements"),this[n](e,this.opt.ignoreGroups,(i,s)=>this.opt.filter(s,i,r),a,()=>{r===0&&this.opt.noMatch(e),this.opt.done(r)})}mark(e,t){this.opt=t;let r=0,n="wrapMatches";const{keywords:a,length:i}=this.getSeparatedKeywords(typeof e=="string"?[e]:e),s=this.opt.caseSensitive?"":"i",u=l=>{let d=new RegExp(this.createRegExp(l),`gm${s}`),h=0;this.log(`Searching with expression "${d}"`),this[n](d,1,(v,m)=>this.opt.filter(m,l,r,h),v=>{h++,r++,this.opt.each(v)},()=>{h===0&&this.opt.noMatch(l),a[i-1]===l?this.opt.done(r):u(a[a.indexOf(l)+1])})};this.opt.acrossElements&&(n="wrapMatchesAcrossElements"),i===0?this.opt.done(r):u(a[0])}markRanges(e,t){this.opt=t;let r=0,n=this.checkRanges(e);n&&n.length?(this.log("Starting to mark with the following ranges: "+JSON.stringify(n)),this.wrapRangeFromIndex(n,(a,i,s,u)=>this.opt.filter(a,i,s,u),(a,i)=>{r++,this.opt.each(a,i)},()=>{this.opt.done(r)})):this.opt.done(r)}unmark(e){this.opt=e;let t=this.opt.element?this.opt.element:"*";t+="[data-markjs]",this.opt.className&&(t+=`.${this.opt.className}`),this.log(`Removal selector "${t}"`),this.iterator.forEachNode(NodeFilter.SHOW_ELEMENT,r=>{this.unwrapMatches(r)},r=>{const n=ce.matches(r,t),a=this.matchesExclude(r);return!n||a?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT},this.opt.done)}};function Dr(o){const e=new Ir(o);return this.mark=(t,r)=>(e.mark(t,r),this),this.markRegExp=(t,r)=>(e.markRegExp(t,r),this),this.markRanges=(t,r)=>(e.markRanges(t,r),this),this.unmark=t=>(e.unmark(t),this),this}var $=function(){return $=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},$.apply(this,arguments)};function _r(o,e,t,r){function n(a){return a instanceof t?a:new t(function(i){i(a)})}return new(t||(t=Promise))(function(a,i){function s(d){try{l(r.next(d))}catch(h){i(h)}}function u(d){try{l(r.throw(d))}catch(h){i(h)}}function l(d){d.done?a(d.value):n(d.value).then(s,u)}l((r=r.apply(o,e||[])).next())})}function Or(o,e){var t={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,n,a,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol=="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(l){return function(d){return u([l,d])}}function u(l){if(r)throw new TypeError("Generator is already executing.");for(;i&&(i=0,l[0]&&(t=0)),t;)try{if(r=1,n&&(a=l[0]&2?n.return:l[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,l[1])).done)return a;switch(n=0,a&&(l=[l[0]&2,a.value]),l[0]){case 0:case 1:a=l;break;case 4:return t.label++,{value:l[1],done:!1};case 5:t.label++,n=l[1],l=[0];continue;case 7:l=t.ops.pop(),t.trys.pop();continue;default:if(a=t.trys,!(a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){t=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){t.label=l[1];break}if(l[0]===6&&t.label<a[1]){t.label=a[1],a=l;break}if(a&&t.label<a[2]){t.label=a[2],t.ops.push(l);break}a[2]&&t.ops.pop(),t.trys.pop();continue}l=e.call(o,t)}catch(d){l=[6,d],n=0}finally{r=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}}function D(o){var e=typeof Symbol=="function"&&Symbol.iterator,t=e&&o[e],r=0;if(t)return t.call(o);if(o&&typeof o.length=="number")return{next:function(){return o&&r>=o.length&&(o=void 0),{value:o&&o[r++],done:!o}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function W(o,e){var t=typeof Symbol=="function"&&o[Symbol.iterator];if(!t)return o;var r=t.call(o),n,a=[],i;try{for(;(e===void 0||e-- >0)&&!(n=r.next()).done;)a.push(n.value)}catch(s){i={error:s}}finally{try{n&&!n.done&&(t=r.return)&&t.call(r)}finally{if(i)throw i.error}}return a}var Rr="ENTRIES",Ft="KEYS",Et="VALUES",H="",Oe=function(){function o(e,t){var r=e._tree,n=Array.from(r.keys());this.set=e,this._type=t,this._path=n.length>0?[{node:r,keys:n}]:[]}return o.prototype.next=function(){var e=this.dive();return this.backtrack(),e},o.prototype.dive=function(){if(this._path.length===0)return{done:!0,value:void 0};var e=le(this._path),t=e.node,r=e.keys;if(le(r)===H)return{done:!1,value:this.result()};var n=t.get(le(r));return this._path.push({node:n,keys:Array.from(n.keys())}),this.dive()},o.prototype.backtrack=function(){if(this._path.length!==0){var e=le(this._path).keys;e.pop(),!(e.length>0)&&(this._path.pop(),this.backtrack())}},o.prototype.key=function(){return this.set._prefix+this._path.map(function(e){var t=e.keys;return le(t)}).filter(function(e){return e!==H}).join("")},o.prototype.value=function(){return le(this._path).node.get(H)},o.prototype.result=function(){switch(this._type){case Et:return this.value();case Ft:return this.key();default:return[this.key(),this.value()]}},o.prototype[Symbol.iterator]=function(){return this},o}(),le=function(o){return o[o.length-1]},Mr=function(o,e,t){var r=new Map;if(e===void 0)return r;for(var n=e.length+1,a=n+t,i=new Uint8Array(a*n).fill(t+1),s=0;s<n;++s)i[s]=s;for(var u=1;u<a;++u)i[u*n]=u;return St(o,e,t,r,i,1,n,""),r},St=function(o,e,t,r,n,a,i,s){var u,l,d=a*i;try{e:for(var h=D(o.keys()),v=h.next();!v.done;v=h.next()){var m=v.value;if(m===H){var b=n[d-1];b<=t&&r.set(s,[o.get(m),b])}else{for(var E=a,g=0;g<m.length;++g,++E){for(var S=m[g],T=i*E,C=T-i,R=n[T],L=Math.max(0,E-t-1),P=Math.min(i-1,E+t),I=L;I<P;++I){var A=S!==e[I],_=n[C+I]+ +A,O=n[C+I+1]+1,x=n[T+I]+1,c=n[T+I+1]=Math.min(_,O,x);c<R&&(R=c)}if(R>t)continue e}St(o.get(m),e,t,r,n,E,i,s+m)}}}catch(f){u={error:f}}finally{try{v&&!v.done&&(l=h.return)&&l.call(h)}finally{if(u)throw u.error}}},Re=function(){function o(e,t){e===void 0&&(e=new Map),t===void 0&&(t=""),this._size=void 0,this._tree=e,this._prefix=t}return o.prototype.atPrefix=function(e){var t,r;if(!e.startsWith(this._prefix))throw new Error("Mismatched prefix");var n=W(Ne(this._tree,e.slice(this._prefix.length)),2),a=n[0],i=n[1];if(a===void 0){var s=W(je(i),2),u=s[0],l=s[1];try{for(var d=D(u.keys()),h=d.next();!h.done;h=d.next()){var v=h.value;if(v!==H&&v.startsWith(l)){var m=new Map;return m.set(v.slice(l.length),u.get(v)),new o(m,e)}}}catch(b){t={error:b}}finally{try{h&&!h.done&&(r=d.return)&&r.call(d)}finally{if(t)throw t.error}}}return new o(a,e)},o.prototype.clear=function(){this._size=void 0,this._tree.clear()},o.prototype.delete=function(e){return this._size=void 0,Lr(this._tree,e)},o.prototype.entries=function(){return new Oe(this,Rr)},o.prototype.forEach=function(e){var t,r;try{for(var n=D(this),a=n.next();!a.done;a=n.next()){var i=W(a.value,2),s=i[0],u=i[1];e(s,u,this)}}catch(l){t={error:l}}finally{try{a&&!a.done&&(r=n.return)&&r.call(n)}finally{if(t)throw t.error}}},o.prototype.fuzzyGet=function(e,t){return Mr(this._tree,e,t)},o.prototype.get=function(e){var t=$e(this._tree,e);return t!==void 0?t.get(H):void 0},o.prototype.has=function(e){var t=$e(this._tree,e);return t!==void 0&&t.has(H)},o.prototype.keys=function(){return new Oe(this,Ft)},o.prototype.set=function(e,t){if(typeof e!="string")throw new Error("key must be a string");this._size=void 0;var r=Me(this._tree,e);return r.set(H,t),this},Object.defineProperty(o.prototype,"size",{get:function(){if(this._size)return this._size;this._size=0;for(var e=this.entries();!e.next().done;)this._size+=1;return this._size},enumerable:!1,configurable:!0}),o.prototype.update=function(e,t){if(typeof e!="string")throw new Error("key must be a string");this._size=void 0;var r=Me(this._tree,e);return r.set(H,t(r.get(H))),this},o.prototype.fetch=function(e,t){if(typeof e!="string")throw new Error("key must be a string");this._size=void 0;var r=Me(this._tree,e),n=r.get(H);return n===void 0&&r.set(H,n=t()),n},o.prototype.values=function(){return new Oe(this,Et)},o.prototype[Symbol.iterator]=function(){return this.entries()},o.from=function(e){var t,r,n=new o;try{for(var a=D(e),i=a.next();!i.done;i=a.next()){var s=W(i.value,2),u=s[0],l=s[1];n.set(u,l)}}catch(d){t={error:d}}finally{try{i&&!i.done&&(r=a.return)&&r.call(a)}finally{if(t)throw t.error}}return n},o.fromObject=function(e){return o.from(Object.entries(e))},o}(),Ne=function(o,e,t){var r,n;if(t===void 0&&(t=[]),e.length===0||o==null)return[o,t];try{for(var a=D(o.keys()),i=a.next();!i.done;i=a.next()){var s=i.value;if(s!==H&&e.startsWith(s))return t.push([o,s]),Ne(o.get(s),e.slice(s.length),t)}}catch(u){r={error:u}}finally{try{i&&!i.done&&(n=a.return)&&n.call(a)}finally{if(r)throw r.error}}return t.push([o,e]),Ne(void 0,"",t)},$e=function(o,e){var t,r;if(e.length===0||o==null)return o;try{for(var n=D(o.keys()),a=n.next();!a.done;a=n.next()){var i=a.value;if(i!==H&&e.startsWith(i))return $e(o.get(i),e.slice(i.length))}}catch(s){t={error:s}}finally{try{a&&!a.done&&(r=n.return)&&r.call(n)}finally{if(t)throw t.error}}},Me=function(o,e){var t,r,n=e.length;e:for(var a=0;o&&a<n;){try{for(var i=(t=void 0,D(o.keys())),s=i.next();!s.done;s=i.next()){var u=s.value;if(u!==H&&e[a]===u[0]){for(var l=Math.min(n-a,u.length),d=1;d<l&&e[a+d]===u[d];)++d;var h=o.get(u);if(d===u.length)o=h;else{var v=new Map;v.set(u.slice(d),h),o.set(e.slice(a,a+d),v),o.delete(u),o=v}a+=d;continue e}}}catch(b){t={error:b}}finally{try{s&&!s.done&&(r=i.return)&&r.call(i)}finally{if(t)throw t.error}}var m=new Map;return o.set(e.slice(a),m),m}return o},Lr=function(o,e){var t=W(Ne(o,e),2),r=t[0],n=t[1];if(r!==void 0){if(r.delete(H),r.size===0)At(n);else if(r.size===1){var a=W(r.entries().next().value,2),i=a[0],s=a[1];Ct(n,i,s)}}},At=function(o){if(o.length!==0){var e=W(je(o),2),t=e[0],r=e[1];if(t.delete(r),t.size===0)At(o.slice(0,-1));else if(t.size===1){var n=W(t.entries().next().value,2),a=n[0],i=n[1];a!==H&&Ct(o.slice(0,-1),a,i)}}},Ct=function(o,e,t){if(o.length!==0){var r=W(je(o),2),n=r[0],a=r[1];n.set(a+e,t),n.delete(a)}},je=function(o){return o[o.length-1]},ye,Je="or",Tt="and",Pr="and_not",zr=function(){function o(e){if((e==null?void 0:e.fields)==null)throw new Error('MiniSearch: option "fields" must be provided');var t=e.autoVacuum==null||e.autoVacuum===!0?ze:e.autoVacuum;this._options=$($($({},Pe),e),{autoVacuum:t,searchOptions:$($({},ft),e.searchOptions||{}),autoSuggestOptions:$($({},Kr),e.autoSuggestOptions||{})}),this._index=new Re,this._documentCount=0,this._documentIds=new Map,this._idToShortId=new Map,this._fieldIds={},this._fieldLength=new Map,this._avgFieldLength=[],this._nextId=0,this._storedFields=new Map,this._dirtCount=0,this._currentVacuum=null,this._enqueuedVacuum=null,this._enqueuedVacuumConditions=Ke,this.addFields(this._options.fields)}return o.prototype.add=function(e){var t,r,n,a,i,s,u=this._options,l=u.extractField,d=u.tokenize,h=u.processTerm,v=u.fields,m=u.idField,b=l(e,m);if(b==null)throw new Error('MiniSearch: document does not have ID field "'.concat(m,'"'));if(this._idToShortId.has(b))throw new Error("MiniSearch: duplicate ID ".concat(b));var E=this.addDocumentId(b);this.saveStoredFields(E,e);try{for(var g=D(v),S=g.next();!S.done;S=g.next()){var T=S.value,C=l(e,T);if(C!=null){var R=d(C.toString(),T),L=this._fieldIds[T],P=new Set(R).size;this.addFieldLength(E,L,this._documentCount-1,P);try{for(var I=(n=void 0,D(R)),A=I.next();!A.done;A=I.next()){var _=A.value,O=h(_,T);if(Array.isArray(O))try{for(var x=(i=void 0,D(O)),c=x.next();!c.done;c=x.next()){var f=c.value;this.addTerm(L,E,f)}}catch(p){i={error:p}}finally{try{c&&!c.done&&(s=x.return)&&s.call(x)}finally{if(i)throw i.error}}else O&&this.addTerm(L,E,O)}}catch(p){n={error:p}}finally{try{A&&!A.done&&(a=I.return)&&a.call(I)}finally{if(n)throw n.error}}}}}catch(p){t={error:p}}finally{try{S&&!S.done&&(r=g.return)&&r.call(g)}finally{if(t)throw t.error}}},o.prototype.addAll=function(e){var t,r;try{for(var n=D(e),a=n.next();!a.done;a=n.next()){var i=a.value;this.add(i)}}catch(s){t={error:s}}finally{try{a&&!a.done&&(r=n.return)&&r.call(n)}finally{if(t)throw t.error}}},o.prototype.addAllAsync=function(e,t){var r=this;t===void 0&&(t={});var n=t.chunkSize,a=n===void 0?10:n,i={chunk:[],promise:Promise.resolve()},s=e.reduce(function(d,h,v){var m=d.chunk,b=d.promise;return m.push(h),(v+1)%a===0?{chunk:[],promise:b.then(function(){return new Promise(function(E){return setTimeout(E,0)})}).then(function(){return r.addAll(m)})}:{chunk:m,promise:b}},i),u=s.chunk,l=s.promise;return l.then(function(){return r.addAll(u)})},o.prototype.remove=function(e){var t,r,n,a,i,s,u=this._options,l=u.tokenize,d=u.processTerm,h=u.extractField,v=u.fields,m=u.idField,b=h(e,m);if(b==null)throw new Error('MiniSearch: document does not have ID field "'.concat(m,'"'));var E=this._idToShortId.get(b);if(E==null)throw new Error("MiniSearch: cannot remove document with ID ".concat(b,": it is not in the index"));try{for(var g=D(v),S=g.next();!S.done;S=g.next()){var T=S.value,C=h(e,T);if(C!=null){var R=l(C.toString(),T),L=this._fieldIds[T],P=new Set(R).size;this.removeFieldLength(E,L,this._documentCount,P);try{for(var I=(n=void 0,D(R)),A=I.next();!A.done;A=I.next()){var _=A.value,O=d(_,T);if(Array.isArray(O))try{for(var x=(i=void 0,D(O)),c=x.next();!c.done;c=x.next()){var f=c.value;this.removeTerm(L,E,f)}}catch(p){i={error:p}}finally{try{c&&!c.done&&(s=x.return)&&s.call(x)}finally{if(i)throw i.error}}else O&&this.removeTerm(L,E,O)}}catch(p){n={error:p}}finally{try{A&&!A.done&&(a=I.return)&&a.call(I)}finally{if(n)throw n.error}}}}}catch(p){t={error:p}}finally{try{S&&!S.done&&(r=g.return)&&r.call(g)}finally{if(t)throw t.error}}this._storedFields.delete(E),this._documentIds.delete(E),this._idToShortId.delete(b),this._fieldLength.delete(E),this._documentCount-=1},o.prototype.removeAll=function(e){var t,r;if(e)try{for(var n=D(e),a=n.next();!a.done;a=n.next()){var i=a.value;this.remove(i)}}catch(s){t={error:s}}finally{try{a&&!a.done&&(r=n.return)&&r.call(n)}finally{if(t)throw t.error}}else{if(arguments.length>0)throw new Error("Expected documents to be present. Omit the argument to remove all documents.");this._index=new Re,this._documentCount=0,this._documentIds=new Map,this._idToShortId=new Map,this._fieldLength=new Map,this._avgFieldLength=[],this._storedFields=new Map,this._nextId=0}},o.prototype.discard=function(e){var t=this,r=this._idToShortId.get(e);if(r==null)throw new Error("MiniSearch: cannot discard document with ID ".concat(e,": it is not in the index"));this._idToShortId.delete(e),this._documentIds.delete(r),this._storedFields.delete(r),(this._fieldLength.get(r)||[]).forEach(function(n,a){t.removeFieldLength(r,a,t._documentCount,n)}),this._fieldLength.delete(r),this._documentCount-=1,this._dirtCount+=1,this.maybeAutoVacuum()},o.prototype.maybeAutoVacuum=function(){if(this._options.autoVacuum!==!1){var e=this._options.autoVacuum,t=e.minDirtFactor,r=e.minDirtCount,n=e.batchSize,a=e.batchWait;this.conditionalVacuum({batchSize:n,batchWait:a},{minDirtCount:r,minDirtFactor:t})}},o.prototype.discardAll=function(e){var t,r,n=this._options.autoVacuum;try{this._options.autoVacuum=!1;try{for(var a=D(e),i=a.next();!i.done;i=a.next()){var s=i.value;this.discard(s)}}catch(u){t={error:u}}finally{try{i&&!i.done&&(r=a.return)&&r.call(a)}finally{if(t)throw t.error}}}finally{this._options.autoVacuum=n}this.maybeAutoVacuum()},o.prototype.replace=function(e){var t=this._options,r=t.idField,n=t.extractField,a=n(e,r);this.discard(a),this.add(e)},o.prototype.vacuum=function(e){return e===void 0&&(e={}),this.conditionalVacuum(e)},o.prototype.conditionalVacuum=function(e,t){var r=this;return this._currentVacuum?(this._enqueuedVacuumConditions=this._enqueuedVacuumConditions&&t,this._enqueuedVacuum!=null?this._enqueuedVacuum:(this._enqueuedVacuum=this._currentVacuum.then(function(){var n=r._enqueuedVacuumConditions;return r._enqueuedVacuumConditions=Ke,r.performVacuuming(e,n)}),this._enqueuedVacuum)):this.vacuumConditionsMet(t)===!1?Promise.resolve():(this._currentVacuum=this.performVacuuming(e),this._currentVacuum)},o.prototype.performVacuuming=function(e,t){return _r(this,void 0,void 0,function(){var r,n,a,i,s,u,l,d,h,v,m,b,E,g,S,T,C,R,L,P,I,A,_,O,x;return Or(this,function(c){switch(c.label){case 0:if(r=this._dirtCount,!this.vacuumConditionsMet(t))return[3,10];n=e.batchSize||We.batchSize,a=e.batchWait||We.batchWait,i=1,c.label=1;case 1:c.trys.push([1,7,8,9]),s=D(this._index),u=s.next(),c.label=2;case 2:if(u.done)return[3,6];l=W(u.value,2),d=l[0],h=l[1];try{for(v=(A=void 0,D(h)),m=v.next();!m.done;m=v.next()){b=W(m.value,2),E=b[0],g=b[1];try{for(S=(O=void 0,D(g)),T=S.next();!T.done;T=S.next())C=W(T.value,1),R=C[0],!this._documentIds.has(R)&&(g.size<=1?h.delete(E):g.delete(R))}catch(f){O={error:f}}finally{try{T&&!T.done&&(x=S.return)&&x.call(S)}finally{if(O)throw O.error}}}}catch(f){A={error:f}}finally{try{m&&!m.done&&(_=v.return)&&_.call(v)}finally{if(A)throw A.error}}return this._index.get(d).size===0&&this._index.delete(d),i%n!==0?[3,4]:[4,new Promise(function(f){return setTimeout(f,a)})];case 3:c.sent(),c.label=4;case 4:i+=1,c.label=5;case 5:return u=s.next(),[3,2];case 6:return[3,9];case 7:return L=c.sent(),P={error:L},[3,9];case 8:try{u&&!u.done&&(I=s.return)&&I.call(s)}finally{if(P)throw P.error}return[7];case 9:this._dirtCount-=r,c.label=10;case 10:return[4,null];case 11:return c.sent(),this._currentVacuum=this._enqueuedVacuum,this._enqueuedVacuum=null,[2]}})})},o.prototype.vacuumConditionsMet=function(e){if(e==null)return!0;var t=e.minDirtCount,r=e.minDirtFactor;return t=t||ze.minDirtCount,r=r||ze.minDirtFactor,this.dirtCount>=t&&this.dirtFactor>=r},Object.defineProperty(o.prototype,"isVacuuming",{get:function(){return this._currentVacuum!=null},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"dirtCount",{get:function(){return this._dirtCount},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"dirtFactor",{get:function(){return this._dirtCount/(1+this._documentCount+this._dirtCount)},enumerable:!1,configurable:!0}),o.prototype.has=function(e){return this._idToShortId.has(e)},o.prototype.getStoredFields=function(e){var t=this._idToShortId.get(e);if(t!=null)return this._storedFields.get(t)},o.prototype.search=function(e,t){var r,n;t===void 0&&(t={});var a=this.executeQuery(e,t),i=[];try{for(var s=D(a),u=s.next();!u.done;u=s.next()){var l=W(u.value,2),d=l[0],h=l[1],v=h.score,m=h.terms,b=h.match,E=m.length||1,g={id:this._documentIds.get(d),score:v*E,terms:Object.keys(b),match:b};Object.assign(g,this._storedFields.get(d)),(t.filter==null||t.filter(g))&&i.push(g)}}catch(S){r={error:S}}finally{try{u&&!u.done&&(n=s.return)&&n.call(s)}finally{if(r)throw r.error}}return e===o.wildcard&&t.boostDocument==null&&this._options.searchOptions.boostDocument==null||i.sort(ht),i},o.prototype.autoSuggest=function(e,t){var r,n,a,i;t===void 0&&(t={}),t=$($({},this._options.autoSuggestOptions),t);var s=new Map;try{for(var u=D(this.search(e,t)),l=u.next();!l.done;l=u.next()){var d=l.value,h=d.score,v=d.terms,m=v.join(" "),b=s.get(m);b!=null?(b.score+=h,b.count+=1):s.set(m,{score:h,terms:v,count:1})}}catch(L){r={error:L}}finally{try{l&&!l.done&&(n=u.return)&&n.call(u)}finally{if(r)throw r.error}}var E=[];try{for(var g=D(s),S=g.next();!S.done;S=g.next()){var T=W(S.value,2),b=T[0],C=T[1],h=C.score,v=C.terms,R=C.count;E.push({suggestion:b,terms:v,score:h/R})}}catch(L){a={error:L}}finally{try{S&&!S.done&&(i=g.return)&&i.call(g)}finally{if(a)throw a.error}}return E.sort(ht),E},Object.defineProperty(o.prototype,"documentCount",{get:function(){return this._documentCount},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"termCount",{get:function(){return this._index.size},enumerable:!1,configurable:!0}),o.loadJSON=function(e,t){if(t==null)throw new Error("MiniSearch: loadJSON should be given the same options used when serializing the index");return this.loadJS(JSON.parse(e),t)},o.getDefault=function(e){if(Pe.hasOwnProperty(e))return Le(Pe,e);throw new Error('MiniSearch: unknown option "'.concat(e,'"'))},o.loadJS=function(e,t){var r,n,a,i,s,u,l=e.index,d=e.documentCount,h=e.nextId,v=e.documentIds,m=e.fieldIds,b=e.fieldLength,E=e.averageFieldLength,g=e.storedFields,S=e.dirtCount,T=e.serializationVersion;if(T!==1&&T!==2)throw new Error("MiniSearch: cannot deserialize an index created with an incompatible version");var C=new o(t);C._documentCount=d,C._nextId=h,C._documentIds=Se(v),C._idToShortId=new Map,C._fieldIds=m,C._fieldLength=Se(b),C._avgFieldLength=E,C._storedFields=Se(g),C._dirtCount=S||0,C._index=new Re;try{for(var R=D(C._documentIds),L=R.next();!L.done;L=R.next()){var P=W(L.value,2),I=P[0],A=P[1];C._idToShortId.set(A,I)}}catch(y){r={error:y}}finally{try{L&&!L.done&&(n=R.return)&&n.call(R)}finally{if(r)throw r.error}}try{for(var _=D(l),O=_.next();!O.done;O=_.next()){var x=W(O.value,2),c=x[0],f=x[1],p=new Map;try{for(var N=(s=void 0,D(Object.keys(f))),k=N.next();!k.done;k=N.next()){var M=k.value,z=f[M];T===1&&(z=z.ds),p.set(parseInt(M,10),Se(z))}}catch(y){s={error:y}}finally{try{k&&!k.done&&(u=N.return)&&u.call(N)}finally{if(s)throw s.error}}C._index.set(c,p)}}catch(y){a={error:y}}finally{try{O&&!O.done&&(i=_.return)&&i.call(_)}finally{if(a)throw a.error}}return C},o.prototype.executeQuery=function(e,t){var r=this;if(t===void 0&&(t={}),e===o.wildcard)return this.executeWildcardQuery(t);if(typeof e!="string"){var n=$($($({},t),e),{queries:void 0}),a=e.queries.map(function(g){return r.executeQuery(g,n)});return this.combineResults(a,n.combineWith)}var i=this._options,s=i.tokenize,u=i.processTerm,l=i.searchOptions,d=$($({tokenize:s,processTerm:u},l),t),h=d.tokenize,v=d.processTerm,m=h(e).flatMap(function(g){return v(g)}).filter(function(g){return!!g}),b=m.map(Wr(d)),E=b.map(function(g){return r.executeQuerySpec(g,d)});return this.combineResults(E,d.combineWith)},o.prototype.executeQuerySpec=function(e,t){var r,n,a,i,s=$($({},this._options.searchOptions),t),u=(s.fields||this._options.fields).reduce(function(M,z){var y;return $($({},M),(y={},y[z]=Le(s.boost,z)||1,y))},{}),l=s.boostDocument,d=s.weights,h=s.maxFuzzy,v=s.bm25,m=$($({},ft.weights),d),b=m.fuzzy,E=m.prefix,g=this._index.get(e.term),S=this.termResults(e.term,e.term,1,g,u,l,v),T,C;if(e.prefix&&(T=this._index.atPrefix(e.term)),e.fuzzy){var R=e.fuzzy===!0?.2:e.fuzzy,L=R<1?Math.min(h,Math.round(e.term.length*R)):R;L&&(C=this._index.fuzzyGet(e.term,L))}if(T)try{for(var P=D(T),I=P.next();!I.done;I=P.next()){var A=W(I.value,2),_=A[0],O=A[1],x=_.length-e.term.length;if(x){C==null||C.delete(_);var c=E*_.length/(_.length+.3*x);this.termResults(e.term,_,c,O,u,l,v,S)}}}catch(M){r={error:M}}finally{try{I&&!I.done&&(n=P.return)&&n.call(P)}finally{if(r)throw r.error}}if(C)try{for(var f=D(C.keys()),p=f.next();!p.done;p=f.next()){var _=p.value,N=W(C.get(_),2),k=N[0],x=N[1];if(x){var c=b*_.length/(_.length+x);this.termResults(e.term,_,c,k,u,l,v,S)}}}catch(M){a={error:M}}finally{try{p&&!p.done&&(i=f.return)&&i.call(f)}finally{if(a)throw a.error}}return S},o.prototype.executeWildcardQuery=function(e){var t,r,n=new Map,a=$($({},this._options.searchOptions),e);try{for(var i=D(this._documentIds),s=i.next();!s.done;s=i.next()){var u=W(s.value,2),l=u[0],d=u[1],h=a.boostDocument?a.boostDocument(d,"",this._storedFields.get(l)):1;n.set(l,{score:h,terms:[],match:{}})}}catch(v){t={error:v}}finally{try{s&&!s.done&&(r=i.return)&&r.call(i)}finally{if(t)throw t.error}}return n},o.prototype.combineResults=function(e,t){if(t===void 0&&(t=Je),e.length===0)return new Map;var r=t.toLowerCase();return e.reduce(Br[r])||new Map},o.prototype.toJSON=function(){var e,t,r,n,a=[];try{for(var i=D(this._index),s=i.next();!s.done;s=i.next()){var u=W(s.value,2),l=u[0],d=u[1],h={};try{for(var v=(r=void 0,D(d)),m=v.next();!m.done;m=v.next()){var b=W(m.value,2),E=b[0],g=b[1];h[E]=Object.fromEntries(g)}}catch(S){r={error:S}}finally{try{m&&!m.done&&(n=v.return)&&n.call(v)}finally{if(r)throw r.error}}a.push([l,h])}}catch(S){e={error:S}}finally{try{s&&!s.done&&(t=i.return)&&t.call(i)}finally{if(e)throw e.error}}return{documentCount:this._documentCount,nextId:this._nextId,documentIds:Object.fromEntries(this._documentIds),fieldIds:this._fieldIds,fieldLength:Object.fromEntries(this._fieldLength),averageFieldLength:this._avgFieldLength,storedFields:Object.fromEntries(this._storedFields),dirtCount:this._dirtCount,index:a,serializationVersion:2}},o.prototype.termResults=function(e,t,r,n,a,i,s,u){var l,d,h,v,m;if(u===void 0&&(u=new Map),n==null)return u;try{for(var b=D(Object.keys(a)),E=b.next();!E.done;E=b.next()){var g=E.value,S=a[g],T=this._fieldIds[g],C=n.get(T);if(C!=null){var R=C.size,L=this._avgFieldLength[T];try{for(var P=(h=void 0,D(C.keys())),I=P.next();!I.done;I=P.next()){var A=I.value;if(!this._documentIds.has(A)){this.removeTerm(T,A,t),R-=1;continue}var _=i?i(this._documentIds.get(A),t,this._storedFields.get(A)):1;if(_){var O=C.get(A),x=this._fieldLength.get(A)[T],c=$r(O,R,this._documentCount,x,L,s),f=r*S*_*c,p=u.get(A);if(p){p.score+=f,jr(p.terms,e);var N=Le(p.match,t);N?N.push(g):p.match[t]=[g]}else u.set(A,{score:f,terms:[e],match:(m={},m[t]=[g],m)})}}}catch(k){h={error:k}}finally{try{I&&!I.done&&(v=P.return)&&v.call(P)}finally{if(h)throw h.error}}}}}catch(k){l={error:k}}finally{try{E&&!E.done&&(d=b.return)&&d.call(b)}finally{if(l)throw l.error}}return u},o.prototype.addTerm=function(e,t,r){var n=this._index.fetch(r,vt),a=n.get(e);if(a==null)a=new Map,a.set(t,1),n.set(e,a);else{var i=a.get(t);a.set(t,(i||0)+1)}},o.prototype.removeTerm=function(e,t,r){if(!this._index.has(r)){this.warnDocumentChanged(t,e,r);return}var n=this._index.fetch(r,vt),a=n.get(e);a==null||a.get(t)==null?this.warnDocumentChanged(t,e,r):a.get(t)<=1?a.size<=1?n.delete(e):a.delete(t):a.set(t,a.get(t)-1),this._index.get(r).size===0&&this._index.delete(r)},o.prototype.warnDocumentChanged=function(e,t,r){var n,a;try{for(var i=D(Object.keys(this._fieldIds)),s=i.next();!s.done;s=i.next()){var u=s.value;if(this._fieldIds[u]===t){this._options.logger("warn","MiniSearch: document with ID ".concat(this._documentIds.get(e),' has changed before removal: term "').concat(r,'" was not present in field "').concat(u,'". Removing a document after it has changed can corrupt the index!'),"version_conflict");return}}}catch(l){n={error:l}}finally{try{s&&!s.done&&(a=i.return)&&a.call(i)}finally{if(n)throw n.error}}},o.prototype.addDocumentId=function(e){var t=this._nextId;return this._idToShortId.set(e,t),this._documentIds.set(t,e),this._documentCount+=1,this._nextId+=1,t},o.prototype.addFields=function(e){for(var t=0;t<e.length;t++)this._fieldIds[e[t]]=t},o.prototype.addFieldLength=function(e,t,r,n){var a=this._fieldLength.get(e);a==null&&this._fieldLength.set(e,a=[]),a[t]=n;var i=this._avgFieldLength[t]||0,s=i*r+n;this._avgFieldLength[t]=s/(r+1)},o.prototype.removeFieldLength=function(e,t,r,n){if(r===1){this._avgFieldLength[t]=0;return}var a=this._avgFieldLength[t]*r-n;this._avgFieldLength[t]=a/(r-1)},o.prototype.saveStoredFields=function(e,t){var r,n,a=this._options,i=a.storeFields,s=a.extractField;if(!(i==null||i.length===0)){var u=this._storedFields.get(e);u==null&&this._storedFields.set(e,u={});try{for(var l=D(i),d=l.next();!d.done;d=l.next()){var h=d.value,v=s(t,h);v!==void 0&&(u[h]=v)}}catch(m){r={error:m}}finally{try{d&&!d.done&&(n=l.return)&&n.call(l)}finally{if(r)throw r.error}}}},o.wildcard=Symbol("*"),o}(),Le=function(o,e){return Object.prototype.hasOwnProperty.call(o,e)?o[e]:void 0},Br=(ye={},ye[Je]=function(o,e){var t,r;try{for(var n=D(e.keys()),a=n.next();!a.done;a=n.next()){var i=a.value,s=o.get(i);if(s==null)o.set(i,e.get(i));else{var u=e.get(i),l=u.score,d=u.terms,h=u.match;s.score=s.score+l,s.match=Object.assign(s.match,h),dt(s.terms,d)}}}catch(v){t={error:v}}finally{try{a&&!a.done&&(r=n.return)&&r.call(n)}finally{if(t)throw t.error}}return o},ye[Tt]=function(o,e){var t,r,n=new Map;try{for(var a=D(e.keys()),i=a.next();!i.done;i=a.next()){var s=i.value,u=o.get(s);if(u!=null){var l=e.get(s),d=l.score,h=l.terms,v=l.match;dt(u.terms,h),n.set(s,{score:u.score+d,terms:u.terms,match:Object.assign(u.match,v)})}}}catch(m){t={error:m}}finally{try{i&&!i.done&&(r=a.return)&&r.call(a)}finally{if(t)throw t.error}}return n},ye[Pr]=function(o,e){var t,r;try{for(var n=D(e.keys()),a=n.next();!a.done;a=n.next()){var i=a.value;o.delete(i)}}catch(s){t={error:s}}finally{try{a&&!a.done&&(r=n.return)&&r.call(n)}finally{if(t)throw t.error}}return o},ye),Vr={k:1.2,b:.7,d:.5},$r=function(o,e,t,r,n,a){var i=a.k,s=a.b,u=a.d,l=Math.log(1+(t-e+.5)/(e+.5));return l*(u+o*(i+1)/(o+i*(1-s+s*r/n)))},Wr=function(o){return function(e,t,r){var n=typeof o.fuzzy=="function"?o.fuzzy(e,t,r):o.fuzzy||!1,a=typeof o.prefix=="function"?o.prefix(e,t,r):o.prefix===!0;return{term:e,fuzzy:n,prefix:a}}},Pe={idField:"id",extractField:function(o,e){return o[e]},tokenize:function(o){return o.split(Jr)},processTerm:function(o){return o.toLowerCase()},fields:void 0,searchOptions:void 0,storeFields:[],logger:function(o,e){typeof(console==null?void 0:console[o])=="function"&&console[o](e)},autoVacuum:!0},ft={combineWith:Je,prefix:!1,fuzzy:!1,maxFuzzy:6,boost:{},weights:{fuzzy:.45,prefix:.375},bm25:Vr},Kr={combineWith:Tt,prefix:function(o,e,t){return e===t.length-1}},We={batchSize:1e3,batchWait:10},Ke={minDirtFactor:.1,minDirtCount:20},ze=$($({},We),Ke),jr=function(o,e){o.includes(e)||o.push(e)},dt=function(o,e){var t,r;try{for(var n=D(e),a=n.next();!a.done;a=n.next()){var i=a.value;o.includes(i)||o.push(i)}}catch(s){t={error:s}}finally{try{a&&!a.done&&(r=n.return)&&r.call(n)}finally{if(t)throw t.error}}},ht=function(o,e){var t=o.score,r=e.score;return r-t},vt=function(){return new Map},Se=function(o){var e,t,r=new Map;try{for(var n=D(Object.keys(o)),a=n.next();!a.done;a=n.next()){var i=a.value;r.set(parseInt(i,10),o[i])}}catch(s){e={error:s}}finally{try{a&&!a.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}return r},Jr=/[\n\r -#%-*,-/:;?@[-\]_{}\u00A0\u00A1\u00A7\u00AB\u00B6\u00B7\u00BB\u00BF\u037E\u0387\u055A-\u055F\u0589\u058A\u05BE\u05C0\u05C3\u05C6\u05F3\u05F4\u0609\u060A\u060C\u060D\u061B\u061E\u061F\u066A-\u066D\u06D4\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u09FD\u0A76\u0AF0\u0C77\u0C84\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F3A-\u0F3D\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u1400\u166E\u1680\u169B\u169C\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\u2000-\u200A\u2010-\u2029\u202F-\u2043\u2045-\u2051\u2053-\u205F\u207D\u207E\u208D\u208E\u2308-\u230B\u2329\u232A\u2768-\u2775\u27C5\u27C6\u27E6-\u27EF\u2983-\u2998\u29D8-\u29DB\u29FC\u29FD\u2CF9-\u2CFC\u2CFE\u2CFF\u2D70\u2E00-\u2E2E\u2E30-\u2E4F\u3000-\u3003\u3008-\u3011\u3014-\u301F\u3030\u303D\u30A0\u30FB\uA4FE\uA4FF\uA60D-\uA60F\uA673\uA67E\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB\uFD3E\uFD3F\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE61\uFE63\uFE68\uFE6A\uFE6B\uFF01-\uFF03\uFF05-\uFF0A\uFF0C-\uFF0F\uFF1A\uFF1B\uFF1F\uFF20\uFF3B-\uFF3D\uFF3F\uFF5B\uFF5D\uFF5F-\uFF65]+/u;const Y=o=>(Gt("data-v-6d2f2a19"),o=o(),Qt(),o),Ur=["aria-owns"],Hr={class:"shell"},Gr=["title"],Qr=Y(()=>F("svg",{class:"search-icon",width:"18",height:"18",viewBox:"0 0 24 24","aria-hidden":"true"},[F("g",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[F("circle",{cx:"11",cy:"11",r:"8"}),F("path",{d:"m21 21l-4.35-4.35"})])],-1)),qr=[Qr],Yr={class:"search-actions before"},Zr=["title"],Xr=Y(()=>F("svg",{width:"18",height:"18",viewBox:"0 0 24 24","aria-hidden":"true"},[F("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M19 12H5m7 7l-7-7l7-7"})],-1)),ea=[Xr],ta=["placeholder"],ra={class:"search-actions"},aa=["title"],na=Y(()=>F("svg",{width:"18",height:"18",viewBox:"0 0 24 24","aria-hidden":"true"},[F("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M3 14h7v7H3zM3 3h7v7H3zm11 1h7m-7 5h7m-7 6h7m-7 5h7"})],-1)),ia=[na],oa=["disabled","title"],sa=Y(()=>F("svg",{width:"18",height:"18",viewBox:"0 0 24 24","aria-hidden":"true"},[F("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"})],-1)),ua=[sa],la=["id","role","aria-labelledby"],ca=["aria-selected"],fa=["href","aria-label","onMouseenter","onFocusin"],da={class:"titles"},ha=Y(()=>F("span",{class:"title-icon"},"#",-1)),va=["innerHTML"],pa=Y(()=>F("svg",{width:"18",height:"18",viewBox:"0 0 24 24"},[F("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m9 18l6-6l-6-6"})],-1)),ya={class:"title main"},ma=["innerHTML"],ga={key:0,class:"excerpt-wrapper"},ba={key:0,class:"excerpt",inert:""},wa=["innerHTML"],xa=Y(()=>F("div",{class:"excerpt-gradient-bottom"},null,-1)),Fa=Y(()=>F("div",{class:"excerpt-gradient-top"},null,-1)),Ea={key:0,class:"no-results"},Sa={class:"search-keyboard-shortcuts"},Aa=["aria-label"],Ca=Y(()=>F("svg",{width:"14",height:"14",viewBox:"0 0 24 24"},[F("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M12 19V5m-7 7l7-7l7 7"})],-1)),Ta=[Ca],ka=["aria-label"],Na=Y(()=>F("svg",{width:"14",height:"14",viewBox:"0 0 24 24"},[F("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M12 5v14m7-7l-7 7l-7-7"})],-1)),Ia=[Na],Da=["aria-label"],_a=Y(()=>F("svg",{width:"14",height:"14",viewBox:"0 0 24 24"},[F("g",{fill:"none",stroke:"currentcolor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[F("path",{d:"m9 10l-5 5l5 5"}),F("path",{d:"M20 4v7a4 4 0 0 1-4 4H4"})])],-1)),Oa=[_a],Ra=["aria-label"],Ma=It({__name:"VPLocalSearchBox",emits:["close"],setup(o,{emit:e}){var M,z;const t=e,r=be(),n=be(),a=be(rr),i=er(),{activate:s}=Nr(r,{immediate:!0,allowOutsideClick:!0,clickOutsideDeactivates:!0,escapeDeactivates:!0}),{localeIndex:u,theme:l}=i,d=et(async()=>{var y,w,B,G,K,j,V,J,Q;return nt(zr.loadJSON((B=await((w=(y=a.value)[u.value])==null?void 0:w.call(y)))==null?void 0:B.default,{fields:["title","titles","text"],storeFields:["title","titles"],searchOptions:{fuzzy:.2,prefix:!0,boost:{title:4,text:2,titles:1},...((G=l.value.search)==null?void 0:G.provider)==="local"&&((j=(K=l.value.search.options)==null?void 0:K.miniSearch)==null?void 0:j.searchOptions)},...((V=l.value.search)==null?void 0:V.provider)==="local"&&((Q=(J=l.value.search.options)==null?void 0:J.miniSearch)==null?void 0:Q.options)}))}),v=we(()=>{var y,w;return((y=l.value.search)==null?void 0:y.provider)==="local"&&((w=l.value.search.options)==null?void 0:w.disableQueryPersistence)===!0}).value?ie(""):Dt("vitepress:local-search-filter",""),m=_t("vitepress:local-search-detailed-list",((M=l.value.search)==null?void 0:M.provider)==="local"&&((z=l.value.search.options)==null?void 0:z.detailedView)===!0),b=we(()=>{var y,w,B;return((y=l.value.search)==null?void 0:y.provider)==="local"&&(((w=l.value.search.options)==null?void 0:w.disableDetailedView)===!0||((B=l.value.search.options)==null?void 0:B.detailedView)===!1)}),E=we(()=>{var w,B,G,K,j,V,J;const y=((w=l.value.search)==null?void 0:w.options)??l.value.algolia;return((j=(K=(G=(B=y==null?void 0:y.locales)==null?void 0:B[u.value])==null?void 0:G.translations)==null?void 0:K.button)==null?void 0:j.buttonText)||((J=(V=y==null?void 0:y.translations)==null?void 0:V.button)==null?void 0:J.buttonText)||"Search"});Ot(()=>{b.value&&(m.value=!1)});const g=be([]),S=ie(!1);Be(v,()=>{S.value=!1});const T=et(async()=>{if(n.value)return nt(new Dr(n.value))},null);Rt(()=>[d.value,v.value,m.value],async([y,w,B],G,K)=>{var Ue,He,Ge,Qe;let j=!1;if(K(()=>{j=!0}),!y)return;g.value=y.search(w).slice(0,16),S.value=!0;const V=B?await Promise.all(g.value.map(q=>C(q.id))):[];if(j)return;const J=new Map;for(const{id:q,mod:re}of V){const ae=q.slice(0,q.indexOf("#"));let ee=J.get(ae);if(ee)continue;ee=new Map,J.set(ae,ee);const Z=re.default??re;if(Z!=null&&Z.render||Z!=null&&Z.setup){const ne=qt(Z);ne.config.warnHandler=()=>{},ne.provide(Yt,i),Object.defineProperties(ne.config.globalProperties,{$frontmatter:{get(){return i.frontmatter.value}},$params:{get(){return i.page.value.params}}});const qe=document.createElement("div");ne.mount(qe),qe.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(fe=>{var Xe;const ge=(Xe=fe.querySelector("a"))==null?void 0:Xe.getAttribute("href"),Ye=(ge==null?void 0:ge.startsWith("#"))&&ge.slice(1);if(!Ye)return;let Ze="";for(;(fe=fe.nextElementSibling)&&!/^h[1-6]$/i.test(fe.tagName);)Ze+=fe.outerHTML;ee.set(Ye,Ze)}),ne.unmount()}if(j)return}const Q=new Set;if(g.value=g.value.map(q=>{const[re,ae]=q.id.split("#"),ee=J.get(re),Z=(ee==null?void 0:ee.get(ae))??"";for(const ne in q.match)Q.add(ne);return{...q,text:Z}}),await de(),j)return;await new Promise(q=>{var re;(re=T.value)==null||re.unmark({done:()=>{var ae;(ae=T.value)==null||ae.markRegExp(k(Q),{done:q})}})});const Ie=((Ue=r.value)==null?void 0:Ue.querySelectorAll(".result .excerpt"))??[];for(const q of Ie)(He=q.querySelector('mark[data-markjs="true"]'))==null||He.scrollIntoView({block:"center"});(Qe=(Ge=n.value)==null?void 0:Ge.firstElementChild)==null||Qe.scrollIntoView({block:"start"})},{debounce:200,immediate:!0});async function C(y){const w=Zt(y.slice(0,y.indexOf("#")));try{if(!w)throw new Error(`Cannot find file for id: ${y}`);return{id:y,mod:await pt(()=>import(w),[])}}catch(B){return console.error(B),{id:y,mod:{}}}}const R=ie(),L=we(()=>{var y;return((y=v.value)==null?void 0:y.length)<=0});function P(y=!0){var w,B;(w=R.value)==null||w.focus(),y&&((B=R.value)==null||B.select())}De(()=>{P()});function I(y){y.pointerType==="mouse"&&P()}const A=ie(-1),_=ie(!1);Be(g,y=>{A.value=y.length?0:-1,O()});function O(){de(()=>{const y=document.querySelector(".result.selected");y&&y.scrollIntoView({block:"nearest"})})}xe("ArrowUp",y=>{y.preventDefault(),A.value--,A.value<0&&(A.value=g.value.length-1),_.value=!0,O()}),xe("ArrowDown",y=>{y.preventDefault(),A.value++,A.value>=g.value.length&&(A.value=0),_.value=!0,O()});const x=Mt();xe("Enter",y=>{if(y.target instanceof HTMLButtonElement&&y.target.type!=="submit")return;const w=g.value[A.value];if(y.target instanceof HTMLInputElement&&!w){y.preventDefault();return}w&&(x.go(w.id),t("close"))}),xe("Escape",()=>{t("close")});const c={modal:{displayDetails:"Display detailed list",resetButtonTitle:"Reset search",backButtonTitle:"Close search",noResultsText:"No results for",footer:{selectText:"to select",selectKeyAriaLabel:"enter",navigateText:"to navigate",navigateUpKeyAriaLabel:"up arrow",navigateDownKeyAriaLabel:"down arrow",closeText:"to close",closeKeyAriaLabel:"escape"}}},f=Lt(tr)(Pt(()=>{var y;return(y=l.value.search)==null?void 0:y.options}),c);De(()=>{window.history.pushState(null,"",null)}),zt("popstate",y=>{y.preventDefault(),t("close")});const p=Bt(Vt?document.body:null);De(()=>{de(()=>{p.value=!0,de().then(()=>s())})}),$t(()=>{p.value=!1});function N(){v.value="",de().then(()=>P(!1))}function k(y){return new RegExp([...y].sort((w,B)=>B.length-w.length).map(w=>`(${w.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")})`).join("|"),"gi")}return(y,w)=>{var B,G,K,j;return X(),Wt(Ht,{to:"body"},[F("div",{ref_key:"el",ref:r,role:"button","aria-owns":(B=g.value)!=null&&B.length?"localsearch-list":void 0,"aria-expanded":"true","aria-haspopup":"listbox","aria-labelledby":"localsearch-label",class:"VPLocalSearchBox"},[F("div",{class:"backdrop",onClick:w[0]||(w[0]=V=>y.$emit("close"))}),F("div",Hr,[F("form",{class:"search-bar",onPointerup:w[4]||(w[4]=V=>I(V)),onSubmit:w[5]||(w[5]=Kt(()=>{},["prevent"]))},[F("label",{title:E.value,id:"localsearch-label",for:"localsearch-input"},qr,8,Gr),F("div",Yr,[F("button",{class:"back-button",title:U(f)("modal.backButtonTitle"),onClick:w[1]||(w[1]=V=>y.$emit("close"))},ea,8,Zr)]),jt(F("input",{ref_key:"searchInput",ref:R,"onUpdate:modelValue":w[2]||(w[2]=V=>Ut(v)?v.value=V:null),placeholder:E.value,id:"localsearch-input","aria-labelledby":"localsearch-label",class:"search-input"},null,8,ta),[[Jt,U(v)]]),F("div",ra,[b.value?Fe("",!0):(X(),te("button",{key:0,class:tt(["toggle-layout-button",{"detailed-list":U(m)}]),type:"button",title:U(f)("modal.displayDetails"),onClick:w[3]||(w[3]=V=>A.value>-1&&(m.value=!U(m)))},ia,10,aa)),F("button",{class:"clear-button",type:"reset",disabled:L.value,title:U(f)("modal.resetButtonTitle"),onClick:N},ua,8,oa)])],32),F("ul",{ref_key:"resultsEl",ref:n,id:(G=g.value)!=null&&G.length?"localsearch-list":void 0,role:(K=g.value)!=null&&K.length?"listbox":void 0,"aria-labelledby":(j=g.value)!=null&&j.length?"localsearch-label":void 0,class:"results",onMousemove:w[7]||(w[7]=V=>_.value=!1)},[(X(!0),te(at,null,rt(g.value,(V,J)=>(X(),te("li",{key:V.id,role:"option","aria-selected":A.value===J?"true":"false"},[F("a",{href:V.id,class:tt(["result",{selected:A.value===J}]),"aria-label":[...V.titles,V.title].join(" > "),onMouseenter:Q=>!_.value&&(A.value=J),onFocusin:Q=>A.value=J,onClick:w[6]||(w[6]=Q=>y.$emit("close"))},[F("div",null,[F("div",da,[ha,(X(!0),te(at,null,rt(V.titles,(Q,Ie)=>(X(),te("span",{key:Ie,class:"title"},[F("span",{class:"text",innerHTML:Q},null,8,va),pa]))),128)),F("span",ya,[F("span",{class:"text",innerHTML:V.title},null,8,ma)])]),U(m)?(X(),te("div",ga,[V.text?(X(),te("div",ba,[F("div",{class:"vp-doc",innerHTML:V.text},null,8,wa)])):Fe("",!0),xa,Fa])):Fe("",!0)])],42,fa)],8,ca))),128)),U(v)&&!g.value.length&&S.value?(X(),te("li",Ea,[he(ve(U(f)("modal.noResultsText"))+' "',1),F("strong",null,ve(U(v)),1),he('" ')])):Fe("",!0)],40,la),F("div",Sa,[F("span",null,[F("kbd",{"aria-label":U(f)("modal.footer.navigateUpKeyAriaLabel")},Ta,8,Aa),F("kbd",{"aria-label":U(f)("modal.footer.navigateDownKeyAriaLabel")},Ia,8,ka),he(" "+ve(U(f)("modal.footer.navigateText")),1)]),F("span",null,[F("kbd",{"aria-label":U(f)("modal.footer.selectKeyAriaLabel")},Oa,8,Da),he(" "+ve(U(f)("modal.footer.selectText")),1)]),F("span",null,[F("kbd",{"aria-label":U(f)("modal.footer.closeKeyAriaLabel")},"esc",8,Ra),he(" "+ve(U(f)("modal.footer.closeText")),1)])])])],8,Ur)])}}});const Va=Xt(Ma,[["__scopeId","data-v-6d2f2a19"]]);export{Va as default};
diff --git a/assets/chunks/framework.c53372a0.js b/assets/chunks/framework.c53372a0.js
new file mode 100644
index 00000000..5052a975
--- /dev/null
+++ b/assets/chunks/framework.c53372a0.js
@@ -0,0 +1,2 @@
+function Tr(e,t){const n=Object.create(null),r=e.split(",");for(let s=0;s<r.length;s++)n[r[s]]=!0;return t?s=>!!n[s.toLowerCase()]:s=>!!n[s]}const te={},yt=[],Oe=()=>{},Ao=()=>!1,Ro=/^on[^a-z]/,en=e=>Ro.test(e),Ar=e=>e.startsWith("onUpdate:"),fe=Object.assign,Rr=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},So=Object.prototype.hasOwnProperty,X=(e,t)=>So.call(e,t),D=Array.isArray,_t=e=>tn(e)==="[object Map]",Nn=e=>tn(e)==="[object Set]",cs=e=>tn(e)==="[object Date]",V=e=>typeof e=="function",ie=e=>typeof e=="string",Tt=e=>typeof e=="symbol",G=e=>e!==null&&typeof e=="object",Sr=e=>(G(e)||V(e))&&V(e.then)&&V(e.catch),oi=Object.prototype.toString,tn=e=>oi.call(e),Oo=e=>tn(e).slice(8,-1),li=e=>tn(e)==="[object Object]",Or=e=>ie(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,kt=Tr(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Bn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Fo=/-(\w)/g,Be=Bn(e=>e.replace(Fo,(t,n)=>n?n.toUpperCase():"")),Io=/\B([A-Z])/g,ht=Bn(e=>e.replace(Io,"-$1").toLowerCase()),Hn=Bn(e=>e.charAt(0).toUpperCase()+e.slice(1)),vn=Bn(e=>e?`on${Hn(e)}`:""),dt=(e,t)=>!Object.is(e,t),wn=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},xn=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},Tn=e=>{const t=parseFloat(e);return isNaN(t)?e:t},ci=e=>{const t=ie(e)?Number(e):NaN;return isNaN(t)?e:t};let as;const cr=()=>as||(as=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Fr(e){if(D(e)){const t={};for(let n=0;n<e.length;n++){const r=e[n],s=ie(r)?No(r):Fr(r);if(s)for(const i in s)t[i]=s[i]}return t}else if(ie(e)||G(e))return e}const Po=/;(?![^(]*\))/g,Mo=/:([^]+)/,Lo=/\/\*[^]*?\*\//g;function No(e){const t={};return e.replace(Lo,"").split(Po).forEach(n=>{if(n){const r=n.split(Mo);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t}function Ir(e){let t="";if(ie(e))t=e;else if(D(e))for(let n=0;n<e.length;n++){const r=Ir(e[n]);r&&(t+=r+" ")}else if(G(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const Bo="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",Ho=Tr(Bo);function ai(e){return!!e||e===""}function $o(e,t){if(e.length!==t.length)return!1;let n=!0;for(let r=0;n&&r<e.length;r++)n=$n(e[r],t[r]);return n}function $n(e,t){if(e===t)return!0;let n=cs(e),r=cs(t);if(n||r)return n&&r?e.getTime()===t.getTime():!1;if(n=Tt(e),r=Tt(t),n||r)return e===t;if(n=D(e),r=D(t),n||r)return n&&r?$o(e,t):!1;if(n=G(e),r=G(t),n||r){if(!n||!r)return!1;const s=Object.keys(e).length,i=Object.keys(t).length;if(s!==i)return!1;for(const o in e){const l=e.hasOwnProperty(o),c=t.hasOwnProperty(o);if(l&&!c||!l&&c||!$n(e[o],t[o]))return!1}}return String(e)===String(t)}function ko(e,t){return e.findIndex(n=>$n(n,t))}const Za=e=>ie(e)?e:e==null?"":D(e)||G(e)&&(e.toString===oi||!V(e.toString))?JSON.stringify(e,ui,2):String(e),ui=(e,t)=>t&&t.__v_isRef?ui(e,t.value):_t(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[r,s])=>(n[`${r} =>`]=s,n),{})}:Nn(t)?{[`Set(${t.size})`]:[...t.values()]}:G(t)&&!D(t)&&!li(t)?String(t):t;let ve;class Do{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=ve,!t&&ve&&(this.index=(ve.scopes||(ve.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=ve;try{return ve=this,t()}finally{ve=n}}}on(){ve=this}off(){ve=this.parent}stop(t){if(this._active){let n,r;for(n=0,r=this.effects.length;n<r;n++)this.effects[n].stop();for(n=0,r=this.cleanups.length;n<r;n++)this.cleanups[n]();if(this.scopes)for(n=0,r=this.scopes.length;n<r;n++)this.scopes[n].stop(!0);if(!this.detached&&this.parent&&!t){const s=this.parent.scopes.pop();s&&s!==this&&(this.parent.scopes[this.index]=s,s.index=this.index)}this.parent=void 0,this._active=!1}}}function jo(e,t=ve){t&&t.active&&t.effects.push(e)}function fi(){return ve}function Uo(e){ve&&ve.cleanups.push(e)}const Pr=e=>{const t=new Set(e);return t.w=0,t.n=0,t},di=e=>(e.w&Ge)>0,hi=e=>(e.n&Ge)>0,Ko=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=Ge},Wo=e=>{const{deps:t}=e;if(t.length){let n=0;for(let r=0;r<t.length;r++){const s=t[r];di(s)&&!hi(s)?s.delete(e):t[n++]=s,s.w&=~Ge,s.n&=~Ge}t.length=n}},An=new WeakMap;let Ht=0,Ge=1;const ar=30;let Se;const ut=Symbol(""),ur=Symbol("");class Mr{constructor(t,n=null,r){this.fn=t,this.scheduler=n,this.active=!0,this.deps=[],this.parent=void 0,jo(this,r)}run(){if(!this.active)return this.fn();let t=Se,n=Je;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=Se,Se=this,Je=!0,Ge=1<<++Ht,Ht<=ar?Ko(this):us(this),this.fn()}finally{Ht<=ar&&Wo(this),Ge=1<<--Ht,Se=this.parent,Je=n,this.parent=void 0,this.deferStop&&this.stop()}}stop(){Se===this?this.deferStop=!0:this.active&&(us(this),this.onStop&&this.onStop(),this.active=!1)}}function us(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}let Je=!0;const pi=[];function Ft(){pi.push(Je),Je=!1}function It(){const e=pi.pop();Je=e===void 0?!0:e}function _e(e,t,n){if(Je&&Se){let r=An.get(e);r||An.set(e,r=new Map);let s=r.get(n);s||r.set(n,s=Pr()),gi(s)}}function gi(e,t){let n=!1;Ht<=ar?hi(e)||(e.n|=Ge,n=!di(e)):n=!e.has(Se),n&&(e.add(Se),Se.deps.push(e))}function De(e,t,n,r,s,i){const o=An.get(e);if(!o)return;let l=[];if(t==="clear")l=[...o.values()];else if(n==="length"&&D(e)){const c=Number(r);o.forEach((a,f)=>{(f==="length"||!Tt(f)&&f>=c)&&l.push(a)})}else switch(n!==void 0&&l.push(o.get(n)),t){case"add":D(e)?Or(n)&&l.push(o.get("length")):(l.push(o.get(ut)),_t(e)&&l.push(o.get(ur)));break;case"delete":D(e)||(l.push(o.get(ut)),_t(e)&&l.push(o.get(ur)));break;case"set":_t(e)&&l.push(o.get(ut));break}if(l.length===1)l[0]&&fr(l[0]);else{const c=[];for(const a of l)a&&c.push(...a);fr(Pr(c))}}function fr(e,t){const n=D(e)?e:[...e];for(const r of n)r.computed&&fs(r);for(const r of n)r.computed||fs(r)}function fs(e,t){(e!==Se||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}function Vo(e,t){var n;return(n=An.get(e))==null?void 0:n.get(t)}const qo=Tr("__proto__,__v_isRef,__isVue"),mi=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Tt)),ds=zo();function zo(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const r=Q(this);for(let i=0,o=this.length;i<o;i++)_e(r,"get",i+"");const s=r[t](...n);return s===-1||s===!1?r[t](...n.map(Q)):s}}),["push","pop","shift","unshift","splice"].forEach(t=>{e[t]=function(...n){Ft();const r=Q(this)[t].apply(this,n);return It(),r}}),e}function Yo(e){const t=Q(this);return _e(t,"has",e),t.hasOwnProperty(e)}class yi{constructor(t=!1,n=!1){this._isReadonly=t,this._shallow=n}get(t,n,r){const s=this._isReadonly,i=this._shallow;if(n==="__v_isReactive")return!s;if(n==="__v_isReadonly")return s;if(n==="__v_isShallow")return i;if(n==="__v_raw"&&r===(s?i?ll:wi:i?vi:bi).get(t))return t;const o=D(t);if(!s){if(o&&X(ds,n))return Reflect.get(ds,n,r);if(n==="hasOwnProperty")return Yo}const l=Reflect.get(t,n,r);return(Tt(n)?mi.has(n):qo(n))||(s||_e(t,"get",n),i)?l:ae(l)?o&&Or(n)?l:l.value:G(l)?s?jn(l):Dn(l):l}}class _i extends yi{constructor(t=!1){super(!1,t)}set(t,n,r,s){let i=t[n];if(At(i)&&ae(i)&&!ae(r))return!1;if(!this._shallow&&(!Rn(r)&&!At(r)&&(i=Q(i),r=Q(r)),!D(t)&&ae(i)&&!ae(r)))return i.value=r,!0;const o=D(t)&&Or(n)?Number(n)<t.length:X(t,n),l=Reflect.set(t,n,r,s);return t===Q(s)&&(o?dt(r,i)&&De(t,"set",n,r):De(t,"add",n,r)),l}deleteProperty(t,n){const r=X(t,n);t[n];const s=Reflect.deleteProperty(t,n);return s&&r&&De(t,"delete",n,void 0),s}has(t,n){const r=Reflect.has(t,n);return(!Tt(n)||!mi.has(n))&&_e(t,"has",n),r}ownKeys(t){return _e(t,"iterate",D(t)?"length":ut),Reflect.ownKeys(t)}}class Jo extends yi{constructor(t=!1){super(!0,t)}set(t,n){return!0}deleteProperty(t,n){return!0}}const Xo=new _i,Qo=new Jo,Zo=new _i(!0),Lr=e=>e,kn=e=>Reflect.getPrototypeOf(e);function ln(e,t,n=!1,r=!1){e=e.__v_raw;const s=Q(e),i=Q(t);n||(dt(t,i)&&_e(s,"get",t),_e(s,"get",i));const{has:o}=kn(s),l=r?Lr:n?Hr:qt;if(o.call(s,t))return l(e.get(t));if(o.call(s,i))return l(e.get(i));e!==s&&e.get(t)}function cn(e,t=!1){const n=this.__v_raw,r=Q(n),s=Q(e);return t||(dt(e,s)&&_e(r,"has",e),_e(r,"has",s)),e===s?n.has(e):n.has(e)||n.has(s)}function an(e,t=!1){return e=e.__v_raw,!t&&_e(Q(e),"iterate",ut),Reflect.get(e,"size",e)}function hs(e){e=Q(e);const t=Q(this);return kn(t).has.call(t,e)||(t.add(e),De(t,"add",e,e)),this}function ps(e,t){t=Q(t);const n=Q(this),{has:r,get:s}=kn(n);let i=r.call(n,e);i||(e=Q(e),i=r.call(n,e));const o=s.call(n,e);return n.set(e,t),i?dt(t,o)&&De(n,"set",e,t):De(n,"add",e,t),this}function gs(e){const t=Q(this),{has:n,get:r}=kn(t);let s=n.call(t,e);s||(e=Q(e),s=n.call(t,e)),r&&r.call(t,e);const i=t.delete(e);return s&&De(t,"delete",e,void 0),i}function ms(){const e=Q(this),t=e.size!==0,n=e.clear();return t&&De(e,"clear",void 0,void 0),n}function un(e,t){return function(r,s){const i=this,o=i.__v_raw,l=Q(o),c=t?Lr:e?Hr:qt;return!e&&_e(l,"iterate",ut),o.forEach((a,f)=>r.call(s,c(a),c(f),i))}}function fn(e,t,n){return function(...r){const s=this.__v_raw,i=Q(s),o=_t(i),l=e==="entries"||e===Symbol.iterator&&o,c=e==="keys"&&o,a=s[e](...r),f=n?Lr:t?Hr:qt;return!t&&_e(i,"iterate",c?ur:ut),{next(){const{value:d,done:g}=a.next();return g?{value:d,done:g}:{value:l?[f(d[0]),f(d[1])]:f(d),done:g}},[Symbol.iterator](){return this}}}}function Ke(e){return function(...t){return e==="delete"?!1:this}}function Go(){const e={get(i){return ln(this,i)},get size(){return an(this)},has:cn,add:hs,set:ps,delete:gs,clear:ms,forEach:un(!1,!1)},t={get(i){return ln(this,i,!1,!0)},get size(){return an(this)},has:cn,add:hs,set:ps,delete:gs,clear:ms,forEach:un(!1,!0)},n={get(i){return ln(this,i,!0)},get size(){return an(this,!0)},has(i){return cn.call(this,i,!0)},add:Ke("add"),set:Ke("set"),delete:Ke("delete"),clear:Ke("clear"),forEach:un(!0,!1)},r={get(i){return ln(this,i,!0,!0)},get size(){return an(this,!0)},has(i){return cn.call(this,i,!0)},add:Ke("add"),set:Ke("set"),delete:Ke("delete"),clear:Ke("clear"),forEach:un(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(i=>{e[i]=fn(i,!1,!1),n[i]=fn(i,!0,!1),t[i]=fn(i,!1,!0),r[i]=fn(i,!0,!0)}),[e,n,t,r]}const[el,tl,nl,rl]=Go();function Nr(e,t){const n=t?e?rl:nl:e?tl:el;return(r,s,i)=>s==="__v_isReactive"?!e:s==="__v_isReadonly"?e:s==="__v_raw"?r:Reflect.get(X(n,s)&&s in r?n:r,s,i)}const sl={get:Nr(!1,!1)},il={get:Nr(!1,!0)},ol={get:Nr(!0,!1)},bi=new WeakMap,vi=new WeakMap,wi=new WeakMap,ll=new WeakMap;function cl(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function al(e){return e.__v_skip||!Object.isExtensible(e)?0:cl(Oo(e))}function Dn(e){return At(e)?e:Br(e,!1,Xo,sl,bi)}function ul(e){return Br(e,!1,Zo,il,vi)}function jn(e){return Br(e,!0,Qo,ol,wi)}function Br(e,t,n,r,s){if(!G(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=s.get(e);if(i)return i;const o=al(e);if(o===0)return e;const l=new Proxy(e,o===2?r:n);return s.set(e,l),l}function bt(e){return At(e)?bt(e.__v_raw):!!(e&&e.__v_isReactive)}function At(e){return!!(e&&e.__v_isReadonly)}function Rn(e){return!!(e&&e.__v_isShallow)}function Ci(e){return bt(e)||At(e)}function Q(e){const t=e&&e.__v_raw;return t?Q(t):e}function Dt(e){return xn(e,"__v_skip",!0),e}const qt=e=>G(e)?Dn(e):e,Hr=e=>G(e)?jn(e):e;function $r(e){Je&&Se&&(e=Q(e),gi(e.dep||(e.dep=Pr())))}function kr(e,t){e=Q(e);const n=e.dep;n&&fr(n)}function ae(e){return!!(e&&e.__v_isRef===!0)}function ue(e){return Ei(e,!1)}function Dr(e){return Ei(e,!0)}function Ei(e,t){return ae(e)?e:new fl(e,t)}class fl{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:Q(t),this._value=n?t:qt(t)}get value(){return $r(this),this._value}set value(t){const n=this.__v_isShallow||Rn(t)||At(t);t=n?t:Q(t),dt(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:qt(t),kr(this))}}function jr(e){return ae(e)?e.value:e}const dl={get:(e,t,n)=>jr(Reflect.get(e,t,n)),set:(e,t,n,r)=>{const s=e[t];return ae(s)&&!ae(n)?(s.value=n,!0):Reflect.set(e,t,n,r)}};function xi(e){return bt(e)?e:new Proxy(e,dl)}class hl{constructor(t){this.dep=void 0,this.__v_isRef=!0;const{get:n,set:r}=t(()=>$r(this),()=>kr(this));this._get=n,this._set=r}get value(){return this._get()}set value(t){this._set(t)}}function pl(e){return new hl(e)}class gl{constructor(t,n,r){this._object=t,this._key=n,this._defaultValue=r,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return Vo(Q(this._object),this._key)}}class ml{constructor(t){this._getter=t,this.__v_isRef=!0,this.__v_isReadonly=!0}get value(){return this._getter()}}function yl(e,t,n){return ae(e)?e:V(e)?new ml(e):G(e)&&arguments.length>1?_l(e,t,n):ue(e)}function _l(e,t,n){const r=e[t];return ae(r)?r:new gl(e,t,n)}class bl{constructor(t,n,r,s){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this._dirty=!0,this.effect=new Mr(t,()=>{this._dirty||(this._dirty=!0,kr(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!s,this.__v_isReadonly=r}get value(){const t=Q(this);return $r(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}function vl(e,t,n=!1){let r,s;const i=V(e);return i?(r=e,s=Oe):(r=e.get,s=e.set),new bl(r,s,i||!s,n)}function Xe(e,t,n,r){let s;try{s=r?e(...r):e()}catch(i){Pt(i,t,n)}return s}function Ae(e,t,n,r){if(V(e)){const i=Xe(e,t,n,r);return i&&Sr(i)&&i.catch(o=>{Pt(o,t,n)}),i}const s=[];for(let i=0;i<e.length;i++)s.push(Ae(e[i],t,n,r));return s}function Pt(e,t,n,r=!0){const s=t?t.vnode:null;if(t){let i=t.parent;const o=t.proxy,l=n;for(;i;){const a=i.ec;if(a){for(let f=0;f<a.length;f++)if(a[f](e,o,l)===!1)return}i=i.parent}const c=t.appContext.config.errorHandler;if(c){Xe(c,null,10,[e,o,l]);return}}wl(e,n,s,r)}function wl(e,t,n,r=!0){console.error(e)}let zt=!1,dr=!1;const he=[];let Le=0;const vt=[];let ke=null,ot=0;const Ti=Promise.resolve();let Ur=null;function Un(e){const t=Ur||Ti;return e?t.then(this?e.bind(this):e):t}function Cl(e){let t=Le+1,n=he.length;for(;t<n;){const r=t+n>>>1,s=he[r],i=Yt(s);i<e||i===e&&s.pre?t=r+1:n=r}return t}function Kn(e){(!he.length||!he.includes(e,zt&&e.allowRecurse?Le+1:Le))&&(e.id==null?he.push(e):he.splice(Cl(e.id),0,e),Ai())}function Ai(){!zt&&!dr&&(dr=!0,Ur=Ti.then(Ri))}function El(e){const t=he.indexOf(e);t>Le&&he.splice(t,1)}function hr(e){D(e)?vt.push(...e):(!ke||!ke.includes(e,e.allowRecurse?ot+1:ot))&&vt.push(e),Ai()}function ys(e,t=zt?Le+1:0){for(;t<he.length;t++){const n=he[t];n&&n.pre&&(he.splice(t,1),t--,n())}}function Sn(e){if(vt.length){const t=[...new Set(vt)];if(vt.length=0,ke){ke.push(...t);return}for(ke=t,ke.sort((n,r)=>Yt(n)-Yt(r)),ot=0;ot<ke.length;ot++)ke[ot]();ke=null,ot=0}}const Yt=e=>e.id==null?1/0:e.id,xl=(e,t)=>{const n=Yt(e)-Yt(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function Ri(e){dr=!1,zt=!0,he.sort(xl);const t=Oe;try{for(Le=0;Le<he.length;Le++){const n=he[Le];n&&n.active!==!1&&Xe(n,null,14)}}finally{Le=0,he.length=0,Sn(),zt=!1,Ur=null,(he.length||vt.length)&&Ri()}}function Tl(e,t,...n){if(e.isUnmounted)return;const r=e.vnode.props||te;let s=n;const i=t.startsWith("update:"),o=i&&t.slice(7);if(o&&o in r){const f=`${o==="modelValue"?"model":o}Modifiers`,{number:d,trim:g}=r[f]||te;g&&(s=n.map(b=>ie(b)?b.trim():b)),d&&(s=n.map(Tn))}let l,c=r[l=vn(t)]||r[l=vn(Be(t))];!c&&i&&(c=r[l=vn(ht(t))]),c&&Ae(c,e,6,s);const a=r[l+"Once"];if(a){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,Ae(a,e,6,s)}}function Si(e,t,n=!1){const r=t.emitsCache,s=r.get(e);if(s!==void 0)return s;const i=e.emits;let o={},l=!1;if(!V(e)){const c=a=>{const f=Si(a,t,!0);f&&(l=!0,fe(o,f))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!i&&!l?(G(e)&&r.set(e,null),null):(D(i)?i.forEach(c=>o[c]=null):fe(o,i),G(e)&&r.set(e,o),o)}function Wn(e,t){return!e||!en(t)?!1:(t=t.slice(2).replace(/Once$/,""),X(e,t[0].toLowerCase()+t.slice(1))||X(e,ht(t))||X(e,t))}let de=null,Vn=null;function On(e){const t=de;return de=e,Vn=e&&e.type.__scopeId||null,t}function Ga(e){Vn=e}function eu(){Vn=null}function Al(e,t=de,n){if(!t||e._n)return e;const r=(...s)=>{r._d&&Is(-1);const i=On(t);let o;try{o=e(...s)}finally{On(i),r._d&&Is(1)}return o};return r._n=!0,r._c=!0,r._d=!0,r}function Gn(e){const{type:t,vnode:n,proxy:r,withProxy:s,props:i,propsOptions:[o],slots:l,attrs:c,emit:a,render:f,renderCache:d,data:g,setupState:b,ctx:v,inheritAttrs:x}=e;let N,k;const H=On(e);try{if(n.shapeFlag&4){const p=s||r;N=Ee(f.call(p,p,d,i,b,g,v)),k=c}else{const p=t;N=Ee(p.length>1?p(i,{attrs:c,slots:l,emit:a}):p(i,null)),k=t.props?c:Sl(c)}}catch(p){Wt.length=0,Pt(p,e,1),N=se(ge)}let y=N;if(k&&x!==!1){const p=Object.keys(k),{shapeFlag:T}=y;p.length&&T&7&&(o&&p.some(Ar)&&(k=Ol(k,o)),y=et(y,k))}return n.dirs&&(y=et(y),y.dirs=y.dirs?y.dirs.concat(n.dirs):n.dirs),n.transition&&(y.transition=n.transition),N=y,On(H),N}function Rl(e){let t;for(let n=0;n<e.length;n++){const r=e[n];if(Xt(r)){if(r.type!==ge||r.children==="v-if"){if(t)return;t=r}}else return}return t}const Sl=e=>{let t;for(const n in e)(n==="class"||n==="style"||en(n))&&((t||(t={}))[n]=e[n]);return t},Ol=(e,t)=>{const n={};for(const r in e)(!Ar(r)||!(r.slice(9)in t))&&(n[r]=e[r]);return n};function Fl(e,t,n){const{props:r,children:s,component:i}=e,{props:o,children:l,patchFlag:c}=t,a=i.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return r?_s(r,o,a):!!o;if(c&8){const f=t.dynamicProps;for(let d=0;d<f.length;d++){const g=f[d];if(o[g]!==r[g]&&!Wn(a,g))return!0}}}else return(s||l)&&(!l||!l.$stable)?!0:r===o?!1:r?o?_s(r,o,a):!0:!!o;return!1}function _s(e,t,n){const r=Object.keys(t);if(r.length!==Object.keys(e).length)return!0;for(let s=0;s<r.length;s++){const i=r[s];if(t[i]!==e[i]&&!Wn(n,i))return!0}return!1}function Kr({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}const Wr="components";function tu(e,t){return Fi(Wr,e,!0,t)||e}const Oi=Symbol.for("v-ndc");function nu(e){return ie(e)?Fi(Wr,e,!1)||e:e||Oi}function Fi(e,t,n=!0,r=!1){const s=de||ce;if(s){const i=s.type;if(e===Wr){const l=Oc(i,!1);if(l&&(l===t||l===Be(t)||l===Hn(Be(t))))return i}const o=bs(s[e]||i[e],t)||bs(s.appContext[e],t);return!o&&r?i:o}}function bs(e,t){return e&&(e[t]||e[Be(t)]||e[Hn(Be(t))])}const Il=e=>e.__isSuspense,Pl={name:"Suspense",__isSuspense:!0,process(e,t,n,r,s,i,o,l,c,a){e==null?Ml(t,n,r,s,i,o,l,c,a):Ll(e,t,n,r,s,o,l,c,a)},hydrate:Nl,create:Vr,normalize:Bl},ru=Pl;function Jt(e,t){const n=e.props&&e.props[t];V(n)&&n()}function Ml(e,t,n,r,s,i,o,l,c){const{p:a,o:{createElement:f}}=c,d=f("div"),g=e.suspense=Vr(e,s,r,t,d,n,i,o,l,c);a(null,g.pendingBranch=e.ssContent,d,null,r,g,i,o),g.deps>0?(Jt(e,"onPending"),Jt(e,"onFallback"),a(null,e.ssFallback,t,n,r,null,i,o),wt(g,e.ssFallback)):g.resolve(!1,!0)}function Ll(e,t,n,r,s,i,o,l,{p:c,um:a,o:{createElement:f}}){const d=t.suspense=e.suspense;d.vnode=t,t.el=e.el;const g=t.ssContent,b=t.ssFallback,{activeBranch:v,pendingBranch:x,isInFallback:N,isHydrating:k}=d;if(x)d.pendingBranch=g,Ne(g,x)?(c(x,g,d.hiddenContainer,null,s,d,i,o,l),d.deps<=0?d.resolve():N&&(c(v,b,n,r,s,null,i,o,l),wt(d,b))):(d.pendingId++,k?(d.isHydrating=!1,d.activeBranch=x):a(x,s,d),d.deps=0,d.effects.length=0,d.hiddenContainer=f("div"),N?(c(null,g,d.hiddenContainer,null,s,d,i,o,l),d.deps<=0?d.resolve():(c(v,b,n,r,s,null,i,o,l),wt(d,b))):v&&Ne(g,v)?(c(v,g,n,r,s,d,i,o,l),d.resolve(!0)):(c(null,g,d.hiddenContainer,null,s,d,i,o,l),d.deps<=0&&d.resolve()));else if(v&&Ne(g,v))c(v,g,n,r,s,d,i,o,l),wt(d,g);else if(Jt(t,"onPending"),d.pendingBranch=g,d.pendingId++,c(null,g,d.hiddenContainer,null,s,d,i,o,l),d.deps<=0)d.resolve();else{const{timeout:H,pendingId:y}=d;H>0?setTimeout(()=>{d.pendingId===y&&d.fallback(b)},H):H===0&&d.fallback(b)}}function Vr(e,t,n,r,s,i,o,l,c,a,f=!1){const{p:d,m:g,um:b,n:v,o:{parentNode:x,remove:N}}=a;let k;const H=Hl(e);H&&t!=null&&t.pendingBranch&&(k=t.pendingId,t.deps++);const y=e.props?ci(e.props.timeout):void 0,p={vnode:e,parent:t,parentComponent:n,isSVG:o,container:r,hiddenContainer:s,anchor:i,deps:0,pendingId:0,timeout:typeof y=="number"?y:-1,activeBranch:null,pendingBranch:null,isInFallback:!0,isHydrating:f,isUnmounted:!1,effects:[],resolve(T=!1,B=!1){const{vnode:M,activeBranch:_,pendingBranch:O,pendingId:R,effects:W,parentComponent:I,container:q}=p;let ne=!1;if(p.isHydrating)p.isHydrating=!1;else if(!T){ne=_&&O.transition&&O.transition.mode==="out-in",ne&&(_.transition.afterLeave=()=>{R===p.pendingId&&(g(O,q,Y,0),hr(W))});let{anchor:Y}=p;_&&(Y=v(_),b(_,I,p,!0)),ne||g(O,q,Y,0)}wt(p,O),p.pendingBranch=null,p.isInFallback=!1;let re=p.parent,$=!1;for(;re;){if(re.pendingBranch){re.effects.push(...W),$=!0;break}re=re.parent}!$&&!ne&&hr(W),p.effects=[],H&&t&&t.pendingBranch&&k===t.pendingId&&(t.deps--,t.deps===0&&!B&&t.resolve()),Jt(M,"onResolve")},fallback(T){if(!p.pendingBranch)return;const{vnode:B,activeBranch:M,parentComponent:_,container:O,isSVG:R}=p;Jt(B,"onFallback");const W=v(M),I=()=>{p.isInFallback&&(d(null,T,O,W,_,null,R,l,c),wt(p,T))},q=T.transition&&T.transition.mode==="out-in";q&&(M.transition.afterLeave=I),p.isInFallback=!0,b(M,_,null,!0),q||I()},move(T,B,M){p.activeBranch&&g(p.activeBranch,T,B,M),p.container=T},next(){return p.activeBranch&&v(p.activeBranch)},registerDep(T,B){const M=!!p.pendingBranch;M&&p.deps++;const _=T.vnode.el;T.asyncDep.catch(O=>{Pt(O,T,0)}).then(O=>{if(T.isUnmounted||p.isUnmounted||p.pendingId!==T.suspenseId)return;T.asyncResolved=!0;const{vnode:R}=T;wr(T,O,!1),_&&(R.el=_);const W=!_&&T.subTree.el;B(T,R,x(_||T.subTree.el),_?null:v(T.subTree),p,o,c),W&&N(W),Kr(T,R.el),M&&--p.deps===0&&p.resolve()})},unmount(T,B){p.isUnmounted=!0,p.activeBranch&&b(p.activeBranch,n,T,B),p.pendingBranch&&b(p.pendingBranch,n,T,B)}};return p}function Nl(e,t,n,r,s,i,o,l,c){const a=t.suspense=Vr(t,r,n,e.parentNode,document.createElement("div"),null,s,i,o,l,!0),f=c(e,a.pendingBranch=t.ssContent,n,a,i,o);return a.deps===0&&a.resolve(!1,!0),f}function Bl(e){const{shapeFlag:t,children:n}=e,r=t&32;e.ssContent=vs(r?n.default:n),e.ssFallback=r?vs(n.fallback):se(ge)}function vs(e){let t;if(V(e)){const n=St&&e._c;n&&(e._d=!1,Qr()),e=e(),n&&(e._d=!0,t=Te,Ji())}return D(e)&&(e=Rl(e)),e=Ee(e),t&&!e.dynamicChildren&&(e.dynamicChildren=t.filter(n=>n!==e)),e}function Ii(e,t){t&&t.pendingBranch?D(e)?t.effects.push(...e):t.effects.push(e):hr(e)}function wt(e,t){e.activeBranch=t;const{vnode:n,parentComponent:r}=e,s=n.el=t.el;r&&r.subTree===n&&(r.vnode.el=s,Kr(r,s))}function Hl(e){var t;return((t=e.props)==null?void 0:t.suspensible)!=null&&e.props.suspensible!==!1}function qr(e,t){return qn(e,null,t)}function su(e,t){return qn(e,null,{flush:"post"})}const dn={};function Qe(e,t,n){return qn(e,t,n)}function qn(e,t,{immediate:n,deep:r,flush:s,onTrack:i,onTrigger:o}=te){var l;const c=fi()===((l=ce)==null?void 0:l.scope)?ce:null;let a,f=!1,d=!1;if(ae(e)?(a=()=>e.value,f=Rn(e)):bt(e)?(a=()=>e,r=!0):D(e)?(d=!0,f=e.some(p=>bt(p)||Rn(p)),a=()=>e.map(p=>{if(ae(p))return p.value;if(bt(p))return at(p);if(V(p))return Xe(p,c,2)})):V(e)?t?a=()=>Xe(e,c,2):a=()=>{if(!(c&&c.isUnmounted))return g&&g(),Ae(e,c,3,[b])}:a=Oe,t&&r){const p=a;a=()=>at(p())}let g,b=p=>{g=H.onStop=()=>{Xe(p,c,4)}},v;if(Ot)if(b=Oe,t?n&&Ae(t,c,3,[a(),d?[]:void 0,b]):a(),s==="sync"){const p=Pc();v=p.__watcherHandles||(p.__watcherHandles=[])}else return Oe;let x=d?new Array(e.length).fill(dn):dn;const N=()=>{if(H.active)if(t){const p=H.run();(r||f||(d?p.some((T,B)=>dt(T,x[B])):dt(p,x)))&&(g&&g(),Ae(t,c,3,[p,x===dn?void 0:d&&x[0]===dn?[]:x,b]),x=p)}else H.run()};N.allowRecurse=!!t;let k;s==="sync"?k=N:s==="post"?k=()=>me(N,c&&c.suspense):(N.pre=!0,c&&(N.id=c.uid),k=()=>Kn(N));const H=new Mr(a,k);t?n?N():x=H.run():s==="post"?me(H.run.bind(H),c&&c.suspense):H.run();const y=()=>{H.stop(),c&&c.scope&&Rr(c.scope.effects,H)};return v&&v.push(y),y}function $l(e,t,n){const r=this.proxy,s=ie(e)?e.includes(".")?Pi(r,e):()=>r[e]:e.bind(r,r);let i;V(t)?i=t:(i=t.handler,n=t);const o=ce;tt(this);const l=qn(s,i.bind(r),n);return o?tt(o):Ze(),l}function Pi(e,t){const n=t.split(".");return()=>{let r=e;for(let s=0;s<n.length&&r;s++)r=r[n[s]];return r}}function at(e,t){if(!G(e)||e.__v_skip||(t=t||new Set,t.has(e)))return e;if(t.add(e),ae(e))at(e.value,t);else if(D(e))for(let n=0;n<e.length;n++)at(e[n],t);else if(Nn(e)||_t(e))e.forEach(n=>{at(n,t)});else if(li(e))for(const n in e)at(e[n],t);return e}function iu(e,t){const n=de;if(n===null)return e;const r=Xn(n)||n.proxy,s=e.dirs||(e.dirs=[]);for(let i=0;i<t.length;i++){let[o,l,c,a=te]=t[i];o&&(V(o)&&(o={mounted:o,updated:o}),o.deep&&at(l),s.push({dir:o,instance:r,value:l,oldValue:void 0,arg:c,modifiers:a}))}return e}function Me(e,t,n,r){const s=e.dirs,i=t&&t.dirs;for(let o=0;o<s.length;o++){const l=s[o];i&&(l.oldValue=i[o].value);let c=l.dir[r];c&&(Ft(),Ae(c,n,8,[e.el,l,e,t]),It())}}const ze=Symbol("_leaveCb"),hn=Symbol("_enterCb");function kl(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Mt(()=>{e.isMounted=!0}),Hi(()=>{e.isUnmounting=!0}),e}const we=[Function,Array],Mi={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:we,onEnter:we,onAfterEnter:we,onEnterCancelled:we,onBeforeLeave:we,onLeave:we,onAfterLeave:we,onLeaveCancelled:we,onBeforeAppear:we,onAppear:we,onAfterAppear:we,onAppearCancelled:we},Dl={name:"BaseTransition",props:Mi,setup(e,{slots:t}){const n=rn(),r=kl();let s;return()=>{const i=t.default&&Ni(t.default(),!0);if(!i||!i.length)return;let o=i[0];if(i.length>1){for(const x of i)if(x.type!==ge){o=x;break}}const l=Q(e),{mode:c}=l;if(r.isLeaving)return er(o);const a=ws(o);if(!a)return er(o);const f=pr(a,l,r,n);gr(a,f);const d=n.subTree,g=d&&ws(d);let b=!1;const{getTransitionKey:v}=a.type;if(v){const x=v();s===void 0?s=x:x!==s&&(s=x,b=!0)}if(g&&g.type!==ge&&(!Ne(a,g)||b)){const x=pr(g,l,r,n);if(gr(g,x),c==="out-in")return r.isLeaving=!0,x.afterLeave=()=>{r.isLeaving=!1,n.update.active!==!1&&n.update()},er(o);c==="in-out"&&a.type!==ge&&(x.delayLeave=(N,k,H)=>{const y=Li(r,g);y[String(g.key)]=g,N[ze]=()=>{k(),N[ze]=void 0,delete f.delayedLeave},f.delayedLeave=H})}return o}}},jl=Dl;function Li(e,t){const{leavingVNodes:n}=e;let r=n.get(t.type);return r||(r=Object.create(null),n.set(t.type,r)),r}function pr(e,t,n,r){const{appear:s,mode:i,persisted:o=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:a,onEnterCancelled:f,onBeforeLeave:d,onLeave:g,onAfterLeave:b,onLeaveCancelled:v,onBeforeAppear:x,onAppear:N,onAfterAppear:k,onAppearCancelled:H}=t,y=String(e.key),p=Li(n,e),T=(_,O)=>{_&&Ae(_,r,9,O)},B=(_,O)=>{const R=O[1];T(_,O),D(_)?_.every(W=>W.length<=1)&&R():_.length<=1&&R()},M={mode:i,persisted:o,beforeEnter(_){let O=l;if(!n.isMounted)if(s)O=x||l;else return;_[ze]&&_[ze](!0);const R=p[y];R&&Ne(e,R)&&R.el[ze]&&R.el[ze](),T(O,[_])},enter(_){let O=c,R=a,W=f;if(!n.isMounted)if(s)O=N||c,R=k||a,W=H||f;else return;let I=!1;const q=_[hn]=ne=>{I||(I=!0,ne?T(W,[_]):T(R,[_]),M.delayedLeave&&M.delayedLeave(),_[hn]=void 0)};O?B(O,[_,q]):q()},leave(_,O){const R=String(e.key);if(_[hn]&&_[hn](!0),n.isUnmounting)return O();T(d,[_]);let W=!1;const I=_[ze]=q=>{W||(W=!0,O(),q?T(v,[_]):T(b,[_]),_[ze]=void 0,p[R]===e&&delete p[R])};p[R]=e,g?B(g,[_,I]):I()},clone(_){return pr(_,t,n,r)}};return M}function er(e){if(nn(e))return e=et(e),e.children=null,e}function ws(e){return nn(e)?e.children?e.children[0]:void 0:e}function gr(e,t){e.shapeFlag&6&&e.component?gr(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function Ni(e,t=!1,n){let r=[],s=0;for(let i=0;i<e.length;i++){let o=e[i];const l=n==null?o.key:String(n)+String(o.key!=null?o.key:i);o.type===ye?(o.patchFlag&128&&s++,r=r.concat(Ni(o.children,t,l))):(t||o.type!==ge)&&r.push(l!=null?et(o,{key:l}):o)}if(s>1)for(let i=0;i<r.length;i++)r[i].patchFlag=-2;return r}/*! #__NO_SIDE_EFFECTS__ */function zr(e,t){return V(e)?(()=>fe({name:e.name},t,{setup:e}))():e}const Ct=e=>!!e.type.__asyncLoader;/*! #__NO_SIDE_EFFECTS__ */function ou(e){V(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:r,delay:s=200,timeout:i,suspensible:o=!0,onError:l}=e;let c=null,a,f=0;const d=()=>(f++,c=null,g()),g=()=>{let b;return c||(b=c=t().catch(v=>{if(v=v instanceof Error?v:new Error(String(v)),l)return new Promise((x,N)=>{l(v,()=>x(d()),()=>N(v),f+1)});throw v}).then(v=>b!==c&&c?c:(v&&(v.__esModule||v[Symbol.toStringTag]==="Module")&&(v=v.default),a=v,v)))};return zr({name:"AsyncComponentWrapper",__asyncLoader:g,get __asyncResolved(){return a},setup(){const b=ce;if(a)return()=>tr(a,b);const v=H=>{c=null,Pt(H,b,13,!r)};if(o&&b.suspense||Ot)return g().then(H=>()=>tr(H,b)).catch(H=>(v(H),()=>r?se(r,{error:H}):null));const x=ue(!1),N=ue(),k=ue(!!s);return s&&setTimeout(()=>{k.value=!1},s),i!=null&&setTimeout(()=>{if(!x.value&&!N.value){const H=new Error(`Async component timed out after ${i}ms.`);v(H),N.value=H}},i),g().then(()=>{x.value=!0,b.parent&&nn(b.parent.vnode)&&Kn(b.parent.update)}).catch(H=>{v(H),N.value=H}),()=>{if(x.value&&a)return tr(a,b);if(N.value&&r)return se(r,{error:N.value});if(n&&!k.value)return se(n)}}})}function tr(e,t){const{ref:n,props:r,children:s,ce:i}=t.vnode,o=se(e,r,s);return o.ref=n,o.ce=i,delete t.vnode.ce,o}const nn=e=>e.type.__isKeepAlive;function Ul(e,t){Bi(e,"a",t)}function Kl(e,t){Bi(e,"da",t)}function Bi(e,t,n=ce){const r=e.__wdc||(e.__wdc=()=>{let s=n;for(;s;){if(s.isDeactivated)return;s=s.parent}return e()});if(zn(t,r,n),n){let s=n.parent;for(;s&&s.parent;)nn(s.parent.vnode)&&Wl(r,t,n,s),s=s.parent}}function Wl(e,t,n,r){const s=zn(t,e,r,!0);Yn(()=>{Rr(r[t],s)},n)}function zn(e,t,n=ce,r=!1){if(n){const s=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...o)=>{if(n.isUnmounted)return;Ft(),tt(n);const l=Ae(t,n,e,o);return Ze(),It(),l});return r?s.unshift(i):s.push(i),i}}const Ue=e=>(t,n=ce)=>(!Ot||e==="sp")&&zn(e,(...r)=>t(...r),n),Vl=Ue("bm"),Mt=Ue("m"),ql=Ue("bu"),zl=Ue("u"),Hi=Ue("bum"),Yn=Ue("um"),Yl=Ue("sp"),Jl=Ue("rtg"),Xl=Ue("rtc");function Ql(e,t=ce){zn("ec",e,t)}function lu(e,t,n,r){let s;const i=n&&n[r];if(D(e)||ie(e)){s=new Array(e.length);for(let o=0,l=e.length;o<l;o++)s[o]=t(e[o],o,void 0,i&&i[o])}else if(typeof e=="number"){s=new Array(e);for(let o=0;o<e;o++)s[o]=t(o+1,o,void 0,i&&i[o])}else if(G(e))if(e[Symbol.iterator])s=Array.from(e,(o,l)=>t(o,l,void 0,i&&i[l]));else{const o=Object.keys(e);s=new Array(o.length);for(let l=0,c=o.length;l<c;l++){const a=o[l];s[l]=t(e[a],a,l,i&&i[l])}}else s=[];return n&&(n[r]=s),s}function cu(e,t,n={},r,s){if(de.isCE||de.parent&&Ct(de.parent)&&de.parent.isCE)return t!=="default"&&(n.name=t),se("slot",n,r&&r());let i=e[t];i&&i._c&&(i._d=!1),Qr();const o=i&&$i(i(n)),l=Qi(ye,{key:n.key||o&&o.key||`_${t}`},o||(r?r():[]),o&&e._===1?64:-2);return!s&&l.scopeId&&(l.slotScopeIds=[l.scopeId+"-s"]),i&&i._c&&(i._d=!0),l}function $i(e){return e.some(t=>Xt(t)?!(t.type===ge||t.type===ye&&!$i(t.children)):!0)?e:null}function au(e,t){const n={};for(const r in e)n[t&&/[A-Z]/.test(r)?`on:${r}`:vn(r)]=e[r];return n}const mr=e=>e?to(e)?Xn(e)||e.proxy:mr(e.parent):null,jt=fe(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>mr(e.parent),$root:e=>mr(e.root),$emit:e=>e.emit,$options:e=>Yr(e),$forceUpdate:e=>e.f||(e.f=()=>Kn(e.update)),$nextTick:e=>e.n||(e.n=Un.bind(e.proxy)),$watch:e=>$l.bind(e)}),nr=(e,t)=>e!==te&&!e.__isScriptSetup&&X(e,t),Zl={get({_:e},t){const{ctx:n,setupState:r,data:s,props:i,accessCache:o,type:l,appContext:c}=e;let a;if(t[0]!=="$"){const b=o[t];if(b!==void 0)switch(b){case 1:return r[t];case 2:return s[t];case 4:return n[t];case 3:return i[t]}else{if(nr(r,t))return o[t]=1,r[t];if(s!==te&&X(s,t))return o[t]=2,s[t];if((a=e.propsOptions[0])&&X(a,t))return o[t]=3,i[t];if(n!==te&&X(n,t))return o[t]=4,n[t];yr&&(o[t]=0)}}const f=jt[t];let d,g;if(f)return t==="$attrs"&&_e(e,"get",t),f(e);if((d=l.__cssModules)&&(d=d[t]))return d;if(n!==te&&X(n,t))return o[t]=4,n[t];if(g=c.config.globalProperties,X(g,t))return g[t]},set({_:e},t,n){const{data:r,setupState:s,ctx:i}=e;return nr(s,t)?(s[t]=n,!0):r!==te&&X(r,t)?(r[t]=n,!0):X(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:s,propsOptions:i}},o){let l;return!!n[o]||e!==te&&X(e,o)||nr(t,o)||(l=i[0])&&X(l,o)||X(r,o)||X(jt,o)||X(s.config.globalProperties,o)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:X(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function uu(){return Gl().slots}function Gl(){const e=rn();return e.setupContext||(e.setupContext=ro(e))}function Cs(e){return D(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}function fu(e){const t=rn();let n=e();return Ze(),Sr(n)&&(n=n.catch(r=>{throw tt(t),r})),[n,()=>tt(t)]}let yr=!0;function ec(e){const t=Yr(e),n=e.proxy,r=e.ctx;yr=!1,t.beforeCreate&&Es(t.beforeCreate,e,"bc");const{data:s,computed:i,methods:o,watch:l,provide:c,inject:a,created:f,beforeMount:d,mounted:g,beforeUpdate:b,updated:v,activated:x,deactivated:N,beforeDestroy:k,beforeUnmount:H,destroyed:y,unmounted:p,render:T,renderTracked:B,renderTriggered:M,errorCaptured:_,serverPrefetch:O,expose:R,inheritAttrs:W,components:I,directives:q,filters:ne}=t;if(a&&tc(a,r,null),o)for(const Y in o){const K=o[Y];V(K)&&(r[Y]=K.bind(n))}if(s){const Y=s.call(n,n);G(Y)&&(e.data=Dn(Y))}if(yr=!0,i)for(const Y in i){const K=i[Y],He=V(K)?K.bind(n,n):V(K.get)?K.get.bind(n,n):Oe,sn=!V(K)&&V(K.set)?K.set.bind(n):Oe,nt=le({get:He,set:sn});Object.defineProperty(r,Y,{enumerable:!0,configurable:!0,get:()=>nt.value,set:Ie=>nt.value=Ie})}if(l)for(const Y in l)ki(l[Y],r,n,Y);if(c){const Y=V(c)?c.call(n):c;Reflect.ownKeys(Y).forEach(K=>{lc(K,Y[K])})}f&&Es(f,e,"c");function $(Y,K){D(K)?K.forEach(He=>Y(He.bind(n))):K&&Y(K.bind(n))}if($(Vl,d),$(Mt,g),$(ql,b),$(zl,v),$(Ul,x),$(Kl,N),$(Ql,_),$(Xl,B),$(Jl,M),$(Hi,H),$(Yn,p),$(Yl,O),D(R))if(R.length){const Y=e.exposed||(e.exposed={});R.forEach(K=>{Object.defineProperty(Y,K,{get:()=>n[K],set:He=>n[K]=He})})}else e.exposed||(e.exposed={});T&&e.render===Oe&&(e.render=T),W!=null&&(e.inheritAttrs=W),I&&(e.components=I),q&&(e.directives=q)}function tc(e,t,n=Oe){D(e)&&(e=_r(e));for(const r in e){const s=e[r];let i;G(s)?"default"in s?i=Et(s.from||r,s.default,!0):i=Et(s.from||r):i=Et(s),ae(i)?Object.defineProperty(t,r,{enumerable:!0,configurable:!0,get:()=>i.value,set:o=>i.value=o}):t[r]=i}}function Es(e,t,n){Ae(D(e)?e.map(r=>r.bind(t.proxy)):e.bind(t.proxy),t,n)}function ki(e,t,n,r){const s=r.includes(".")?Pi(n,r):()=>n[r];if(ie(e)){const i=t[e];V(i)&&Qe(s,i)}else if(V(e))Qe(s,e.bind(n));else if(G(e))if(D(e))e.forEach(i=>ki(i,t,n,r));else{const i=V(e.handler)?e.handler.bind(n):t[e.handler];V(i)&&Qe(s,i,e)}}function Yr(e){const t=e.type,{mixins:n,extends:r}=t,{mixins:s,optionsCache:i,config:{optionMergeStrategies:o}}=e.appContext,l=i.get(t);let c;return l?c=l:!s.length&&!n&&!r?c=t:(c={},s.length&&s.forEach(a=>Fn(c,a,o,!0)),Fn(c,t,o)),G(t)&&i.set(t,c),c}function Fn(e,t,n,r=!1){const{mixins:s,extends:i}=t;i&&Fn(e,i,n,!0),s&&s.forEach(o=>Fn(e,o,n,!0));for(const o in t)if(!(r&&o==="expose")){const l=nc[o]||n&&n[o];e[o]=l?l(e[o],t[o]):t[o]}return e}const nc={data:xs,props:Ts,emits:Ts,methods:$t,computed:$t,beforeCreate:pe,created:pe,beforeMount:pe,mounted:pe,beforeUpdate:pe,updated:pe,beforeDestroy:pe,beforeUnmount:pe,destroyed:pe,unmounted:pe,activated:pe,deactivated:pe,errorCaptured:pe,serverPrefetch:pe,components:$t,directives:$t,watch:sc,provide:xs,inject:rc};function xs(e,t){return t?e?function(){return fe(V(e)?e.call(this,this):e,V(t)?t.call(this,this):t)}:t:e}function rc(e,t){return $t(_r(e),_r(t))}function _r(e){if(D(e)){const t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function pe(e,t){return e?[...new Set([].concat(e,t))]:t}function $t(e,t){return e?fe(Object.create(null),e,t):t}function Ts(e,t){return e?D(e)&&D(t)?[...new Set([...e,...t])]:fe(Object.create(null),Cs(e),Cs(t??{})):t}function sc(e,t){if(!e)return t;if(!t)return e;const n=fe(Object.create(null),e);for(const r in t)n[r]=pe(e[r],t[r]);return n}function Di(){return{app:null,config:{isNativeTag:Ao,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let ic=0;function oc(e,t){return function(r,s=null){V(r)||(r=fe({},r)),s!=null&&!G(s)&&(s=null);const i=Di(),o=new WeakSet;let l=!1;const c=i.app={_uid:ic++,_component:r,_props:s,_container:null,_context:i,_instance:null,version:Mc,get config(){return i.config},set config(a){},use(a,...f){return o.has(a)||(a&&V(a.install)?(o.add(a),a.install(c,...f)):V(a)&&(o.add(a),a(c,...f))),c},mixin(a){return i.mixins.includes(a)||i.mixins.push(a),c},component(a,f){return f?(i.components[a]=f,c):i.components[a]},directive(a,f){return f?(i.directives[a]=f,c):i.directives[a]},mount(a,f,d){if(!l){const g=se(r,s);return g.appContext=i,f&&t?t(g,a):e(g,a,d),l=!0,c._container=a,a.__vue_app__=c,Xn(g.component)||g.component.proxy}},unmount(){l&&(e(null,c._container),delete c._container.__vue_app__)},provide(a,f){return i.provides[a]=f,c},runWithContext(a){In=c;try{return a()}finally{In=null}}};return c}}let In=null;function lc(e,t){if(ce){let n=ce.provides;const r=ce.parent&&ce.parent.provides;r===n&&(n=ce.provides=Object.create(r)),n[e]=t}}function Et(e,t,n=!1){const r=ce||de;if(r||In){const s=r?r.parent==null?r.vnode.appContext&&r.vnode.appContext.provides:r.parent.provides:In._context.provides;if(s&&e in s)return s[e];if(arguments.length>1)return n&&V(t)?t.call(r&&r.proxy):t}}function cc(e,t,n,r=!1){const s={},i={};xn(i,Jn,1),e.propsDefaults=Object.create(null),ji(e,t,s,i);for(const o in e.propsOptions[0])o in s||(s[o]=void 0);n?e.props=r?s:ul(s):e.type.props?e.props=s:e.props=i,e.attrs=i}function ac(e,t,n,r){const{props:s,attrs:i,vnode:{patchFlag:o}}=e,l=Q(s),[c]=e.propsOptions;let a=!1;if((r||o>0)&&!(o&16)){if(o&8){const f=e.vnode.dynamicProps;for(let d=0;d<f.length;d++){let g=f[d];if(Wn(e.emitsOptions,g))continue;const b=t[g];if(c)if(X(i,g))b!==i[g]&&(i[g]=b,a=!0);else{const v=Be(g);s[v]=br(c,l,v,b,e,!1)}else b!==i[g]&&(i[g]=b,a=!0)}}}else{ji(e,t,s,i)&&(a=!0);let f;for(const d in l)(!t||!X(t,d)&&((f=ht(d))===d||!X(t,f)))&&(c?n&&(n[d]!==void 0||n[f]!==void 0)&&(s[d]=br(c,l,d,void 0,e,!0)):delete s[d]);if(i!==l)for(const d in i)(!t||!X(t,d))&&(delete i[d],a=!0)}a&&De(e,"set","$attrs")}function ji(e,t,n,r){const[s,i]=e.propsOptions;let o=!1,l;if(t)for(let c in t){if(kt(c))continue;const a=t[c];let f;s&&X(s,f=Be(c))?!i||!i.includes(f)?n[f]=a:(l||(l={}))[f]=a:Wn(e.emitsOptions,c)||(!(c in r)||a!==r[c])&&(r[c]=a,o=!0)}if(i){const c=Q(n),a=l||te;for(let f=0;f<i.length;f++){const d=i[f];n[d]=br(s,c,d,a[d],e,!X(a,d))}}return o}function br(e,t,n,r,s,i){const o=e[n];if(o!=null){const l=X(o,"default");if(l&&r===void 0){const c=o.default;if(o.type!==Function&&!o.skipFactory&&V(c)){const{propsDefaults:a}=s;n in a?r=a[n]:(tt(s),r=a[n]=c.call(null,t),Ze())}else r=c}o[0]&&(i&&!l?r=!1:o[1]&&(r===""||r===ht(n))&&(r=!0))}return r}function Ui(e,t,n=!1){const r=t.propsCache,s=r.get(e);if(s)return s;const i=e.props,o={},l=[];let c=!1;if(!V(e)){const f=d=>{c=!0;const[g,b]=Ui(d,t,!0);fe(o,g),b&&l.push(...b)};!n&&t.mixins.length&&t.mixins.forEach(f),e.extends&&f(e.extends),e.mixins&&e.mixins.forEach(f)}if(!i&&!c)return G(e)&&r.set(e,yt),yt;if(D(i))for(let f=0;f<i.length;f++){const d=Be(i[f]);As(d)&&(o[d]=te)}else if(i)for(const f in i){const d=Be(f);if(As(d)){const g=i[f],b=o[d]=D(g)||V(g)?{type:g}:fe({},g);if(b){const v=Os(Boolean,b.type),x=Os(String,b.type);b[0]=v>-1,b[1]=x<0||v<x,(v>-1||X(b,"default"))&&l.push(d)}}}const a=[o,l];return G(e)&&r.set(e,a),a}function As(e){return e[0]!=="$"}function Rs(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:e===null?"null":""}function Ss(e,t){return Rs(e)===Rs(t)}function Os(e,t){return D(t)?t.findIndex(n=>Ss(n,e)):V(t)&&Ss(t,e)?0:-1}const Ki=e=>e[0]==="_"||e==="$stable",Jr=e=>D(e)?e.map(Ee):[Ee(e)],uc=(e,t,n)=>{if(t._n)return t;const r=Al((...s)=>Jr(t(...s)),n);return r._c=!1,r},Wi=(e,t,n)=>{const r=e._ctx;for(const s in e){if(Ki(s))continue;const i=e[s];if(V(i))t[s]=uc(s,i,r);else if(i!=null){const o=Jr(i);t[s]=()=>o}}},Vi=(e,t)=>{const n=Jr(t);e.slots.default=()=>n},fc=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=Q(t),xn(t,"_",n)):Wi(t,e.slots={})}else e.slots={},t&&Vi(e,t);xn(e.slots,Jn,1)},dc=(e,t,n)=>{const{vnode:r,slots:s}=e;let i=!0,o=te;if(r.shapeFlag&32){const l=t._;l?n&&l===1?i=!1:(fe(s,t),!n&&l===1&&delete s._):(i=!t.$stable,Wi(t,s)),o=t}else t&&(Vi(e,t),o={default:1});if(i)for(const l in s)!Ki(l)&&o[l]==null&&delete s[l]};function Pn(e,t,n,r,s=!1){if(D(e)){e.forEach((g,b)=>Pn(g,t&&(D(t)?t[b]:t),n,r,s));return}if(Ct(r)&&!s)return;const i=r.shapeFlag&4?Xn(r.component)||r.component.proxy:r.el,o=s?null:i,{i:l,r:c}=e,a=t&&t.r,f=l.refs===te?l.refs={}:l.refs,d=l.setupState;if(a!=null&&a!==c&&(ie(a)?(f[a]=null,X(d,a)&&(d[a]=null)):ae(a)&&(a.value=null)),V(c))Xe(c,l,12,[o,f]);else{const g=ie(c),b=ae(c);if(g||b){const v=()=>{if(e.f){const x=g?X(d,c)?d[c]:f[c]:c.value;s?D(x)&&Rr(x,i):D(x)?x.includes(i)||x.push(i):g?(f[c]=[i],X(d,c)&&(d[c]=f[c])):(c.value=[i],e.k&&(f[e.k]=c.value))}else g?(f[c]=o,X(d,c)&&(d[c]=o)):b&&(c.value=o,e.k&&(f[e.k]=o))};o?(v.id=-1,me(v,n)):v()}}}let We=!1;const pn=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",gn=e=>e.nodeType===8;function hc(e){const{mt:t,p:n,o:{patchProp:r,createText:s,nextSibling:i,parentNode:o,remove:l,insert:c,createComment:a}}=e,f=(y,p)=>{if(!p.hasChildNodes()){n(null,y,p),Sn(),p._vnode=y;return}We=!1,d(p.firstChild,y,null,null,null),Sn(),p._vnode=y,We&&console.error("Hydration completed but contains mismatches.")},d=(y,p,T,B,M,_=!1)=>{const O=gn(y)&&y.data==="[",R=()=>x(y,p,T,B,M,O),{type:W,ref:I,shapeFlag:q,patchFlag:ne}=p;let re=y.nodeType;p.el=y,ne===-2&&(_=!1,p.dynamicChildren=null);let $=null;switch(W){case Rt:re!==3?p.children===""?(c(p.el=s(""),o(y),y),$=y):$=R():(y.data!==p.children&&(We=!0,y.data=p.children),$=i(y));break;case ge:H(y)?($=i(y),k(p.el=y.content.firstChild,y,T)):re!==8||O?$=R():$=i(y);break;case Kt:if(O&&(y=i(y),re=y.nodeType),re===1||re===3){$=y;const Y=!p.children.length;for(let K=0;K<p.staticCount;K++)Y&&(p.children+=$.nodeType===1?$.outerHTML:$.data),K===p.staticCount-1&&(p.anchor=$),$=i($);return O?i($):$}else R();break;case ye:O?$=v(y,p,T,B,M,_):$=R();break;default:if(q&1)(re!==1||p.type.toLowerCase()!==y.tagName.toLowerCase())&&!H(y)?$=R():$=g(y,p,T,B,M,_);else if(q&6){p.slotScopeIds=M;const Y=o(y);if(O?$=N(y):gn(y)&&y.data==="teleport start"?$=N(y,y.data,"teleport end"):$=i(y),t(p,Y,null,T,B,pn(Y),_),Ct(p)){let K;O?(K=se(ye),K.anchor=$?$.previousSibling:Y.lastChild):K=y.nodeType===3?eo(""):se("div"),K.el=y,p.component.subTree=K}}else q&64?re!==8?$=R():$=p.type.hydrate(y,p,T,B,M,_,e,b):q&128&&($=p.type.hydrate(y,p,T,B,pn(o(y)),M,_,e,d))}return I!=null&&Pn(I,null,B,p),$},g=(y,p,T,B,M,_)=>{_=_||!!p.dynamicChildren;const{type:O,props:R,patchFlag:W,shapeFlag:I,dirs:q,transition:ne}=p,re=O==="input"&&q||O==="option";if(re||W!==-1){if(q&&Me(p,null,T,"created"),R)if(re||!_||W&48)for(const K in R)(re&&K.endsWith("value")||en(K)&&!kt(K))&&r(y,K,null,R[K],!1,void 0,T);else R.onClick&&r(y,"onClick",null,R.onClick,!1,void 0,T);let $;($=R&&R.onVnodeBeforeMount)&&Ce($,T,p);let Y=!1;if(H(y)){Y=zi(B,ne)&&T&&T.vnode.props&&T.vnode.props.appear;const K=y.content.firstChild;Y&&ne.beforeEnter(K),k(K,y,T),p.el=y=K}if(q&&Me(p,null,T,"beforeMount"),(($=R&&R.onVnodeMounted)||q||Y)&&Ii(()=>{$&&Ce($,T,p),Y&&ne.enter(y),q&&Me(p,null,T,"mounted")},B),I&16&&!(R&&(R.innerHTML||R.textContent))){let K=b(y.firstChild,p,y,T,B,M,_);for(;K;){We=!0;const He=K;K=K.nextSibling,l(He)}}else I&8&&y.textContent!==p.children&&(We=!0,y.textContent=p.children)}return y.nextSibling},b=(y,p,T,B,M,_,O)=>{O=O||!!p.dynamicChildren;const R=p.children,W=R.length;for(let I=0;I<W;I++){const q=O?R[I]:R[I]=Ee(R[I]);if(y)y=d(y,q,B,M,_,O);else{if(q.type===Rt&&!q.children)continue;We=!0,n(null,q,T,null,B,M,pn(T),_)}}return y},v=(y,p,T,B,M,_)=>{const{slotScopeIds:O}=p;O&&(M=M?M.concat(O):O);const R=o(y),W=b(i(y),p,R,T,B,M,_);return W&&gn(W)&&W.data==="]"?i(p.anchor=W):(We=!0,c(p.anchor=a("]"),R,W),W)},x=(y,p,T,B,M,_)=>{if(We=!0,p.el=null,_){const W=N(y);for(;;){const I=i(y);if(I&&I!==W)l(I);else break}}const O=i(y),R=o(y);return l(y),n(null,p,R,O,T,B,pn(R),M),O},N=(y,p="[",T="]")=>{let B=0;for(;y;)if(y=i(y),y&&gn(y)&&(y.data===p&&B++,y.data===T)){if(B===0)return i(y);B--}return y},k=(y,p,T)=>{const B=p.parentNode;B&&B.replaceChild(y,p);let M=T;for(;M;)M.vnode.el===p&&(M.vnode.el=M.subTree.el=y),M=M.parent},H=y=>y.nodeType===1&&y.tagName.toLowerCase()==="template";return[f,d]}const me=Ii;function pc(e){return qi(e)}function gc(e){return qi(e,hc)}function qi(e,t){const n=cr();n.__VUE__=!0;const{insert:r,remove:s,patchProp:i,createElement:o,createText:l,createComment:c,setText:a,setElementText:f,parentNode:d,nextSibling:g,setScopeId:b=Oe,insertStaticContent:v}=e,x=(u,h,m,w=null,C=null,S=null,P=!1,A=null,F=!!h.dynamicChildren)=>{if(u===h)return;u&&!Ne(u,h)&&(w=on(u),Ie(u,C,S,!0),u=null),h.patchFlag===-2&&(F=!1,h.dynamicChildren=null);const{type:E,ref:j,shapeFlag:L}=h;switch(E){case Rt:N(u,h,m,w);break;case ge:k(u,h,m,w);break;case Kt:u==null&&H(h,m,w,P);break;case ye:I(u,h,m,w,C,S,P,A,F);break;default:L&1?T(u,h,m,w,C,S,P,A,F):L&6?q(u,h,m,w,C,S,P,A,F):(L&64||L&128)&&E.process(u,h,m,w,C,S,P,A,F,pt)}j!=null&&C&&Pn(j,u&&u.ref,S,h||u,!h)},N=(u,h,m,w)=>{if(u==null)r(h.el=l(h.children),m,w);else{const C=h.el=u.el;h.children!==u.children&&a(C,h.children)}},k=(u,h,m,w)=>{u==null?r(h.el=c(h.children||""),m,w):h.el=u.el},H=(u,h,m,w)=>{[u.el,u.anchor]=v(u.children,h,m,w,u.el,u.anchor)},y=({el:u,anchor:h},m,w)=>{let C;for(;u&&u!==h;)C=g(u),r(u,m,w),u=C;r(h,m,w)},p=({el:u,anchor:h})=>{let m;for(;u&&u!==h;)m=g(u),s(u),u=m;s(h)},T=(u,h,m,w,C,S,P,A,F)=>{P=P||h.type==="svg",u==null?B(h,m,w,C,S,P,A,F):O(u,h,C,S,P,A,F)},B=(u,h,m,w,C,S,P,A)=>{let F,E;const{type:j,props:L,shapeFlag:U,transition:z,dirs:J}=u;if(F=u.el=o(u.type,S,L&&L.is,L),U&8?f(F,u.children):U&16&&_(u.children,F,null,w,C,S&&j!=="foreignObject",P,A),J&&Me(u,null,w,"created"),M(F,u,u.scopeId,P,w),L){for(const Z in L)Z!=="value"&&!kt(Z)&&i(F,Z,null,L[Z],S,u.children,w,C,$e);"value"in L&&i(F,"value",null,L.value),(E=L.onVnodeBeforeMount)&&Ce(E,w,u)}J&&Me(u,null,w,"beforeMount");const ee=zi(C,z);ee&&z.beforeEnter(F),r(F,h,m),((E=L&&L.onVnodeMounted)||ee||J)&&me(()=>{E&&Ce(E,w,u),ee&&z.enter(F),J&&Me(u,null,w,"mounted")},C)},M=(u,h,m,w,C)=>{if(m&&b(u,m),w)for(let S=0;S<w.length;S++)b(u,w[S]);if(C){let S=C.subTree;if(h===S){const P=C.vnode;M(u,P,P.scopeId,P.slotScopeIds,C.parent)}}},_=(u,h,m,w,C,S,P,A,F=0)=>{for(let E=F;E<u.length;E++){const j=u[E]=A?Ye(u[E]):Ee(u[E]);x(null,j,h,m,w,C,S,P,A)}},O=(u,h,m,w,C,S,P)=>{const A=h.el=u.el;let{patchFlag:F,dynamicChildren:E,dirs:j}=h;F|=u.patchFlag&16;const L=u.props||te,U=h.props||te;let z;m&&rt(m,!1),(z=U.onVnodeBeforeUpdate)&&Ce(z,m,h,u),j&&Me(h,u,m,"beforeUpdate"),m&&rt(m,!0);const J=C&&h.type!=="foreignObject";if(E?R(u.dynamicChildren,E,A,m,w,J,S):P||K(u,h,A,null,m,w,J,S,!1),F>0){if(F&16)W(A,h,L,U,m,w,C);else if(F&2&&L.class!==U.class&&i(A,"class",null,U.class,C),F&4&&i(A,"style",L.style,U.style,C),F&8){const ee=h.dynamicProps;for(let Z=0;Z<ee.length;Z++){const oe=ee[Z],Re=L[oe],gt=U[oe];(gt!==Re||oe==="value")&&i(A,oe,Re,gt,C,u.children,m,w,$e)}}F&1&&u.children!==h.children&&f(A,h.children)}else!P&&E==null&&W(A,h,L,U,m,w,C);((z=U.onVnodeUpdated)||j)&&me(()=>{z&&Ce(z,m,h,u),j&&Me(h,u,m,"updated")},w)},R=(u,h,m,w,C,S,P)=>{for(let A=0;A<h.length;A++){const F=u[A],E=h[A],j=F.el&&(F.type===ye||!Ne(F,E)||F.shapeFlag&70)?d(F.el):m;x(F,E,j,null,w,C,S,P,!0)}},W=(u,h,m,w,C,S,P)=>{if(m!==w){if(m!==te)for(const A in m)!kt(A)&&!(A in w)&&i(u,A,m[A],null,P,h.children,C,S,$e);for(const A in w){if(kt(A))continue;const F=w[A],E=m[A];F!==E&&A!=="value"&&i(u,A,E,F,P,h.children,C,S,$e)}"value"in w&&i(u,"value",m.value,w.value)}},I=(u,h,m,w,C,S,P,A,F)=>{const E=h.el=u?u.el:l(""),j=h.anchor=u?u.anchor:l("");let{patchFlag:L,dynamicChildren:U,slotScopeIds:z}=h;z&&(A=A?A.concat(z):z),u==null?(r(E,m,w),r(j,m,w),_(h.children,m,j,C,S,P,A,F)):L>0&&L&64&&U&&u.dynamicChildren?(R(u.dynamicChildren,U,m,C,S,P,A),(h.key!=null||C&&h===C.subTree)&&Xr(u,h,!0)):K(u,h,m,j,C,S,P,A,F)},q=(u,h,m,w,C,S,P,A,F)=>{h.slotScopeIds=A,u==null?h.shapeFlag&512?C.ctx.activate(h,m,w,P,F):ne(h,m,w,C,S,P,F):re(u,h,F)},ne=(u,h,m,w,C,S,P)=>{const A=u.component=Tc(u,w,C);if(nn(u)&&(A.ctx.renderer=pt),Ac(A),A.asyncDep){if(C&&C.registerDep(A,$),!u.el){const F=A.subTree=se(ge);k(null,F,h,m)}return}$(A,u,h,m,C,S,P)},re=(u,h,m)=>{const w=h.component=u.component;if(Fl(u,h,m))if(w.asyncDep&&!w.asyncResolved){Y(w,h,m);return}else w.next=h,El(w.update),w.update();else h.el=u.el,w.vnode=h},$=(u,h,m,w,C,S,P)=>{const A=()=>{if(u.isMounted){let{next:j,bu:L,u:U,parent:z,vnode:J}=u,ee=j,Z;rt(u,!1),j?(j.el=J.el,Y(u,j,P)):j=J,L&&wn(L),(Z=j.props&&j.props.onVnodeBeforeUpdate)&&Ce(Z,z,j,J),rt(u,!0);const oe=Gn(u),Re=u.subTree;u.subTree=oe,x(Re,oe,d(Re.el),on(Re),u,C,S),j.el=oe.el,ee===null&&Kr(u,oe.el),U&&me(U,C),(Z=j.props&&j.props.onVnodeUpdated)&&me(()=>Ce(Z,z,j,J),C)}else{let j;const{el:L,props:U}=h,{bm:z,m:J,parent:ee}=u,Z=Ct(h);if(rt(u,!1),z&&wn(z),!Z&&(j=U&&U.onVnodeBeforeMount)&&Ce(j,ee,h),rt(u,!0),L&&Zn){const oe=()=>{u.subTree=Gn(u),Zn(L,u.subTree,u,C,null)};Z?h.type.__asyncLoader().then(()=>!u.isUnmounted&&oe()):oe()}else{const oe=u.subTree=Gn(u);x(null,oe,m,w,u,C,S),h.el=oe.el}if(J&&me(J,C),!Z&&(j=U&&U.onVnodeMounted)){const oe=h;me(()=>Ce(j,ee,oe),C)}(h.shapeFlag&256||ee&&Ct(ee.vnode)&&ee.vnode.shapeFlag&256)&&u.a&&me(u.a,C),u.isMounted=!0,h=m=w=null}},F=u.effect=new Mr(A,()=>Kn(E),u.scope),E=u.update=()=>F.run();E.id=u.uid,rt(u,!0),E()},Y=(u,h,m)=>{h.component=u;const w=u.vnode.props;u.vnode=h,u.next=null,ac(u,h.props,w,m),dc(u,h.children,m),Ft(),ys(),It()},K=(u,h,m,w,C,S,P,A,F=!1)=>{const E=u&&u.children,j=u?u.shapeFlag:0,L=h.children,{patchFlag:U,shapeFlag:z}=h;if(U>0){if(U&128){sn(E,L,m,w,C,S,P,A,F);return}else if(U&256){He(E,L,m,w,C,S,P,A,F);return}}z&8?(j&16&&$e(E,C,S),L!==E&&f(m,L)):j&16?z&16?sn(E,L,m,w,C,S,P,A,F):$e(E,C,S,!0):(j&8&&f(m,""),z&16&&_(L,m,w,C,S,P,A,F))},He=(u,h,m,w,C,S,P,A,F)=>{u=u||yt,h=h||yt;const E=u.length,j=h.length,L=Math.min(E,j);let U;for(U=0;U<L;U++){const z=h[U]=F?Ye(h[U]):Ee(h[U]);x(u[U],z,m,null,C,S,P,A,F)}E>j?$e(u,C,S,!0,!1,L):_(h,m,w,C,S,P,A,F,L)},sn=(u,h,m,w,C,S,P,A,F)=>{let E=0;const j=h.length;let L=u.length-1,U=j-1;for(;E<=L&&E<=U;){const z=u[E],J=h[E]=F?Ye(h[E]):Ee(h[E]);if(Ne(z,J))x(z,J,m,null,C,S,P,A,F);else break;E++}for(;E<=L&&E<=U;){const z=u[L],J=h[U]=F?Ye(h[U]):Ee(h[U]);if(Ne(z,J))x(z,J,m,null,C,S,P,A,F);else break;L--,U--}if(E>L){if(E<=U){const z=U+1,J=z<j?h[z].el:w;for(;E<=U;)x(null,h[E]=F?Ye(h[E]):Ee(h[E]),m,J,C,S,P,A,F),E++}}else if(E>U)for(;E<=L;)Ie(u[E],C,S,!0),E++;else{const z=E,J=E,ee=new Map;for(E=J;E<=U;E++){const be=h[E]=F?Ye(h[E]):Ee(h[E]);be.key!=null&&ee.set(be.key,E)}let Z,oe=0;const Re=U-J+1;let gt=!1,is=0;const Lt=new Array(Re);for(E=0;E<Re;E++)Lt[E]=0;for(E=z;E<=L;E++){const be=u[E];if(oe>=Re){Ie(be,C,S,!0);continue}let Pe;if(be.key!=null)Pe=ee.get(be.key);else for(Z=J;Z<=U;Z++)if(Lt[Z-J]===0&&Ne(be,h[Z])){Pe=Z;break}Pe===void 0?Ie(be,C,S,!0):(Lt[Pe-J]=E+1,Pe>=is?is=Pe:gt=!0,x(be,h[Pe],m,null,C,S,P,A,F),oe++)}const os=gt?mc(Lt):yt;for(Z=os.length-1,E=Re-1;E>=0;E--){const be=J+E,Pe=h[be],ls=be+1<j?h[be+1].el:w;Lt[E]===0?x(null,Pe,m,ls,C,S,P,A,F):gt&&(Z<0||E!==os[Z]?nt(Pe,m,ls,2):Z--)}}},nt=(u,h,m,w,C=null)=>{const{el:S,type:P,transition:A,children:F,shapeFlag:E}=u;if(E&6){nt(u.component.subTree,h,m,w);return}if(E&128){u.suspense.move(h,m,w);return}if(E&64){P.move(u,h,m,pt);return}if(P===ye){r(S,h,m);for(let L=0;L<F.length;L++)nt(F[L],h,m,w);r(u.anchor,h,m);return}if(P===Kt){y(u,h,m);return}if(w!==2&&E&1&&A)if(w===0)A.beforeEnter(S),r(S,h,m),me(()=>A.enter(S),C);else{const{leave:L,delayLeave:U,afterLeave:z}=A,J=()=>r(S,h,m),ee=()=>{L(S,()=>{J(),z&&z()})};U?U(S,J,ee):ee()}else r(S,h,m)},Ie=(u,h,m,w=!1,C=!1)=>{const{type:S,props:P,ref:A,children:F,dynamicChildren:E,shapeFlag:j,patchFlag:L,dirs:U}=u;if(A!=null&&Pn(A,null,m,u,!0),j&256){h.ctx.deactivate(u);return}const z=j&1&&U,J=!Ct(u);let ee;if(J&&(ee=P&&P.onVnodeBeforeUnmount)&&Ce(ee,h,u),j&6)To(u.component,m,w);else{if(j&128){u.suspense.unmount(m,w);return}z&&Me(u,null,h,"beforeUnmount"),j&64?u.type.remove(u,h,m,C,pt,w):E&&(S!==ye||L>0&&L&64)?$e(E,h,m,!1,!0):(S===ye&&L&384||!C&&j&16)&&$e(F,h,m),w&&rs(u)}(J&&(ee=P&&P.onVnodeUnmounted)||z)&&me(()=>{ee&&Ce(ee,h,u),z&&Me(u,null,h,"unmounted")},m)},rs=u=>{const{type:h,el:m,anchor:w,transition:C}=u;if(h===ye){xo(m,w);return}if(h===Kt){p(u);return}const S=()=>{s(m),C&&!C.persisted&&C.afterLeave&&C.afterLeave()};if(u.shapeFlag&1&&C&&!C.persisted){const{leave:P,delayLeave:A}=C,F=()=>P(m,S);A?A(u.el,S,F):F()}else S()},xo=(u,h)=>{let m;for(;u!==h;)m=g(u),s(u),u=m;s(h)},To=(u,h,m)=>{const{bum:w,scope:C,update:S,subTree:P,um:A}=u;w&&wn(w),C.stop(),S&&(S.active=!1,Ie(P,u,h,m)),A&&me(A,h),me(()=>{u.isUnmounted=!0},h),h&&h.pendingBranch&&!h.isUnmounted&&u.asyncDep&&!u.asyncResolved&&u.suspenseId===h.pendingId&&(h.deps--,h.deps===0&&h.resolve())},$e=(u,h,m,w=!1,C=!1,S=0)=>{for(let P=S;P<u.length;P++)Ie(u[P],h,m,w,C)},on=u=>u.shapeFlag&6?on(u.component.subTree):u.shapeFlag&128?u.suspense.next():g(u.anchor||u.el),ss=(u,h,m)=>{u==null?h._vnode&&Ie(h._vnode,null,null,!0):x(h._vnode||null,u,h,null,null,null,m),ys(),Sn(),h._vnode=u},pt={p:x,um:Ie,m:nt,r:rs,mt:ne,mc:_,pc:K,pbc:R,n:on,o:e};let Qn,Zn;return t&&([Qn,Zn]=t(pt)),{render:ss,hydrate:Qn,createApp:oc(ss,Qn)}}function rt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function zi(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function Xr(e,t,n=!1){const r=e.children,s=t.children;if(D(r)&&D(s))for(let i=0;i<r.length;i++){const o=r[i];let l=s[i];l.shapeFlag&1&&!l.dynamicChildren&&((l.patchFlag<=0||l.patchFlag===32)&&(l=s[i]=Ye(s[i]),l.el=o.el),n||Xr(o,l)),l.type===Rt&&(l.el=o.el)}}function mc(e){const t=e.slice(),n=[0];let r,s,i,o,l;const c=e.length;for(r=0;r<c;r++){const a=e[r];if(a!==0){if(s=n[n.length-1],e[s]<a){t[r]=s,n.push(r);continue}for(i=0,o=n.length-1;i<o;)l=i+o>>1,e[n[l]]<a?i=l+1:o=l;a<e[n[i]]&&(i>0&&(t[r]=n[i-1]),n[i]=r)}}for(i=n.length,o=n[i-1];i-- >0;)n[i]=o,o=t[o];return n}const yc=e=>e.__isTeleport,Ut=e=>e&&(e.disabled||e.disabled===""),Fs=e=>typeof SVGElement<"u"&&e instanceof SVGElement,vr=(e,t)=>{const n=e&&e.to;return ie(n)?t?t(n):null:n},_c={__isTeleport:!0,process(e,t,n,r,s,i,o,l,c,a){const{mc:f,pc:d,pbc:g,o:{insert:b,querySelector:v,createText:x,createComment:N}}=a,k=Ut(t.props);let{shapeFlag:H,children:y,dynamicChildren:p}=t;if(e==null){const T=t.el=x(""),B=t.anchor=x("");b(T,n,r),b(B,n,r);const M=t.target=vr(t.props,v),_=t.targetAnchor=x("");M&&(b(_,M),o=o||Fs(M));const O=(R,W)=>{H&16&&f(y,R,W,s,i,o,l,c)};k?O(n,B):M&&O(M,_)}else{t.el=e.el;const T=t.anchor=e.anchor,B=t.target=e.target,M=t.targetAnchor=e.targetAnchor,_=Ut(e.props),O=_?n:B,R=_?T:M;if(o=o||Fs(B),p?(g(e.dynamicChildren,p,O,s,i,o,l),Xr(e,t,!0)):c||d(e,t,O,R,s,i,o,l,!1),k)_?t.props&&e.props&&t.props.to!==e.props.to&&(t.props.to=e.props.to):mn(t,n,T,a,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const W=t.target=vr(t.props,v);W&&mn(t,W,null,a,0)}else _&&mn(t,B,M,a,1)}Yi(t)},remove(e,t,n,r,{um:s,o:{remove:i}},o){const{shapeFlag:l,children:c,anchor:a,targetAnchor:f,target:d,props:g}=e;if(d&&i(f),o&&i(a),l&16){const b=o||!Ut(g);for(let v=0;v<c.length;v++){const x=c[v];s(x,t,n,b,!!x.dynamicChildren)}}},move:mn,hydrate:bc};function mn(e,t,n,{o:{insert:r},m:s},i=2){i===0&&r(e.targetAnchor,t,n);const{el:o,anchor:l,shapeFlag:c,children:a,props:f}=e,d=i===2;if(d&&r(o,t,n),(!d||Ut(f))&&c&16)for(let g=0;g<a.length;g++)s(a[g],t,n,2);d&&r(l,t,n)}function bc(e,t,n,r,s,i,{o:{nextSibling:o,parentNode:l,querySelector:c}},a){const f=t.target=vr(t.props,c);if(f){const d=f._lpa||f.firstChild;if(t.shapeFlag&16)if(Ut(t.props))t.anchor=a(o(e),t,l(e),n,r,s,i),t.targetAnchor=d;else{t.anchor=o(e);let g=d;for(;g;)if(g=o(g),g&&g.nodeType===8&&g.data==="teleport anchor"){t.targetAnchor=g,f._lpa=t.targetAnchor&&o(t.targetAnchor);break}a(d,t,f,n,r,s,i)}Yi(t)}return t.anchor&&o(t.anchor)}const du=_c;function Yi(e){const t=e.ctx;if(t&&t.ut){let n=e.children[0].el;for(;n&&n!==e.targetAnchor;)n.nodeType===1&&n.setAttribute("data-v-owner",t.uid),n=n.nextSibling;t.ut()}}const ye=Symbol.for("v-fgt"),Rt=Symbol.for("v-txt"),ge=Symbol.for("v-cmt"),Kt=Symbol.for("v-stc"),Wt=[];let Te=null;function Qr(e=!1){Wt.push(Te=e?null:[])}function Ji(){Wt.pop(),Te=Wt[Wt.length-1]||null}let St=1;function Is(e){St+=e}function Xi(e){return e.dynamicChildren=St>0?Te||yt:null,Ji(),St>0&&Te&&Te.push(e),e}function hu(e,t,n,r,s,i){return Xi(Gi(e,t,n,r,s,i,!0))}function Qi(e,t,n,r,s){return Xi(se(e,t,n,r,s,!0))}function Xt(e){return e?e.__v_isVNode===!0:!1}function Ne(e,t){return e.type===t.type&&e.key===t.key}const Jn="__vInternal",Zi=({key:e})=>e??null,Cn=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?ie(e)||ae(e)||V(e)?{i:de,r:e,k:t,f:!!n}:e:null);function Gi(e,t=null,n=null,r=0,s=null,i=e===ye?0:1,o=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Zi(t),ref:t&&Cn(t),scopeId:Vn,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:r,dynamicProps:s,dynamicChildren:null,appContext:null,ctx:de};return l?(Zr(c,n),i&128&&e.normalize(c)):n&&(c.shapeFlag|=ie(n)?8:16),St>0&&!o&&Te&&(c.patchFlag>0||i&6)&&c.patchFlag!==32&&Te.push(c),c}const se=vc;function vc(e,t=null,n=null,r=0,s=null,i=!1){if((!e||e===Oi)&&(e=ge),Xt(e)){const l=et(e,t,!0);return n&&Zr(l,n),St>0&&!i&&Te&&(l.shapeFlag&6?Te[Te.indexOf(e)]=l:Te.push(l)),l.patchFlag|=-2,l}if(Fc(e)&&(e=e.__vccOpts),t){t=wc(t);let{class:l,style:c}=t;l&&!ie(l)&&(t.class=Ir(l)),G(c)&&(Ci(c)&&!D(c)&&(c=fe({},c)),t.style=Fr(c))}const o=ie(e)?1:Il(e)?128:yc(e)?64:G(e)?4:V(e)?2:0;return Gi(e,t,n,r,s,o,i,!0)}function wc(e){return e?Ci(e)||Jn in e?fe({},e):e:null}function et(e,t,n=!1){const{props:r,ref:s,patchFlag:i,children:o}=e,l=t?Cc(r||{},t):r;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&Zi(l),ref:t&&t.ref?n&&s?D(s)?s.concat(Cn(t)):[s,Cn(t)]:Cn(t):s,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:o,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==ye?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&et(e.ssContent),ssFallback:e.ssFallback&&et(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function eo(e=" ",t=0){return se(Rt,null,e,t)}function pu(e,t){const n=se(Kt,null,e);return n.staticCount=t,n}function gu(e="",t=!1){return t?(Qr(),Qi(ge,null,e)):se(ge,null,e)}function Ee(e){return e==null||typeof e=="boolean"?se(ge):D(e)?se(ye,null,e.slice()):typeof e=="object"?Ye(e):se(Rt,null,String(e))}function Ye(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:et(e)}function Zr(e,t){let n=0;const{shapeFlag:r}=e;if(t==null)t=null;else if(D(t))n=16;else if(typeof t=="object")if(r&65){const s=t.default;s&&(s._c&&(s._d=!1),Zr(e,s()),s._c&&(s._d=!0));return}else{n=32;const s=t._;!s&&!(Jn in t)?t._ctx=de:s===3&&de&&(de.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else V(t)?(t={default:t,_ctx:de},n=32):(t=String(t),r&64?(n=16,t=[eo(t)]):n=8);e.children=t,e.shapeFlag|=n}function Cc(...e){const t={};for(let n=0;n<e.length;n++){const r=e[n];for(const s in r)if(s==="class")t.class!==r.class&&(t.class=Ir([t.class,r.class]));else if(s==="style")t.style=Fr([t.style,r.style]);else if(en(s)){const i=t[s],o=r[s];o&&i!==o&&!(D(i)&&i.includes(o))&&(t[s]=i?[].concat(i,o):o)}else s!==""&&(t[s]=r[s])}return t}function Ce(e,t,n,r=null){Ae(e,t,7,[n,r])}const Ec=Di();let xc=0;function Tc(e,t,n){const r=e.type,s=(t?t.appContext:e.appContext)||Ec,i={uid:xc++,vnode:e,type:r,parent:t,appContext:s,root:null,next:null,subTree:null,effect:null,update:null,scope:new Do(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(s.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Ui(r,s),emitsOptions:Si(r,s),emit:null,emitted:null,propsDefaults:te,inheritAttrs:r.inheritAttrs,ctx:te,data:te,props:te,attrs:te,slots:te,refs:te,setupState:te,setupContext:null,attrsProxy:null,slotsProxy:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return i.ctx={_:i},i.root=t?t.root:i,i.emit=Tl.bind(null,i),e.ce&&e.ce(i),i}let ce=null;const rn=()=>ce||de;let Gr,mt,Ps="__VUE_INSTANCE_SETTERS__";(mt=cr()[Ps])||(mt=cr()[Ps]=[]),mt.push(e=>ce=e),Gr=e=>{mt.length>1?mt.forEach(t=>t(e)):mt[0](e)};const tt=e=>{Gr(e),e.scope.on()},Ze=()=>{ce&&ce.scope.off(),Gr(null)};function to(e){return e.vnode.shapeFlag&4}let Ot=!1;function Ac(e,t=!1){Ot=t;const{props:n,children:r}=e.vnode,s=to(e);cc(e,n,s,t),fc(e,r);const i=s?Rc(e,t):void 0;return Ot=!1,i}function Rc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=Dt(new Proxy(e.ctx,Zl));const{setup:r}=n;if(r){const s=e.setupContext=r.length>1?ro(e):null;tt(e),Ft();const i=Xe(r,e,0,[e.props,s]);if(It(),Ze(),Sr(i)){if(i.then(Ze,Ze),t)return i.then(o=>{wr(e,o,t)}).catch(o=>{Pt(o,e,0)});e.asyncDep=i}else wr(e,i,t)}else no(e,t)}function wr(e,t,n){V(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:G(t)&&(e.setupState=xi(t)),no(e,n)}let Ms;function no(e,t,n){const r=e.type;if(!e.render){if(!t&&Ms&&!r.render){const s=r.template||Yr(e).template;if(s){const{isCustomElement:i,compilerOptions:o}=e.appContext.config,{delimiters:l,compilerOptions:c}=r,a=fe(fe({isCustomElement:i,delimiters:l},o),c);r.render=Ms(s,a)}}e.render=r.render||Oe}{tt(e),Ft();try{ec(e)}finally{It(),Ze()}}}function Sc(e){return e.attrsProxy||(e.attrsProxy=new Proxy(e.attrs,{get(t,n){return _e(e,"get","$attrs"),t[n]}}))}function ro(e){const t=n=>{e.exposed=n||{}};return{get attrs(){return Sc(e)},slots:e.slots,emit:e.emit,expose:t}}function Xn(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(xi(Dt(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in jt)return jt[n](e)},has(t,n){return n in t||n in jt}}))}function Oc(e,t=!0){return V(e)?e.displayName||e.name:e.name||t&&e.__name}function Fc(e){return V(e)&&"__vccOpts"in e}const le=(e,t)=>vl(e,t,Ot);function Cr(e,t,n){const r=arguments.length;return r===2?G(t)&&!D(t)?Xt(t)?se(e,null,[t]):se(e,t):se(e,null,t):(r>3?n=Array.prototype.slice.call(arguments,2):r===3&&Xt(n)&&(n=[n]),se(e,t,n))}const Ic=Symbol.for("v-scx"),Pc=()=>Et(Ic),Mc="3.3.8",Lc="http://www.w3.org/2000/svg",lt=typeof document<"u"?document:null,Ls=lt&&lt.createElement("template"),Nc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,r)=>{const s=t?lt.createElementNS(Lc,e):lt.createElement(e,n?{is:n}:void 0);return e==="select"&&r&&r.multiple!=null&&s.setAttribute("multiple",r.multiple),s},createText:e=>lt.createTextNode(e),createComment:e=>lt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>lt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,r,s,i){const o=n?n.previousSibling:t.lastChild;if(s&&(s===i||s.nextSibling))for(;t.insertBefore(s.cloneNode(!0),n),!(s===i||!(s=s.nextSibling)););else{Ls.innerHTML=r?`<svg>${e}</svg>`:e;const l=Ls.content;if(r){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Ve="transition",Nt="animation",Qt=Symbol("_vtc"),so=(e,{slots:t})=>Cr(jl,Bc(e),t);so.displayName="Transition";const io={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};so.props=fe({},Mi,io);const st=(e,t=[])=>{D(e)?e.forEach(n=>n(...t)):e&&e(...t)},Ns=e=>e?D(e)?e.some(t=>t.length>1):e.length>1:!1;function Bc(e){const t={};for(const I in e)I in io||(t[I]=e[I]);if(e.css===!1)return t;const{name:n="v",type:r,duration:s,enterFromClass:i=`${n}-enter-from`,enterActiveClass:o=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:a=o,appearToClass:f=l,leaveFromClass:d=`${n}-leave-from`,leaveActiveClass:g=`${n}-leave-active`,leaveToClass:b=`${n}-leave-to`}=e,v=Hc(s),x=v&&v[0],N=v&&v[1],{onBeforeEnter:k,onEnter:H,onEnterCancelled:y,onLeave:p,onLeaveCancelled:T,onBeforeAppear:B=k,onAppear:M=H,onAppearCancelled:_=y}=t,O=(I,q,ne)=>{it(I,q?f:l),it(I,q?a:o),ne&&ne()},R=(I,q)=>{I._isLeaving=!1,it(I,d),it(I,b),it(I,g),q&&q()},W=I=>(q,ne)=>{const re=I?M:H,$=()=>O(q,I,ne);st(re,[q,$]),Bs(()=>{it(q,I?c:i),qe(q,I?f:l),Ns(re)||Hs(q,r,x,$)})};return fe(t,{onBeforeEnter(I){st(k,[I]),qe(I,i),qe(I,o)},onBeforeAppear(I){st(B,[I]),qe(I,c),qe(I,a)},onEnter:W(!1),onAppear:W(!0),onLeave(I,q){I._isLeaving=!0;const ne=()=>R(I,q);qe(I,d),Dc(),qe(I,g),Bs(()=>{I._isLeaving&&(it(I,d),qe(I,b),Ns(p)||Hs(I,r,N,ne))}),st(p,[I,ne])},onEnterCancelled(I){O(I,!1),st(y,[I])},onAppearCancelled(I){O(I,!0),st(_,[I])},onLeaveCancelled(I){R(I),st(T,[I])}})}function Hc(e){if(e==null)return null;if(G(e))return[rr(e.enter),rr(e.leave)];{const t=rr(e);return[t,t]}}function rr(e){return ci(e)}function qe(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e[Qt]||(e[Qt]=new Set)).add(t)}function it(e,t){t.split(/\s+/).forEach(r=>r&&e.classList.remove(r));const n=e[Qt];n&&(n.delete(t),n.size||(e[Qt]=void 0))}function Bs(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let $c=0;function Hs(e,t,n,r){const s=e._endId=++$c,i=()=>{s===e._endId&&r()};if(n)return setTimeout(i,n);const{type:o,timeout:l,propCount:c}=kc(e,t);if(!o)return r();const a=o+"end";let f=0;const d=()=>{e.removeEventListener(a,g),i()},g=b=>{b.target===e&&++f>=c&&d()};setTimeout(()=>{f<c&&d()},l+1),e.addEventListener(a,g)}function kc(e,t){const n=window.getComputedStyle(e),r=v=>(n[v]||"").split(", "),s=r(`${Ve}Delay`),i=r(`${Ve}Duration`),o=$s(s,i),l=r(`${Nt}Delay`),c=r(`${Nt}Duration`),a=$s(l,c);let f=null,d=0,g=0;t===Ve?o>0&&(f=Ve,d=o,g=i.length):t===Nt?a>0&&(f=Nt,d=a,g=c.length):(d=Math.max(o,a),f=d>0?o>a?Ve:Nt:null,g=f?f===Ve?i.length:c.length:0);const b=f===Ve&&/\b(transform|all)(,|$)/.test(r(`${Ve}Property`).toString());return{type:f,timeout:d,propCount:g,hasTransform:b}}function $s(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map((n,r)=>ks(n)+ks(e[r])))}function ks(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function Dc(){return document.body.offsetHeight}function jc(e,t,n){const r=e[Qt];r&&(t=(t?[t,...r]:[...r]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const es=Symbol("_vod"),mu={beforeMount(e,{value:t},{transition:n}){e[es]=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):Bt(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:r}){!t!=!n&&(r?t?(r.beforeEnter(e),Bt(e,!0),r.enter(e)):r.leave(e,()=>{Bt(e,!1)}):Bt(e,t))},beforeUnmount(e,{value:t}){Bt(e,t)}};function Bt(e,t){e.style.display=t?e[es]:"none"}function Uc(e,t,n){const r=e.style,s=ie(n);if(n&&!s){if(t&&!ie(t))for(const i in t)n[i]==null&&Er(r,i,"");for(const i in n)Er(r,i,n[i])}else{const i=r.display;s?t!==n&&(r.cssText=n):t&&e.removeAttribute("style"),es in e&&(r.display=i)}}const Ds=/\s*!important$/;function Er(e,t,n){if(D(n))n.forEach(r=>Er(e,t,r));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const r=Kc(e,t);Ds.test(n)?e.setProperty(ht(r),n.replace(Ds,""),"important"):e[r]=n}}const js=["Webkit","Moz","ms"],sr={};function Kc(e,t){const n=sr[t];if(n)return n;let r=Be(t);if(r!=="filter"&&r in e)return sr[t]=r;r=Hn(r);for(let s=0;s<js.length;s++){const i=js[s]+r;if(i in e)return sr[t]=i}return t}const Us="http://www.w3.org/1999/xlink";function Wc(e,t,n,r,s){if(r&&t.startsWith("xlink:"))n==null?e.removeAttributeNS(Us,t.slice(6,t.length)):e.setAttributeNS(Us,t,n);else{const i=Ho(t);n==null||i&&!ai(n)?e.removeAttribute(t):e.setAttribute(t,i?"":n)}}function Vc(e,t,n,r,s,i,o){if(t==="innerHTML"||t==="textContent"){r&&o(r,s,i),e[t]=n??"";return}const l=e.tagName;if(t==="value"&&l!=="PROGRESS"&&!l.includes("-")){e._value=n;const a=l==="OPTION"?e.getAttribute("value"):e.value,f=n??"";a!==f&&(e.value=f),n==null&&e.removeAttribute(t);return}let c=!1;if(n===""||n==null){const a=typeof e[t];a==="boolean"?n=ai(n):n==null&&a==="string"?(n="",c=!0):a==="number"&&(n=0,c=!0)}try{e[t]=n}catch{}c&&e.removeAttribute(t)}function ct(e,t,n,r){e.addEventListener(t,n,r)}function qc(e,t,n,r){e.removeEventListener(t,n,r)}const Ks=Symbol("_vei");function zc(e,t,n,r,s=null){const i=e[Ks]||(e[Ks]={}),o=i[t];if(r&&o)o.value=r;else{const[l,c]=Yc(t);if(r){const a=i[t]=Qc(r,s);ct(e,l,a,c)}else o&&(qc(e,l,o,c),i[t]=void 0)}}const Ws=/(?:Once|Passive|Capture)$/;function Yc(e){let t;if(Ws.test(e)){t={};let r;for(;r=e.match(Ws);)e=e.slice(0,e.length-r[0].length),t[r[0].toLowerCase()]=!0}return[e[2]===":"?e.slice(3):ht(e.slice(2)),t]}let ir=0;const Jc=Promise.resolve(),Xc=()=>ir||(Jc.then(()=>ir=0),ir=Date.now());function Qc(e,t){const n=r=>{if(!r._vts)r._vts=Date.now();else if(r._vts<=n.attached)return;Ae(Zc(r,n.value),t,5,[r])};return n.value=e,n.attached=Xc(),n}function Zc(e,t){if(D(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(r=>s=>!s._stopped&&r&&r(s))}else return t}const Vs=/^on[a-z]/,Gc=(e,t,n,r,s=!1,i,o,l,c)=>{t==="class"?jc(e,r,s):t==="style"?Uc(e,n,r):en(t)?Ar(t)||zc(e,t,n,r,o):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):ea(e,t,r,s))?Vc(e,t,r,i,o,l,c):(t==="true-value"?e._trueValue=r:t==="false-value"&&(e._falseValue=r),Wc(e,t,r,s))};function ea(e,t,n,r){return r?!!(t==="innerHTML"||t==="textContent"||t in e&&Vs.test(t)&&V(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||Vs.test(t)&&ie(n)?!1:t in e}const Mn=e=>{const t=e.props["onUpdate:modelValue"]||!1;return D(t)?n=>wn(t,n):t};function ta(e){e.target.composing=!0}function qs(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const xt=Symbol("_assign"),yu={created(e,{modifiers:{lazy:t,trim:n,number:r}},s){e[xt]=Mn(s);const i=r||s.props&&s.props.type==="number";ct(e,t?"change":"input",o=>{if(o.target.composing)return;let l=e.value;n&&(l=l.trim()),i&&(l=Tn(l)),e[xt](l)}),n&&ct(e,"change",()=>{e.value=e.value.trim()}),t||(ct(e,"compositionstart",ta),ct(e,"compositionend",qs),ct(e,"change",qs))},mounted(e,{value:t}){e.value=t??""},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:r,number:s}},i){if(e[xt]=Mn(i),e.composing||document.activeElement===e&&e.type!=="range"&&(n||r&&e.value.trim()===t||(s||e.type==="number")&&Tn(e.value)===t))return;const o=t??"";e.value!==o&&(e.value=o)}},_u={deep:!0,created(e,{value:t,modifiers:{number:n}},r){const s=Nn(t);ct(e,"change",()=>{const i=Array.prototype.filter.call(e.options,o=>o.selected).map(o=>n?Tn(Ln(o)):Ln(o));e[xt](e.multiple?s?new Set(i):i:i[0])}),e[xt]=Mn(r)},mounted(e,{value:t}){zs(e,t)},beforeUpdate(e,t,n){e[xt]=Mn(n)},updated(e,{value:t}){zs(e,t)}};function zs(e,t){const n=e.multiple;if(!(n&&!D(t)&&!Nn(t))){for(let r=0,s=e.options.length;r<s;r++){const i=e.options[r],o=Ln(i);if(n)D(t)?i.selected=ko(t,o)>-1:i.selected=t.has(o);else if($n(Ln(i),t)){e.selectedIndex!==r&&(e.selectedIndex=r);return}}!n&&e.selectedIndex!==-1&&(e.selectedIndex=-1)}}function Ln(e){return"_value"in e?e._value:e.value}const na=["ctrl","shift","alt","meta"],ra={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>na.some(n=>e[`${n}Key`]&&!t.includes(n))},bu=(e,t)=>(n,...r)=>{for(let s=0;s<t.length;s++){const i=ra[t[s]];if(i&&i(n,t))return}return e(n,...r)},sa={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},vu=(e,t)=>n=>{if(!("key"in n))return;const r=ht(n.key);if(t.some(s=>s===r||sa[s]===r))return e(n)},oo=fe({patchProp:Gc},Nc);let Vt,Ys=!1;function ia(){return Vt||(Vt=pc(oo))}function oa(){return Vt=Ys?Vt:gc(oo),Ys=!0,Vt}const wu=(...e)=>{const t=ia().createApp(...e),{mount:n}=t;return t.mount=r=>{const s=lo(r);if(!s)return;const i=t._component;!V(i)&&!i.render&&!i.template&&(i.template=s.innerHTML),s.innerHTML="";const o=n(s,!1,s instanceof SVGElement);return s instanceof Element&&(s.removeAttribute("v-cloak"),s.setAttribute("data-v-app","")),o},t},Cu=(...e)=>{const t=oa().createApp(...e),{mount:n}=t;return t.mount=r=>{const s=lo(r);if(s)return n(s,!0,s instanceof SVGElement)},t};function lo(e){return ie(e)?document.querySelector(e):e}const Eu=(e,t)=>{const n=e.__vccOpts||e;for(const[r,s]of t)n[r]=s;return n},la="modulepreload",ca=function(e){return"/zerdocs/"+e},Js={},xu=function(t,n,r){if(!n||n.length===0)return t();const s=document.getElementsByTagName("link");return Promise.all(n.map(i=>{if(i=ca(i),i in Js)return;Js[i]=!0;const o=i.endsWith(".css"),l=o?'[rel="stylesheet"]':"";if(!!r)for(let f=s.length-1;f>=0;f--){const d=s[f];if(d.href===i&&(!o||d.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${l}`))return;const a=document.createElement("link");if(a.rel=o?"stylesheet":la,o||(a.as="script",a.crossOrigin=""),a.href=i,document.head.appendChild(a),o)return new Promise((f,d)=>{a.addEventListener("load",f),a.addEventListener("error",()=>d(new Error(`Unable to preload CSS for ${i}`)))})})).then(()=>t()).catch(i=>{const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=i,window.dispatchEvent(o),!o.defaultPrevented)throw i})},aa=window.__VP_SITE_DATA__;function ts(e){return fi()?(Uo(e),!0):!1}function Fe(e){return typeof e=="function"?e():jr(e)}function Tu(e,t){const n=(t==null?void 0:t.computedGetter)===!1?jr:Fe;return function(...r){return le(()=>e.apply(this,r.map(s=>n(s))))}}const co=typeof window<"u"&&typeof document<"u",ua=Object.prototype.toString,fa=e=>ua.call(e)==="[object Object]",Zt=()=>{},Xs=da();function da(){var e;return co&&((e=window==null?void 0:window.navigator)==null?void 0:e.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent)}function ha(e,t){function n(...r){return new Promise((s,i)=>{Promise.resolve(e(()=>t.apply(this,r),{fn:t,thisArg:this,args:r})).then(s).catch(i)})}return n}const ao=e=>e();function pa(e,t={}){let n,r,s=Zt;const i=l=>{clearTimeout(l),s(),s=Zt};return l=>{const c=Fe(e),a=Fe(t.maxWait);return n&&i(n),c<=0||a!==void 0&&a<=0?(r&&(i(r),r=null),Promise.resolve(l())):new Promise((f,d)=>{s=t.rejectOnCancel?d:f,a&&!r&&(r=setTimeout(()=>{n&&i(n),r=null,f(l())},a)),n=setTimeout(()=>{r&&i(r),r=null,f(l())},c)})}}function ga(e=ao){const t=ue(!0);function n(){t.value=!1}function r(){t.value=!0}const s=(...i)=>{t.value&&e(...i)};return{isActive:jn(t),pause:n,resume:r,eventFilter:s}}function uo(...e){if(e.length!==1)return yl(...e);const t=e[0];return typeof t=="function"?jn(pl(()=>({get:t,set:Zt}))):ue(t)}function fo(e,t,n={}){const{eventFilter:r=ao,...s}=n;return Qe(e,ha(r,t),s)}function ma(e,t,n={}){const{eventFilter:r,...s}=n,{eventFilter:i,pause:o,resume:l,isActive:c}=ga(r);return{stop:fo(e,t,{...s,eventFilter:i}),pause:o,resume:l,isActive:c}}function ya(e,t=!0){rn()?Mt(e):t?e():Un(e)}function Au(e,t,n={}){const{debounce:r=0,maxWait:s=void 0,...i}=n;return fo(e,t,{...i,eventFilter:pa(r,{maxWait:s})})}function Ru(e,t,n){let r;ae(n)?r={evaluating:n}:r=n||{};const{lazy:s=!1,evaluating:i=void 0,shallow:o=!0,onError:l=Zt}=r,c=ue(!s),a=o?Dr(t):ue(t);let f=0;return qr(async d=>{if(!c.value)return;f++;const g=f;let b=!1;i&&Promise.resolve().then(()=>{i.value=!0});try{const v=await e(x=>{d(()=>{i&&(i.value=!1),b||x()})});g===f&&(a.value=v)}catch(v){l(v)}finally{i&&g===f&&(i.value=!1),b=!0}}),s?le(()=>(c.value=!0,a.value)):a}function ho(e){var t;const n=Fe(e);return(t=n==null?void 0:n.$el)!=null?t:n}const je=co?window:void 0;function Gt(...e){let t,n,r,s;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,r,s]=e,t=je):[t,n,r,s]=e,!t)return Zt;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const i=[],o=()=>{i.forEach(f=>f()),i.length=0},l=(f,d,g,b)=>(f.addEventListener(d,g,b),()=>f.removeEventListener(d,g,b)),c=Qe(()=>[ho(t),Fe(s)],([f,d])=>{if(o(),!f)return;const g=fa(d)?{...d}:d;i.push(...n.flatMap(b=>r.map(v=>l(f,b,v,g))))},{immediate:!0,flush:"post"}),a=()=>{c(),o()};return ts(a),a}function _a(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function Su(...e){let t,n,r={};e.length===3?(t=e[0],n=e[1],r=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],r=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:s=je,eventName:i="keydown",passive:o=!1,dedupe:l=!1}=r,c=_a(t);return Gt(s,i,f=>{f.repeat&&Fe(l)||c(f)&&n(f)},o)}function ba(){const e=ue(!1);return rn()&&Mt(()=>{e.value=!0}),e}function va(e){const t=ba();return le(()=>(t.value,!!e()))}function wa(e,t={}){const{window:n=je}=t,r=va(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let s;const i=ue(!1),o=a=>{i.value=a.matches},l=()=>{s&&("removeEventListener"in s?s.removeEventListener("change",o):s.removeListener(o))},c=qr(()=>{r.value&&(l(),s=n.matchMedia(Fe(e)),"addEventListener"in s?s.addEventListener("change",o):s.addListener(o),i.value=s.matches)});return ts(()=>{c(),l(),s=void 0}),i}const yn=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},_n="__vueuse_ssr_handlers__",Ca=Ea();function Ea(){return _n in yn||(yn[_n]=yn[_n]||{}),yn[_n]}function po(e,t){return Ca[e]||t}function xa(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const Ta={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},Qs="vueuse-storage";function ns(e,t,n,r={}){var s;const{flush:i="pre",deep:o=!0,listenToStorageChanges:l=!0,writeDefaults:c=!0,mergeDefaults:a=!1,shallow:f,window:d=je,eventFilter:g,onError:b=_=>{console.error(_)}}=r,v=(f?Dr:ue)(t);if(!n)try{n=po("getDefaultStorage",()=>{var _;return(_=je)==null?void 0:_.localStorage})()}catch(_){b(_)}if(!n)return v;const x=Fe(t),N=xa(x),k=(s=r.serializer)!=null?s:Ta[N],{pause:H,resume:y}=ma(v,()=>p(v.value),{flush:i,deep:o,eventFilter:g});return d&&l&&(Gt(d,"storage",M),Gt(d,Qs,B)),M(),v;function p(_){try{if(_==null)n.removeItem(e);else{const O=k.write(_),R=n.getItem(e);R!==O&&(n.setItem(e,O),d&&d.dispatchEvent(new CustomEvent(Qs,{detail:{key:e,oldValue:R,newValue:O,storageArea:n}})))}}catch(O){b(O)}}function T(_){const O=_?_.newValue:n.getItem(e);if(O==null)return c&&x!==null&&n.setItem(e,k.write(x)),x;if(!_&&a){const R=k.read(O);return typeof a=="function"?a(R,x):N==="object"&&!Array.isArray(R)?{...x,...R}:R}else return typeof O!="string"?O:k.read(O)}function B(_){M(_.detail)}function M(_){if(!(_&&_.storageArea!==n)){if(_&&_.key==null){v.value=x;return}if(!(_&&_.key!==e)){H();try{(_==null?void 0:_.newValue)!==k.write(v.value)&&(v.value=T(_))}catch(O){b(O)}finally{_?Un(y):y()}}}}}function Aa(e){return wa("(prefers-color-scheme: dark)",e)}function Ra(e={}){const{selector:t="html",attribute:n="class",initialValue:r="auto",window:s=je,storage:i,storageKey:o="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:c,emitAuto:a,disableTransition:f=!0}=e,d={auto:"",light:"light",dark:"dark",...e.modes||{}},g=Aa({window:s}),b=le(()=>g.value?"dark":"light"),v=c||(o==null?uo(r):ns(o,r,i,{window:s,listenToStorageChanges:l})),x=le(()=>v.value==="auto"?b.value:v.value),N=po("updateHTMLAttrs",(p,T,B)=>{const M=typeof p=="string"?s==null?void 0:s.document.querySelector(p):ho(p);if(!M)return;let _;if(f){_=s.document.createElement("style");const O="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";_.appendChild(document.createTextNode(O)),s.document.head.appendChild(_)}if(T==="class"){const O=B.split(/\s/g);Object.values(d).flatMap(R=>(R||"").split(/\s/g)).filter(Boolean).forEach(R=>{O.includes(R)?M.classList.add(R):M.classList.remove(R)})}else M.setAttribute(T,B);f&&(s.getComputedStyle(_).opacity,document.head.removeChild(_))});function k(p){var T;N(t,n,(T=d[p])!=null?T:p)}function H(p){e.onChanged?e.onChanged(p,k):k(p)}Qe(x,H,{flush:"post",immediate:!0}),ya(()=>H(x.value));const y=le({get(){return a?v.value:x.value},set(p){v.value=p}});try{return Object.assign(y,{store:v,system:b,state:x})}catch{return y}}function Sa(e={}){const{valueDark:t="dark",valueLight:n=""}=e,r=Ra({...e,onChanged:(i,o)=>{var l;e.onChanged?(l=e.onChanged)==null||l.call(e,i==="dark",o,i):o(i)},modes:{dark:t,light:n}});return le({get(){return r.value==="dark"},set(i){const o=i?"dark":"light";r.system.value===o?r.value="auto":r.value=o}})}function or(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function Ou(e,t,n={}){const{window:r=je}=n;return ns(e,t,r==null?void 0:r.localStorage,n)}function go(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:go(n)}}function Oa(e){const t=e||window.event,n=t.target;return go(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}function Fu(e,t=!1){const n=ue(t);let r=null,s;Qe(uo(e),l=>{const c=or(Fe(l));if(c){const a=c;s=a.style.overflow,n.value&&(a.style.overflow="hidden")}},{immediate:!0});const i=()=>{const l=or(Fe(e));!l||n.value||(Xs&&(r=Gt(l,"touchmove",c=>{Oa(c)},{passive:!1})),l.style.overflow="hidden",n.value=!0)},o=()=>{const l=or(Fe(e));!l||!n.value||(Xs&&(r==null||r()),l.style.overflow=s,n.value=!1)};return ts(o),le({get(){return n.value},set(l){l?i():o()}})}function Iu(e,t,n={}){const{window:r=je}=n;return ns(e,t,r==null?void 0:r.sessionStorage,n)}function Pu(e={}){const{window:t=je}=e;if(!t)return{x:ue(0),y:ue(0)};const n=ue(t.scrollX),r=ue(t.scrollY);return Gt(t,"scroll",()=>{n.value=t.scrollX,r.value=t.scrollY},{capture:!1,passive:!0}),{x:n,y:r}}const mo=/^[a-z]+:/i,Fa="vitepress-theme-appearance",yo=/#.*$/,Ia=/(index)?\.(md|html)$/,xe=typeof document<"u",_o={relativePath:"",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function Pa(e,t,n=!1){if(t===void 0)return!1;if(e=Zs(`/${e}`),n)return new RegExp(t).test(e);if(Zs(t)!==e)return!1;const r=t.match(yo);return r?(xe?location.hash:"")===r[0]:!0}function Zs(e){return decodeURI(e).replace(yo,"").replace(Ia,"")}function Ma(e){return mo.test(e)}function La(e,t){var r,s,i,o,l,c,a;const n=Object.keys(e.locales).find(f=>f!=="root"&&!Ma(f)&&Pa(t,`/${f}/`,!0))||"root";return Object.assign({},e,{localeIndex:n,lang:((r=e.locales[n])==null?void 0:r.lang)??e.lang,dir:((s=e.locales[n])==null?void 0:s.dir)??e.dir,title:((i=e.locales[n])==null?void 0:i.title)??e.title,titleTemplate:((o=e.locales[n])==null?void 0:o.titleTemplate)??e.titleTemplate,description:((l=e.locales[n])==null?void 0:l.description)??e.description,head:vo(e.head,((c=e.locales[n])==null?void 0:c.head)??[]),themeConfig:{...e.themeConfig,...(a=e.locales[n])==null?void 0:a.themeConfig}})}function bo(e,t){const n=t.title||e.title,r=t.titleTemplate??e.titleTemplate;if(typeof r=="string"&&r.includes(":title"))return r.replace(/:title/g,n);const s=Na(e.title,r);return`${n}${s}`}function Na(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function Ba(e,t){const[n,r]=t;if(n!=="meta")return!1;const s=Object.entries(r)[0];return s==null?!1:e.some(([i,o])=>i===n&&o[s[0]]===s[1])}function vo(e,t){return[...e.filter(n=>!Ba(t,n)),...t]}const Ha=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,$a=/^[a-z]:/i;function Gs(e){const t=$a.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(Ha,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const ka=Symbol(),ft=Dr(aa);function Mu(e){const t=le(()=>La(ft.value,e.data.relativePath)),n=t.value.appearance,r=n==="force-dark"?ue(!0):n?Sa({storageKey:Fa,initialValue:()=>typeof n=="string"?n:"auto",...typeof n=="object"?n:{}}):ue(!1);return{site:t,theme:le(()=>t.value.themeConfig),page:le(()=>e.data),frontmatter:le(()=>e.data.frontmatter),params:le(()=>e.data.params),lang:le(()=>t.value.lang),dir:le(()=>t.value.dir),localeIndex:le(()=>t.value.localeIndex||"root"),title:le(()=>bo(t.value,e.data)),description:le(()=>e.data.description||t.value.description),isDark:r}}function Da(){const e=Et(ka);if(!e)throw new Error("vitepress data not properly injected in app");return e}function ja(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function ei(e){return mo.test(e)||!e.startsWith("/")?e:ja(ft.value.base,e)}function Ua(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t=t.replace(/\/$/,"/index"),xe){const n="/zerdocs/";t=Gs(t.slice(n.length).replace(/\//g,"_")||"index")+".md";let r=__VP_HASH_MAP__[t.toLowerCase()];if(r||(t=t.endsWith("_index.md")?t.slice(0,-9)+".md":t.slice(0,-3)+"_index.md",r=__VP_HASH_MAP__[t.toLowerCase()]),!r)return null;t=`${n}assets/${t}.${r}.js`}else t=`./${Gs(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}let En=[];function Lu(e){En.push(e),Yn(()=>{En=En.filter(t=>t!==e)})}const Ka=Symbol(),wo="http://a.com",Wa=()=>({path:"/",component:null,data:_o});function Nu(e,t){const n=Dn(Wa()),r={route:n,go:s};async function s(l=xe?location.href:"/"){var c,a;l=xr(l),await((c=r.onBeforeRouteChange)==null?void 0:c.call(r,l))!==!1&&(ri(l),await o(l),await((a=r.onAfterRouteChanged)==null?void 0:a.call(r,l)))}let i=null;async function o(l,c=0,a=!1){var g;if(await((g=r.onBeforePageLoad)==null?void 0:g.call(r,l))===!1)return;const f=new URL(l,wo),d=i=f.pathname;try{let b=await e(d);if(!b)throw new Error(`Page not found: ${d}`);if(i===d){i=null;const{default:v,__pageData:x}=b;if(!v)throw new Error(`Invalid route component: ${v}`);n.path=xe?d:ei(d),n.component=Dt(v),n.data=Dt(x),xe&&Un(()=>{let N=ft.value.base+x.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!ft.value.cleanUrls&&!N.endsWith("/")&&(N+=".html"),N!==f.pathname&&(f.pathname=N,l=N+f.search+f.hash,history.replaceState(null,"",l)),f.hash&&!c){let k=null;try{k=document.getElementById(decodeURIComponent(f.hash).slice(1))}catch(H){console.warn(H)}if(k){ti(k,f.hash);return}}window.scrollTo(0,c)})}}catch(b){if(!/fetch|Page not found/.test(b.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(b),!a)try{const v=await fetch(ft.value.base+"hashmap.json");window.__VP_HASH_MAP__=await v.json(),await o(l,c,!0);return}catch{}i===d&&(i=null,n.path=xe?d:ei(d),n.component=t?Dt(t):null,n.data=_o)}}return xe&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const a=l.target.closest("a");if(a&&!a.closest(".vp-raw")&&(a instanceof SVGElement||!a.download)){const{target:f}=a,{href:d,origin:g,pathname:b,hash:v,search:x}=new URL(a.href instanceof SVGAnimatedString?a.href.animVal:a.href,a.baseURI),N=window.location,k=b.match(/\.\w+$/);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&!f&&g===N.origin&&!(k&&k[0]!==".html")&&(l.preventDefault(),b===N.pathname&&x===N.search?(v!==N.hash&&(history.pushState(null,"",v),window.dispatchEvent(new Event("hashchange"))),v?ti(a,v,a.classList.contains("header-anchor")):(ri(d),window.scrollTo(0,0))):s(d))}},{capture:!0}),window.addEventListener("popstate",l=>{o(xr(location.href),l.state&&l.state.scrollPosition||0)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),r}function Va(){const e=Et(Ka);if(!e)throw new Error("useRouter() is called without provider.");return e}function Co(){return Va().route}function ti(e,t,n=!1){let r=null;try{r=e.classList.contains("header-anchor")?e:document.getElementById(decodeURIComponent(t).slice(1))}catch(s){console.warn(s)}if(r){let a=function(){!n||Math.abs(c-window.scrollY)>window.innerHeight?window.scrollTo(0,c):window.scrollTo({left:0,top:c,behavior:"smooth"})},s=ft.value.scrollOffset,i=0,o=24;if(typeof s=="object"&&"padding"in s&&(o=s.padding,s=s.selector),typeof s=="number")i=s;else if(typeof s=="string")i=ni(s,o);else if(Array.isArray(s))for(const f of s){const d=ni(f,o);if(d){i=d;break}}const l=parseInt(window.getComputedStyle(r).paddingTop,10),c=window.scrollY+r.getBoundingClientRect().top-i+l;requestAnimationFrame(a)}}function ni(e,t){const n=document.querySelector(e);if(!n)return 0;const r=n.getBoundingClientRect().bottom;return r<0?0:r+t}function ri(e){xe&&e!==xr(location.href)&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",e))}function xr(e){const t=new URL(e,wo);return t.pathname=t.pathname.replace(/(^|\/)index(\.html)?$/,"$1"),ft.value.cleanUrls?t.pathname=t.pathname.replace(/\.html$/,""):!t.pathname.endsWith("/")&&!t.pathname.endsWith(".html")&&(t.pathname+=".html"),t.pathname+t.search+t.hash}const si=()=>En.forEach(e=>e()),Bu=zr({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(e){const t=Co(),{site:n}=Da();return()=>Cr(e.as,n.value.contentProps??{style:{position:"relative"}},[t.component?Cr(t.component,{onVnodeMounted:si,onVnodeUpdated:si}):"404 Page Not Found"])}}),Hu=zr({setup(e,{slots:t}){const n=ue(!1);return Mt(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function $u(){xe&&window.addEventListener("click",e=>{var n;const t=e.target;if(t.matches(".vp-code-group input")){const r=(n=t.parentElement)==null?void 0:n.parentElement;if(!r)return;const s=Array.from(r.querySelectorAll("input")).indexOf(t);if(s<0)return;const i=r.querySelector(".blocks");if(!i)return;const o=Array.from(i.children).find(a=>a.classList.contains("active"));if(!o)return;const l=i.children[s];if(!l||o===l)return;o.classList.remove("active"),l.classList.add("active");const c=r==null?void 0:r.querySelector(`label[for="${t.id}"]`);c==null||c.scrollIntoView({block:"nearest"})}})}function ku(){if(xe){const e=new WeakMap;window.addEventListener("click",t=>{var r;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const s=n.parentElement,i=(r=n.nextElementSibling)==null?void 0:r.nextElementSibling;if(!s||!i)return;const o=/language-(shellscript|shell|bash|sh|zsh)/.test(s.className);let l="";i.querySelectorAll("span.line:not(.diff.remove)").forEach(c=>l+=(c.textContent||"")+`
+`),l=l.slice(0,-1),o&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),qa(l).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const c=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,c)})}})}}async function qa(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const r=document.getSelection(),s=r?r.rangeCount>0&&r.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),s&&(r.removeAllRanges(),r.addRange(s)),n&&n.focus()}}function Du(e,t){let n=[],r=!0;const s=i=>{if(r){r=!1;return}const o=i.map(ii);n.forEach((l,c)=>{const a=o.findIndex(f=>f==null?void 0:f.isEqualNode(l??null));a!==-1?delete o[a]:(l==null||l.remove(),delete n[c])}),o.forEach(l=>l&&document.head.appendChild(l)),n=[...n,...o].filter(Boolean)};qr(()=>{const i=e.data,o=t.value,l=i&&i.description,c=i&&i.frontmatter.head||[],a=bo(o,i);a!==document.title&&(document.title=a);const f=l||o.description;let d=document.querySelector("meta[name=description]");d?d.getAttribute("content")!==f&&d.setAttribute("content",f):ii(["meta",{name:"description",content:f}]),s(vo(o.head,Ya(c)))})}function ii([e,t,n]){const r=document.createElement(e);for(const s in t)r.setAttribute(s,t[s]);return n&&(r.innerHTML=n),e==="script"&&!t.async&&(r.async=!1),r}function za(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function Ya(e){return e.filter(t=>!za(t))}const lr=new Set,Eo=()=>document.createElement("link"),Ja=e=>{const t=Eo();t.rel="prefetch",t.href=e,document.head.appendChild(t)},Xa=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let bn;const Qa=xe&&(bn=Eo())&&bn.relList&&bn.relList.supports&&bn.relList.supports("prefetch")?Ja:Xa;function ju(){if(!xe||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const r=()=>{n&&n.disconnect(),n=new IntersectionObserver(i=>{i.forEach(o=>{if(o.isIntersecting){const l=o.target;n.unobserve(l);const{pathname:c}=l;if(!lr.has(c)){lr.add(c);const a=Ua(c);a&&Qa(a)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(i=>{const{hostname:o,pathname:l}=new URL(i.href instanceof SVGAnimatedString?i.href.animVal:i.href,i.baseURI),c=l.match(/\.\w+$/);c&&c[0]!==".html"||i.target!=="_blank"&&o===location.hostname&&(l!==location.pathname?n.observe(i):lr.add(l))})})};Mt(r);const s=Co();Qe(()=>s.path,r),Yn(()=>{n&&n.disconnect()})}export{au as $,su as A,zl as B,tu as C,lu as D,Dr as E,ye as F,Lu as G,se as H,nu as I,mo as J,Co as K,Cc as L,Et as M,Fr as N,Un as O,Pu as P,pu as Q,jn as R,Tu as S,so as T,yl as U,Su as V,ou as W,xu as X,Fu as Y,lc as Z,Eu as _,eo as a,vu as a0,bu as a1,uu as a2,fu as a3,iu as a4,yu as a5,_u as a6,Ql as a7,ru as a8,mu as a9,wu as aA,Cr as aa,Du as ab,Ka as ac,Mu as ad,ka as ae,Bu as af,Hu as ag,ft as ah,Cu as ai,Nu as aj,Ua as ak,ju as al,ku as am,$u as an,ho as ao,ts as ap,Ru as aq,Iu as ar,Ou as as,Au as at,Va as au,Gt as av,Hi as aw,ae as ax,du as ay,Dt as az,Qi as b,hu as c,zr as d,gu as e,ei as f,le as g,ue as h,Ma as i,Mt as j,Gi as k,jr as l,eu as m,Ir as n,Qr as o,Ga as p,Pa as q,cu as r,xe as s,Za as t,Da as u,wa as v,Al as w,Qe as x,qr as y,Yn as z};
diff --git a/assets/chunks/theme.1e9d2528.js b/assets/chunks/theme.1e9d2528.js
new file mode 100644
index 00000000..3ff23a1c
--- /dev/null
+++ b/assets/chunks/theme.1e9d2528.js
@@ -0,0 +1 @@
+import{d as b,o as a,c as i,r as u,n as T,a as x,t as L,_ as m,b as $,w as v,e as f,T as ce,u as ze,i as De,f as ue,g as k,h as M,j as G,k as c,l,p as H,m as z,q as O,s as q,v as re,x as U,y as te,z as de,A as Ve,B as Ee,C as j,F as N,D as A,E as _e,G as Y,H as h,I as F,J as we,K as se,L as Z,M as ne,N as Fe,O as Oe,P as Le,Q as Ge,R as Ue,S as je,U as Ke,V as ke,W as Re,X as qe,Y as Se,Z as Me,$ as We,a0 as Ye,a1 as Je,a2 as Xe}from"./framework.c53372a0.js";const Ze=b({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(s){return(e,t)=>(a(),i("span",{class:T(["VPBadge",e.type])},[u(e.$slots,"default",{},()=>[x(L(e.text),1)],!0)],2))}});const Qe=m(Ze,[["__scopeId","data-v-9613cc9f"]]),et={key:0,class:"VPBackdrop"},tt=b({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(s){return(e,t)=>(a(),$(ce,{name:"fade"},{default:v(()=>[e.show?(a(),i("div",et)):f("",!0)]),_:1}))}});const st=m(tt,[["__scopeId","data-v-c79a1216"]]),P=ze;function nt(s,e){let t,n=!1;return()=>{t&&clearTimeout(t),n?t=setTimeout(s,e):(s(),(n=!0)&&setTimeout(()=>n=!1,e))}}function le(s){return/^\//.test(s)?s:`/${s}`}function J(s){const{pathname:e,search:t,hash:n,protocol:o}=new URL(s,"http://a.com");if(De(s)||s.startsWith("#")||!o.startsWith("http")||/\.(?!html|md)\w+($|\?)/i.test(s))return s;const{site:r}=P(),d=e.endsWith("/")||e.endsWith(".html")?s:s.replace(/(?:(^\.+)\/)?.*$/,`$1${e.replace(/(\.md)?$/,r.value.cleanUrls?"":".html")}${t}${n}`);return ue(d)}function X({removeCurrent:s=!0,correspondingLink:e=!1}={}){const{site:t,localeIndex:n,page:o,theme:r}=P(),d=k(()=>{var _,g;return{label:(_=t.value.locales[n.value])==null?void 0:_.label,link:((g=t.value.locales[n.value])==null?void 0:g.link)||(n.value==="root"?"/":`/${n.value}/`)}});return{localeLinks:k(()=>Object.entries(t.value.locales).flatMap(([_,g])=>s&&d.value.label===g.label?[]:{text:g.label,link:ot(g.link||(_==="root"?"/":`/${_}/`),r.value.i18nRouting!==!1&&e,o.value.relativePath.slice(d.value.link.length-1),!t.value.cleanUrls)})),currentLang:d}}function ot(s,e,t,n){return e?s.replace(/\/$/,"")+le(t.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,n?".html":"")):s}const at=s=>(H("data-v-f87ff6e4"),s=s(),z(),s),rt={class:"NotFound"},lt={class:"code"},it={class:"title"},ct=at(()=>c("div",{class:"divider"},null,-1)),ut={class:"quote"},dt={class:"action"},_t=["href","aria-label"],vt=b({__name:"NotFound",setup(s){const{site:e,theme:t}=P(),{localeLinks:n}=X({removeCurrent:!1}),o=M("/");return G(()=>{var d;const r=window.location.pathname.replace(e.value.base,"").replace(/(^.*?\/).*$/,"/$1");n.value.length&&(o.value=((d=n.value.find(({link:p})=>p.startsWith(r)))==null?void 0:d.link)||n.value[0].link)}),(r,d)=>{var p,_,g,V,y;return a(),i("div",rt,[c("p",lt,L(((p=l(t).notFound)==null?void 0:p.code)??"404"),1),c("h1",it,L(((_=l(t).notFound)==null?void 0:_.title)??"PAGE NOT FOUND"),1),ct,c("blockquote",ut,L(((g=l(t).notFound)==null?void 0:g.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),c("div",dt,[c("a",{class:"link",href:l(ue)(o.value),"aria-label":((V=l(t).notFound)==null?void 0:V.linkLabel)??"go to home"},L(((y=l(t).notFound)==null?void 0:y.linkText)??"Take me home"),9,_t)])])}}});const pt=m(vt,[["__scopeId","data-v-f87ff6e4"]]);function Ne(s,e){if(Array.isArray(s))return Q(s);if(s==null)return[];e=le(e);const t=Object.keys(s).sort((o,r)=>r.split("/").length-o.split("/").length).find(o=>e.startsWith(le(o))),n=t?s[t]:[];return Array.isArray(n)?Q(n):Q(n.items,n.base)}function ht(s){const e=[];let t=0;for(const n in s){const o=s[n];if(o.items){t=e.push(o);continue}e[t]||e.push({items:[]}),e[t].items.push(o)}return e}function ft(s){const e=[];function t(n){for(const o of n)o.text&&o.link&&e.push({text:o.text,link:o.link,docFooterText:o.docFooterText}),o.items&&t(o.items)}return t(s),e}function ie(s,e){return Array.isArray(e)?e.some(t=>ie(s,t)):O(s,e.link)?!0:e.items?ie(s,e.items):!1}function Q(s,e){return[...s].map(t=>{const n={...t},o=n.base||e;return o&&n.link&&(n.link=o+n.link),n.items&&(n.items=Q(n.items,o)),n})}function D(){const{frontmatter:s,page:e,theme:t}=P(),n=re("(min-width: 960px)"),o=M(!1),r=k(()=>{const B=t.value.sidebar,w=e.value.relativePath;return B?Ne(B,w):[]}),d=M(r.value);U(r,(B,w)=>{JSON.stringify(B)!==JSON.stringify(w)&&(d.value=r.value)});const p=k(()=>s.value.sidebar!==!1&&d.value.length>0&&s.value.layout!=="home"),_=k(()=>g?s.value.aside==null?t.value.aside==="left":s.value.aside==="left":!1),g=k(()=>s.value.layout==="home"?!1:s.value.aside!=null?!!s.value.aside:t.value.aside!==!1),V=k(()=>p.value&&n.value),y=k(()=>p.value?ht(d.value):[]);function I(){o.value=!0}function S(){o.value=!1}function C(){o.value?S():I()}return{isOpen:o,sidebar:d,sidebarGroups:y,hasSidebar:p,hasAside:g,leftAside:_,isSidebarEnabled:V,open:I,close:S,toggle:C}}function mt(s,e){let t;te(()=>{t=s.value?document.activeElement:void 0}),G(()=>{window.addEventListener("keyup",n)}),de(()=>{window.removeEventListener("keyup",n)});function n(o){o.key==="Escape"&&s.value&&(e(),t==null||t.focus())}}const Ie=M(q?location.hash:"");q&&window.addEventListener("hashchange",()=>{Ie.value=location.hash});function gt(s){const{page:e}=P(),t=M(!1),n=k(()=>s.value.collapsed!=null),o=k(()=>!!s.value.link),r=M(!1),d=()=>{r.value=O(e.value.relativePath,s.value.link)};U([e,s,Ie],d),G(d);const p=k(()=>r.value?!0:s.value.items?ie(e.value.relativePath,s.value.items):!1),_=k(()=>!!(s.value.items&&s.value.items.length));te(()=>{t.value=!!(n.value&&s.value.collapsed)}),Ve(()=>{(r.value||p.value)&&(t.value=!1)});function g(){n.value&&(t.value=!t.value)}return{collapsed:t,collapsible:n,isLink:o,isActiveLink:r,hasActiveLink:p,hasChildren:_,toggle:g}}function bt(){const{hasSidebar:s}=D(),e=re("(min-width: 960px)"),t=re("(min-width: 1280px)");return{isAsideEnabled:k(()=>!t.value&&!e.value?!1:s.value?t.value:e.value)}}const $t=71;function ve(s){return typeof s.outline=="object"&&!Array.isArray(s.outline)&&s.outline.label||s.outlineTitle||"On this page"}function pe(s){const e=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(t=>t.id&&t.hasChildNodes()).map(t=>{const n=Number(t.tagName[1]);return{title:kt(t),link:"#"+t.id,level:n}});return yt(e,s)}function kt(s){let e="";for(const t of s.childNodes)if(t.nodeType===1){if(t.classList.contains("VPBadge")||t.classList.contains("header-anchor"))continue;e+=t.textContent}else t.nodeType===3&&(e+=t.textContent);return e.trim()}function yt(s,e){if(e===!1)return[];const t=(typeof e=="object"&&!Array.isArray(e)?e.level:e)||2,[n,o]=typeof t=="number"?[t,t]:t==="deep"?[2,6]:t;s=s.filter(d=>d.level>=n&&d.level<=o);const r=[];e:for(let d=0;d<s.length;d++){const p=s[d];if(d===0)r.push(p);else{for(let _=d-1;_>=0;_--){const g=s[_];if(g.level<p.level){(g.children||(g.children=[])).push(p);continue e}}r.push(p)}}return r}function Pt(s,e){const{isAsideEnabled:t}=bt(),n=nt(r,100);let o=null;G(()=>{requestAnimationFrame(r),window.addEventListener("scroll",n)}),Ee(()=>{d(location.hash)}),de(()=>{window.removeEventListener("scroll",n)});function r(){if(!t.value)return;const p=[].slice.call(s.value.querySelectorAll(".outline-link")),_=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(S=>p.some(C=>C.hash===S.hash&&S.offsetParent!==null)),g=window.scrollY,V=window.innerHeight,y=document.body.offsetHeight,I=Math.abs(g+V-y)<1;if(_.length&&I){d(_[_.length-1].hash);return}for(let S=0;S<_.length;S++){const C=_[S],B=_[S+1],[w,K]=Vt(S,C,B);if(w){d(K);return}}}function d(p){o&&o.classList.remove("active"),p==null?o=null:o=s.value.querySelector(`a[href="${decodeURIComponent(p)}"]`);const _=o;_?(_.classList.add("active"),e.value.style.top=_.offsetTop+33+"px",e.value.style.opacity="1"):(e.value.style.top="33px",e.value.style.opacity="0")}}function ye(s){return s.parentElement.offsetTop-$t}function Vt(s,e,t){const n=window.scrollY;return s===0&&n===0?[!0,null]:n<ye(e)?[!1,null]:!t||n<ye(t)?[!0,e.hash]:[!1,null]}const wt=["href","title"],Lt=b({__name:"VPDocOutlineItem",props:{headers:{},root:{type:Boolean}},setup(s){function e({target:t}){const n=t.href.split("#")[1],o=document.getElementById(decodeURIComponent(n));o==null||o.focus({preventScroll:!0})}return(t,n)=>{const o=j("VPDocOutlineItem",!0);return a(),i("ul",{class:T(t.root?"root":"nested")},[(a(!0),i(N,null,A(t.headers,({children:r,link:d,title:p})=>(a(),i("li",null,[c("a",{class:"outline-link",href:d,onClick:e,title:p},L(p),9,wt),r!=null&&r.length?(a(),$(o,{key:0,headers:r},null,8,["headers"])):f("",!0)]))),256))],2)}}});const he=m(Lt,[["__scopeId","data-v-d0ee3533"]]),St=s=>(H("data-v-d330b1bb"),s=s(),z(),s),Mt={class:"content"},Nt={class:"outline-title",role:"heading","aria-level":"2"},It={"aria-labelledby":"doc-outline-aria-label"},Tt=St(()=>c("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),Ct=b({__name:"VPDocAsideOutline",setup(s){const{frontmatter:e,theme:t}=P(),n=_e([]);Y(()=>{n.value=pe(e.value.outline??t.value.outline)});const o=M(),r=M();return Pt(o,r),(d,p)=>(a(),i("div",{class:T(["VPDocAsideOutline",{"has-outline":n.value.length>0}]),ref_key:"container",ref:o,role:"navigation"},[c("div",Mt,[c("div",{class:"outline-marker",ref_key:"marker",ref:r},null,512),c("div",Nt,L(l(ve)(l(t))),1),c("nav",It,[Tt,h(he,{headers:n.value,root:!0},null,8,["headers"])])])],2))}});const Bt=m(Ct,[["__scopeId","data-v-d330b1bb"]]),At={class:"VPDocAsideCarbonAds"},xt=b({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(s){const e=()=>null;return(t,n)=>(a(),i("div",At,[h(l(e),{"carbon-ads":t.carbonAds},null,8,["carbon-ads"])]))}}),Ht=s=>(H("data-v-3f215769"),s=s(),z(),s),zt={class:"VPDocAside"},Dt=Ht(()=>c("div",{class:"spacer"},null,-1)),Et=b({__name:"VPDocAside",setup(s){const{theme:e}=P();return(t,n)=>(a(),i("div",zt,[u(t.$slots,"aside-top",{},void 0,!0),u(t.$slots,"aside-outline-before",{},void 0,!0),h(Bt),u(t.$slots,"aside-outline-after",{},void 0,!0),Dt,u(t.$slots,"aside-ads-before",{},void 0,!0),l(e).carbonAds?(a(),$(xt,{key:0,"carbon-ads":l(e).carbonAds},null,8,["carbon-ads"])):f("",!0),u(t.$slots,"aside-ads-after",{},void 0,!0),u(t.$slots,"aside-bottom",{},void 0,!0)]))}});const Ft=m(Et,[["__scopeId","data-v-3f215769"]]);function Ot(){const{theme:s,page:e}=P();return k(()=>{const{text:t="Edit this page",pattern:n=""}=s.value.editLink||{};let o;return typeof n=="function"?o=n(e.value):o=n.replace(/:path/g,e.value.filePath),{url:o,text:t}})}function Gt(){const{page:s,theme:e,frontmatter:t}=P();return k(()=>{var _,g,V,y,I,S,C,B;const n=Ne(e.value.sidebar,s.value.relativePath),o=ft(n),r=o.findIndex(w=>O(s.value.relativePath,w.link)),d=((_=e.value.docFooter)==null?void 0:_.prev)===!1&&!t.value.prev||t.value.prev===!1,p=((g=e.value.docFooter)==null?void 0:g.next)===!1&&!t.value.next||t.value.next===!1;return{prev:d?void 0:{text:(typeof t.value.prev=="string"?t.value.prev:typeof t.value.prev=="object"?t.value.prev.text:void 0)??((V=o[r-1])==null?void 0:V.docFooterText)??((y=o[r-1])==null?void 0:y.text),link:(typeof t.value.prev=="object"?t.value.prev.link:void 0)??((I=o[r-1])==null?void 0:I.link)},next:p?void 0:{text:(typeof t.value.next=="string"?t.value.next:typeof t.value.next=="object"?t.value.next.text:void 0)??((S=o[r+1])==null?void 0:S.docFooterText)??((C=o[r+1])==null?void 0:C.text),link:(typeof t.value.next=="object"?t.value.next.link:void 0)??((B=o[r+1])==null?void 0:B.link)}}})}const Ut={},jt={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Kt=c("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),Rt=c("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),qt=[Kt,Rt];function Wt(s,e){return a(),i("svg",jt,qt)}const Yt=m(Ut,[["render",Wt]]),E=b({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(s){const e=s,t=k(()=>e.tag??(e.href?"a":"span")),n=k(()=>e.href&&we.test(e.href));return(o,r)=>(a(),$(F(t.value),{class:T(["VPLink",{link:o.href,"vp-external-link-icon":n.value,"no-icon":o.noIcon}]),href:o.href?l(J)(o.href):void 0,target:o.target??(n.value?"_blank":void 0),rel:o.rel??(n.value?"noreferrer":void 0)},{default:v(()=>[u(o.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),Jt={class:"VPLastUpdated"},Xt=["datetime"],Zt=b({__name:"VPDocFooterLastUpdated",setup(s){const{theme:e,page:t,frontmatter:n,lang:o}=P(),r=k(()=>new Date(n.value.lastUpdated??t.value.lastUpdated)),d=k(()=>r.value.toISOString()),p=M("");return G(()=>{te(()=>{var _,g,V;p.value=new Intl.DateTimeFormat((g=(_=e.value.lastUpdated)==null?void 0:_.formatOptions)!=null&&g.forceLocale?o.value:void 0,((V=e.value.lastUpdated)==null?void 0:V.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(r.value)})}),(_,g)=>{var V;return a(),i("p",Jt,[x(L(((V=l(e).lastUpdated)==null?void 0:V.text)||l(e).lastUpdatedText||"Last updated")+": ",1),c("time",{datetime:d.value},L(p.value),9,Xt)])}}});const Qt=m(Zt,[["__scopeId","data-v-7e05ebdb"]]),es={key:0,class:"VPDocFooter"},ts={key:0,class:"edit-info"},ss={key:0,class:"edit-link"},ns={key:1,class:"last-updated"},os={key:1,class:"prev-next"},as={class:"pager"},rs=["href"],ls=["innerHTML"],is=["innerHTML"],cs={class:"pager"},us=["href"],ds=["innerHTML"],_s=["innerHTML"],vs=b({__name:"VPDocFooter",setup(s){const{theme:e,page:t,frontmatter:n}=P(),o=Ot(),r=Gt(),d=k(()=>e.value.editLink&&n.value.editLink!==!1),p=k(()=>t.value.lastUpdated&&n.value.lastUpdated!==!1),_=k(()=>d.value||p.value||r.value.prev||r.value.next);return(g,V)=>{var y,I,S,C,B,w;return _.value?(a(),i("footer",es,[u(g.$slots,"doc-footer-before",{},void 0,!0),d.value||p.value?(a(),i("div",ts,[d.value?(a(),i("div",ss,[h(E,{class:"edit-link-button",href:l(o).url,"no-icon":!0},{default:v(()=>[h(Yt,{class:"edit-link-icon","aria-label":"edit icon"}),x(" "+L(l(o).text),1)]),_:1},8,["href"])])):f("",!0),p.value?(a(),i("div",ns,[h(Qt)])):f("",!0)])):f("",!0),(y=l(r).prev)!=null&&y.link||(I=l(r).next)!=null&&I.link?(a(),i("nav",os,[c("div",as,[(S=l(r).prev)!=null&&S.link?(a(),i("a",{key:0,class:"pager-link prev",href:l(J)(l(r).prev.link)},[c("span",{class:"desc",innerHTML:((C=l(e).docFooter)==null?void 0:C.prev)||"Previous page"},null,8,ls),c("span",{class:"title",innerHTML:l(r).prev.text},null,8,is)],8,rs)):f("",!0)]),c("div",cs,[(B=l(r).next)!=null&&B.link?(a(),i("a",{key:0,class:"pager-link next",href:l(J)(l(r).next.link)},[c("span",{class:"desc",innerHTML:((w=l(e).docFooter)==null?void 0:w.next)||"Next page"},null,8,ds),c("span",{class:"title",innerHTML:l(r).next.text},null,8,_s)],8,us)):f("",!0)])])):f("",!0)])):f("",!0)}}});const ps=m(vs,[["__scopeId","data-v-ef5dee53"]]),hs={},fs={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ms=c("path",{d:"M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"},null,-1),gs=[ms];function bs(s,e){return a(),i("svg",fs,gs)}const fe=m(hs,[["render",bs]]),$s={key:0,class:"VPDocOutlineDropdown"},ks={key:0,class:"items"},ys=b({__name:"VPDocOutlineDropdown",setup(s){const{frontmatter:e,theme:t}=P(),n=M(!1);Y(()=>{n.value=!1});const o=_e([]);return Y(()=>{o.value=pe(e.value.outline??t.value.outline)}),(r,d)=>o.value.length>0?(a(),i("div",$s,[c("button",{onClick:d[0]||(d[0]=p=>n.value=!n.value),class:T({open:n.value})},[x(L(l(ve)(l(t)))+" ",1),h(fe,{class:"icon"})],2),n.value?(a(),i("div",ks,[h(he,{headers:o.value},null,8,["headers"])])):f("",!0)])):f("",!0)}});const Ps=m(ys,[["__scopeId","data-v-eadfb36b"]]),Vs=s=>(H("data-v-6b87e69f"),s=s(),z(),s),ws={class:"container"},Ls=Vs(()=>c("div",{class:"aside-curtain"},null,-1)),Ss={class:"aside-container"},Ms={class:"aside-content"},Ns={class:"content"},Is={class:"content-container"},Ts={class:"main"},Cs=b({__name:"VPDoc",setup(s){const{theme:e}=P(),t=se(),{hasSidebar:n,hasAside:o,leftAside:r}=D(),d=k(()=>t.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(p,_)=>{const g=j("Content");return a(),i("div",{class:T(["VPDoc",{"has-sidebar":l(n),"has-aside":l(o)}])},[u(p.$slots,"doc-top",{},void 0,!0),c("div",ws,[l(o)?(a(),i("div",{key:0,class:T(["aside",{"left-aside":l(r)}])},[Ls,c("div",Ss,[c("div",Ms,[h(Ft,null,{"aside-top":v(()=>[u(p.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":v(()=>[u(p.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":v(()=>[u(p.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(p.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(p.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(p.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):f("",!0),c("div",Ns,[c("div",Is,[u(p.$slots,"doc-before",{},void 0,!0),h(Ps),c("main",Ts,[h(g,{class:T(["vp-doc",[d.value,l(e).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),h(ps,null,{"doc-footer-before":v(()=>[u(p.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),u(p.$slots,"doc-after",{},void 0,!0)])])]),u(p.$slots,"doc-bottom",{},void 0,!0)],2)}}});const Bs=m(Cs,[["__scopeId","data-v-6b87e69f"]]),As=b({__name:"VPButton",props:{tag:{},size:{default:"medium"},theme:{default:"brand"},text:{},href:{}},setup(s){const e=s,t=k(()=>e.href&&we.test(e.href)),n=k(()=>e.tag||e.href?"a":"button");return(o,r)=>(a(),$(F(n.value),{class:T(["VPButton",[o.size,o.theme]]),href:o.href?l(J)(o.href):void 0,target:t.value?"_blank":void 0,rel:t.value?"noreferrer":void 0},{default:v(()=>[x(L(o.text),1)]),_:1},8,["class","href","target","rel"]))}});const xs=m(As,[["__scopeId","data-v-c1c5efc1"]]),Hs=["src","alt"],zs=b({inheritAttrs:!1,__name:"VPImage",props:{image:{},alt:{}},setup(s){return(e,t)=>{const n=j("VPImage",!0);return e.image?(a(),i(N,{key:0},[typeof e.image=="string"||"src"in e.image?(a(),i("img",Z({key:0,class:"VPImage"},typeof e.image=="string"?e.$attrs:{...e.image,...e.$attrs},{src:l(ue)(typeof e.image=="string"?e.image:e.image.src),alt:e.alt??(typeof e.image=="string"?"":e.image.alt||"")}),null,16,Hs)):(a(),i(N,{key:1},[h(n,Z({class:"dark",image:e.image.dark,alt:e.image.alt},e.$attrs),null,16,["image","alt"]),h(n,Z({class:"light",image:e.image.light,alt:e.image.alt},e.$attrs),null,16,["image","alt"])],64))],64)):f("",!0)}}});const ee=m(zs,[["__scopeId","data-v-8426fc1a"]]),Ds=s=>(H("data-v-da5d1713"),s=s(),z(),s),Es={class:"container"},Fs={class:"main"},Os={key:0,class:"name"},Gs=["innerHTML"],Us=["innerHTML"],js=["innerHTML"],Ks={key:0,class:"actions"},Rs={key:0,class:"image"},qs={class:"image-container"},Ws=Ds(()=>c("div",{class:"image-bg"},null,-1)),Ys=b({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(s){const e=ne("hero-image-slot-exists");return(t,n)=>(a(),i("div",{class:T(["VPHero",{"has-image":t.image||l(e)}])},[c("div",Es,[c("div",Fs,[u(t.$slots,"home-hero-info",{},()=>[t.name?(a(),i("h1",Os,[c("span",{innerHTML:t.name,class:"clip"},null,8,Gs)])):f("",!0),t.text?(a(),i("p",{key:1,innerHTML:t.text,class:"text"},null,8,Us)):f("",!0),t.tagline?(a(),i("p",{key:2,innerHTML:t.tagline,class:"tagline"},null,8,js)):f("",!0)],!0),t.actions?(a(),i("div",Ks,[(a(!0),i(N,null,A(t.actions,o=>(a(),i("div",{key:o.link,class:"action"},[h(xs,{tag:"a",size:"medium",theme:o.theme,text:o.text,href:o.link},null,8,["theme","text","href"])]))),128))])):f("",!0)]),t.image||l(e)?(a(),i("div",Rs,[c("div",qs,[Ws,u(t.$slots,"home-hero-image",{},()=>[t.image?(a(),$(ee,{key:0,class:"image-src",image:t.image},null,8,["image"])):f("",!0)],!0)])])):f("",!0)])],2))}});const Js=m(Ys,[["__scopeId","data-v-da5d1713"]]),Xs=b({__name:"VPHomeHero",setup(s){const{frontmatter:e}=P();return(t,n)=>l(e).hero?(a(),$(Js,{key:0,class:"VPHomeHero",name:l(e).hero.name,text:l(e).hero.text,tagline:l(e).hero.tagline,image:l(e).hero.image,actions:l(e).hero.actions},{"home-hero-info":v(()=>[u(t.$slots,"home-hero-info")]),"home-hero-image":v(()=>[u(t.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):f("",!0)}}),Zs={},Qs={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},en=c("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),tn=[en];function sn(s,e){return a(),i("svg",Qs,tn)}const nn=m(Zs,[["render",sn]]),on={class:"box"},an={key:0,class:"icon"},rn=["innerHTML"],ln=["innerHTML"],cn=["innerHTML"],un={key:4,class:"link-text"},dn={class:"link-text-value"},_n=b({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{},target:{}},setup(s){return(e,t)=>(a(),$(E,{class:"VPFeature",href:e.link,rel:e.rel,target:e.target,"no-icon":!0,tag:e.link?"a":"div"},{default:v(()=>[c("article",on,[typeof e.icon=="object"&&e.icon.wrap?(a(),i("div",an,[h(ee,{image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])])):typeof e.icon=="object"?(a(),$(ee,{key:1,image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])):e.icon?(a(),i("div",{key:2,class:"icon",innerHTML:e.icon},null,8,rn)):f("",!0),c("h2",{class:"title",innerHTML:e.title},null,8,ln),e.details?(a(),i("p",{key:3,class:"details",innerHTML:e.details},null,8,cn)):f("",!0),e.linkText?(a(),i("div",un,[c("p",dn,[x(L(e.linkText)+" ",1),h(nn,{class:"link-text-icon"})])])):f("",!0)])]),_:1},8,["href","rel","target","tag"]))}});const vn=m(_n,[["__scopeId","data-v-33204567"]]),pn={key:0,class:"VPFeatures"},hn={class:"container"},fn={class:"items"},mn=b({__name:"VPFeatures",props:{features:{}},setup(s){const e=s,t=k(()=>{const n=e.features.length;if(n){if(n===2)return"grid-2";if(n===3)return"grid-3";if(n%3===0)return"grid-6";if(n>3)return"grid-4"}else return});return(n,o)=>n.features?(a(),i("div",pn,[c("div",hn,[c("div",fn,[(a(!0),i(N,null,A(n.features,r=>(a(),i("div",{key:r.title,class:T(["item",[t.value]])},[h(vn,{icon:r.icon,title:r.title,details:r.details,link:r.link,"link-text":r.linkText,rel:r.rel,target:r.target},null,8,["icon","title","details","link","link-text","rel","target"])],2))),128))])])])):f("",!0)}});const gn=m(mn,[["__scopeId","data-v-a6181336"]]),bn=b({__name:"VPHomeFeatures",setup(s){const{frontmatter:e}=P();return(t,n)=>l(e).features?(a(),$(gn,{key:0,class:"VPHomeFeatures",features:l(e).features},null,8,["features"])):f("",!0)}}),$n={class:"VPHome"},kn=b({__name:"VPHome",setup(s){return(e,t)=>{const n=j("Content");return a(),i("div",$n,[u(e.$slots,"home-hero-before",{},void 0,!0),h(Xs,null,{"home-hero-info":v(()=>[u(e.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":v(()=>[u(e.$slots,"home-hero-image",{},void 0,!0)]),_:3}),u(e.$slots,"home-hero-after",{},void 0,!0),u(e.$slots,"home-features-before",{},void 0,!0),h(bn),u(e.$slots,"home-features-after",{},void 0,!0),h(n)])}}});const yn=m(kn,[["__scopeId","data-v-d82743a8"]]),Pn={},Vn={class:"VPPage"};function wn(s,e){const t=j("Content");return a(),i("div",Vn,[u(s.$slots,"page-top"),h(t),u(s.$slots,"page-bottom")])}const Ln=m(Pn,[["render",wn]]),Sn=b({__name:"VPContent",setup(s){const{page:e,frontmatter:t}=P(),{hasSidebar:n}=D();return(o,r)=>(a(),i("div",{class:T(["VPContent",{"has-sidebar":l(n),"is-home":l(t).layout==="home"}]),id:"VPContent"},[l(e).isNotFound?u(o.$slots,"not-found",{key:0},()=>[h(pt)],!0):l(t).layout==="page"?(a(),$(Ln,{key:1},{"page-top":v(()=>[u(o.$slots,"page-top",{},void 0,!0)]),"page-bottom":v(()=>[u(o.$slots,"page-bottom",{},void 0,!0)]),_:3})):l(t).layout==="home"?(a(),$(yn,{key:2},{"home-hero-before":v(()=>[u(o.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":v(()=>[u(o.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":v(()=>[u(o.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":v(()=>[u(o.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":v(()=>[u(o.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":v(()=>[u(o.$slots,"home-features-after",{},void 0,!0)]),_:3})):l(t).layout&&l(t).layout!=="doc"?(a(),$(F(l(t).layout),{key:3})):(a(),$(Bs,{key:4},{"doc-top":v(()=>[u(o.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":v(()=>[u(o.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":v(()=>[u(o.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":v(()=>[u(o.$slots,"doc-before",{},void 0,!0)]),"doc-after":v(()=>[u(o.$slots,"doc-after",{},void 0,!0)]),"aside-top":v(()=>[u(o.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":v(()=>[u(o.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(o.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(o.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(o.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":v(()=>[u(o.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}});const Mn=m(Sn,[["__scopeId","data-v-669faec9"]]),Nn={class:"container"},In=["innerHTML"],Tn=["innerHTML"],Cn=b({__name:"VPFooter",setup(s){const{theme:e,frontmatter:t}=P(),{hasSidebar:n}=D();return(o,r)=>l(e).footer&&l(t).footer!==!1?(a(),i("footer",{key:0,class:T(["VPFooter",{"has-sidebar":l(n)}])},[c("div",Nn,[l(e).footer.message?(a(),i("p",{key:0,class:"message",innerHTML:l(e).footer.message},null,8,In)):f("",!0),l(e).footer.copyright?(a(),i("p",{key:1,class:"copyright",innerHTML:l(e).footer.copyright},null,8,Tn)):f("",!0)])],2)):f("",!0)}});const Bn=m(Cn,[["__scopeId","data-v-e03eb2e1"]]),An={class:"header"},xn={class:"outline"},Hn=b({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(s){const e=s,{theme:t}=P(),n=M(!1),o=M(0),r=M();Y(()=>{n.value=!1});function d(){n.value=!n.value,o.value=window.innerHeight+Math.min(window.scrollY-e.navHeight,0)}function p(g){g.target.classList.contains("outline-link")&&(r.value&&(r.value.style.transition="none"),Oe(()=>{n.value=!1}))}function _(){n.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return(g,V)=>(a(),i("div",{class:"VPLocalNavOutlineDropdown",style:Fe({"--vp-vh":o.value+"px"})},[g.headers.length>0?(a(),i("button",{key:0,onClick:d,class:T({open:n.value})},[x(L(l(ve)(l(t)))+" ",1),h(fe,{class:"icon"})],2)):(a(),i("button",{key:1,onClick:_},L(l(t).returnToTopLabel||"Return to top"),1)),h(ce,{name:"flyout"},{default:v(()=>[n.value?(a(),i("div",{key:0,ref_key:"items",ref:r,class:"items",onClick:p},[c("div",An,[c("a",{class:"top-link",href:"#",onClick:_},L(l(t).returnToTopLabel||"Return to top"),1)]),c("div",xn,[h(he,{headers:g.headers},null,8,["headers"])])],512)):f("",!0)]),_:1})],4))}});const zn=m(Hn,[["__scopeId","data-v-1c15a60a"]]),Dn={},En={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Fn=c("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),On=c("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),Gn=c("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),Un=c("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),jn=[Fn,On,Gn,Un];function Kn(s,e){return a(),i("svg",En,jn)}const Rn=m(Dn,[["render",Kn]]),qn=["aria-expanded"],Wn={class:"menu-text"},Yn=b({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(s){const{theme:e,frontmatter:t}=P(),{hasSidebar:n}=D(),{y:o}=Le(),r=_e([]),d=M(0);G(()=>{d.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),Y(()=>{r.value=pe(t.value.outline??e.value.outline)});const p=k(()=>r.value.length===0&&!n.value),_=k(()=>({VPLocalNav:!0,fixed:p.value,"reached-top":o.value>=d.value}));return(g,V)=>l(t).layout!=="home"&&(!p.value||l(o)>=d.value)?(a(),i("div",{key:0,class:T(_.value)},[l(n)?(a(),i("button",{key:0,class:"menu","aria-expanded":g.open,"aria-controls":"VPSidebarNav",onClick:V[0]||(V[0]=y=>g.$emit("open-menu"))},[h(Rn,{class:"menu-icon"}),c("span",Wn,L(l(e).sidebarMenuLabel||"Menu"),1)],8,qn)):f("",!0),h(zn,{headers:r.value,navHeight:d.value},null,8,["headers","navHeight"])],2)):f("",!0)}});const Jn=m(Yn,[["__scopeId","data-v-79c8c1df"]]);function Xn(){const s=M(!1);function e(){s.value=!0,window.addEventListener("resize",o)}function t(){s.value=!1,window.removeEventListener("resize",o)}function n(){s.value?t():e()}function o(){window.outerWidth>=768&&t()}const r=se();return U(()=>r.path,t),{isScreenOpen:s,openScreen:e,closeScreen:t,toggleScreen:n}}const Zn={},Qn={class:"VPSwitch",type:"button",role:"switch"},eo={class:"check"},to={key:0,class:"icon"};function so(s,e){return a(),i("button",Qn,[c("span",eo,[s.$slots.default?(a(),i("span",to,[u(s.$slots,"default",{},void 0,!0)])):f("",!0)])])}const no=m(Zn,[["render",so],["__scopeId","data-v-b1685198"]]),oo={},ao={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ro=c("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),lo=[ro];function io(s,e){return a(),i("svg",ao,lo)}const co=m(oo,[["render",io]]),uo={},_o={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},vo=Ge('<path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path>',9),po=[vo];function ho(s,e){return a(),i("svg",_o,po)}const fo=m(uo,[["render",ho]]),mo=b({__name:"VPSwitchAppearance",setup(s){const{isDark:e}=P(),t=ne("toggle-appearance",()=>{e.value=!e.value});return(n,o)=>(a(),$(no,{title:"toggle dark mode",class:"VPSwitchAppearance","aria-checked":l(e),onClick:l(t)},{default:v(()=>[h(fo,{class:"sun"}),h(co,{class:"moon"})]),_:1},8,["aria-checked","onClick"]))}});const me=m(mo,[["__scopeId","data-v-ce54a7d1"]]),go={key:0,class:"VPNavBarAppearance"},bo=b({__name:"VPNavBarAppearance",setup(s){const{site:e}=P();return(t,n)=>l(e).appearance&&l(e).appearance!=="force-dark"?(a(),i("div",go,[h(me)])):f("",!0)}});const $o=m(bo,[["__scopeId","data-v-e6aabb21"]]),ge=M();let Te=!1,ae=0;function ko(s){const e=M(!1);if(q){!Te&&yo(),ae++;const t=U(ge,n=>{var o,r,d;n===s.el.value||(o=s.el.value)!=null&&o.contains(n)?(e.value=!0,(r=s.onFocus)==null||r.call(s)):(e.value=!1,(d=s.onBlur)==null||d.call(s))});de(()=>{t(),ae--,ae||Po()})}return Ue(e)}function yo(){document.addEventListener("focusin",Ce),Te=!0,ge.value=document.activeElement}function Po(){document.removeEventListener("focusin",Ce)}function Ce(){ge.value=document.activeElement}const Vo={},wo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Lo=c("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),So=[Lo];function Mo(s,e){return a(),i("svg",wo,So)}const Be=m(Vo,[["render",Mo]]),No={},Io={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},To=c("circle",{cx:"12",cy:"12",r:"2"},null,-1),Co=c("circle",{cx:"19",cy:"12",r:"2"},null,-1),Bo=c("circle",{cx:"5",cy:"12",r:"2"},null,-1),Ao=[To,Co,Bo];function xo(s,e){return a(),i("svg",Io,Ao)}const Ho=m(No,[["render",xo]]),zo={class:"VPMenuLink"},Do=b({__name:"VPMenuLink",props:{item:{}},setup(s){const{page:e}=P();return(t,n)=>(a(),i("div",zo,[h(E,{class:T({active:l(O)(l(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel},{default:v(()=>[x(L(t.item.text),1)]),_:1},8,["class","href","target","rel"])]))}});const oe=m(Do,[["__scopeId","data-v-43f1e123"]]),Eo={class:"VPMenuGroup"},Fo={key:0,class:"title"},Oo=b({__name:"VPMenuGroup",props:{text:{},items:{}},setup(s){return(e,t)=>(a(),i("div",Eo,[e.text?(a(),i("p",Fo,L(e.text),1)):f("",!0),(a(!0),i(N,null,A(e.items,n=>(a(),i(N,null,["link"in n?(a(),$(oe,{key:0,item:n},null,8,["item"])):f("",!0)],64))),256))]))}});const Go=m(Oo,[["__scopeId","data-v-69e747b5"]]),Uo={class:"VPMenu"},jo={key:0,class:"items"},Ko=b({__name:"VPMenu",props:{items:{}},setup(s){return(e,t)=>(a(),i("div",Uo,[e.items?(a(),i("div",jo,[(a(!0),i(N,null,A(e.items,n=>(a(),i(N,{key:n.text},["link"in n?(a(),$(oe,{key:0,item:n},null,8,["item"])):(a(),$(Go,{key:1,text:n.text,items:n.items},null,8,["text","items"]))],64))),128))])):f("",!0),u(e.$slots,"default",{},void 0,!0)]))}});const Ro=m(Ko,[["__scopeId","data-v-e7ea1737"]]),qo=["aria-expanded","aria-label"],Wo={key:0,class:"text"},Yo=["innerHTML"],Jo={class:"menu"},Xo=b({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(s){const e=M(!1),t=M();ko({el:t,onBlur:n});function n(){e.value=!1}return(o,r)=>(a(),i("div",{class:"VPFlyout",ref_key:"el",ref:t,onMouseenter:r[1]||(r[1]=d=>e.value=!0),onMouseleave:r[2]||(r[2]=d=>e.value=!1)},[c("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":e.value,"aria-label":o.label,onClick:r[0]||(r[0]=d=>e.value=!e.value)},[o.button||o.icon?(a(),i("span",Wo,[o.icon?(a(),$(F(o.icon),{key:0,class:"option-icon"})):f("",!0),o.button?(a(),i("span",{key:1,innerHTML:o.button},null,8,Yo)):f("",!0),h(Be,{class:"text-icon"})])):(a(),$(Ho,{key:1,class:"icon"}))],8,qo),c("div",Jo,[h(Ro,{items:o.items},{default:v(()=>[u(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}});const be=m(Xo,[["__scopeId","data-v-9c007e85"]]),Zo={discord:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>',facebook:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>',github:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>',instagram:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>',linkedin:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>',mastodon:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>',slack:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>',twitter:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>',x:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>',youtube:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>'},Qo=["href","aria-label","innerHTML"],ea=b({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(s){const e=s,t=k(()=>typeof e.icon=="object"?e.icon.svg:Zo[e.icon]);return(n,o)=>(a(),i("a",{class:"VPSocialLink no-icon",href:n.link,"aria-label":n.ariaLabel??(typeof n.icon=="string"?n.icon:""),target:"_blank",rel:"noopener",innerHTML:t.value},null,8,Qo))}});const ta=m(ea,[["__scopeId","data-v-f80f8133"]]),sa={class:"VPSocialLinks"},na=b({__name:"VPSocialLinks",props:{links:{}},setup(s){return(e,t)=>(a(),i("div",sa,[(a(!0),i(N,null,A(e.links,({link:n,icon:o,ariaLabel:r})=>(a(),$(ta,{key:n,icon:o,link:n,ariaLabel:r},null,8,["icon","link","ariaLabel"]))),128))]))}});const $e=m(na,[["__scopeId","data-v-7bc22406"]]),oa={key:0,class:"group translations"},aa={class:"trans-title"},ra={key:1,class:"group"},la={class:"item appearance"},ia={class:"label"},ca={class:"appearance-action"},ua={key:2,class:"group"},da={class:"item social-links"},_a=b({__name:"VPNavBarExtra",setup(s){const{site:e,theme:t}=P(),{localeLinks:n,currentLang:o}=X({correspondingLink:!0}),r=k(()=>n.value.length&&o.value.label||e.value.appearance||t.value.socialLinks);return(d,p)=>r.value?(a(),$(be,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:v(()=>[l(n).length&&l(o).label?(a(),i("div",oa,[c("p",aa,L(l(o).label),1),(a(!0),i(N,null,A(l(n),_=>(a(),$(oe,{key:_.link,item:_},null,8,["item"]))),128))])):f("",!0),l(e).appearance?(a(),i("div",ra,[c("div",la,[c("p",ia,L(l(t).darkModeSwitchLabel||"Appearance"),1),c("div",ca,[h(me)])])])):f("",!0),l(t).socialLinks?(a(),i("div",ua,[c("div",da,[h($e,{class:"social-links-list",links:l(t).socialLinks},null,8,["links"])])])):f("",!0)]),_:1})):f("",!0)}});const va=m(_a,[["__scopeId","data-v-40855f84"]]),pa=s=>(H("data-v-e5dd9c1c"),s=s(),z(),s),ha=["aria-expanded"],fa=pa(()=>c("span",{class:"container"},[c("span",{class:"top"}),c("span",{class:"middle"}),c("span",{class:"bottom"})],-1)),ma=[fa],ga=b({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(s){return(e,t)=>(a(),i("button",{type:"button",class:T(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:t[0]||(t[0]=n=>e.$emit("click"))},ma,10,ha))}});const ba=m(ga,[["__scopeId","data-v-e5dd9c1c"]]),$a=["innerHTML"],ka=b({__name:"VPNavBarMenuLink",props:{item:{}},setup(s){const{page:e}=P();return(t,n)=>(a(),$(E,{class:T({VPNavBarMenuLink:!0,active:l(O)(l(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel,tabindex:"0"},{default:v(()=>[c("span",{innerHTML:t.item.text},null,8,$a)]),_:1},8,["class","href","target","rel"]))}});const ya=m(ka,[["__scopeId","data-v-42ef59de"]]),Pa=b({__name:"VPNavBarMenuGroup",props:{item:{}},setup(s){const e=s,{page:t}=P(),n=r=>"link"in r?O(t.value.relativePath,r.link,!!e.item.activeMatch):r.items.some(n),o=k(()=>n(e.item));return(r,d)=>(a(),$(be,{class:T({VPNavBarMenuGroup:!0,active:l(O)(l(t).relativePath,r.item.activeMatch,!!r.item.activeMatch)||o.value}),button:r.item.text,items:r.item.items},null,8,["class","button","items"]))}}),Va=s=>(H("data-v-7f418b0f"),s=s(),z(),s),wa={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},La=Va(()=>c("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),Sa=b({__name:"VPNavBarMenu",setup(s){const{theme:e}=P();return(t,n)=>l(e).nav?(a(),i("nav",wa,[La,(a(!0),i(N,null,A(l(e).nav,o=>(a(),i(N,{key:o.text},["link"in o?(a(),$(ya,{key:0,item:o},null,8,["item"])):(a(),$(Pa,{key:1,item:o},null,8,["item"]))],64))),128))])):f("",!0)}});const Ma=m(Sa,[["__scopeId","data-v-7f418b0f"]]);function Na(s,e){const{localeIndex:t}=P();function n(o){var S,C;const r=o.split("."),d=s&&typeof s=="object",p=d&&((C=(S=s.locales)==null?void 0:S[t.value])==null?void 0:C.translations)||null,_=d&&s.translations||null;let g=p,V=_,y=e;const I=r.pop();for(const B of r){let w=null;const K=y==null?void 0:y[B];K&&(w=y=K);const W=V==null?void 0:V[B];W&&(w=V=W);const R=g==null?void 0:g[B];R&&(w=g=R),K||(y=w),W||(V=w),R||(g=w)}return(g==null?void 0:g[I])??(V==null?void 0:V[I])??(y==null?void 0:y[I])??""}return n}const Ia=["aria-label"],Ta={class:"DocSearch-Button-Container"},Ca=c("svg",{class:"DocSearch-Search-Icon",width:"20",height:"20",viewBox:"0 0 20 20","aria-label":"search icon"},[c("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none","fill-rule":"evenodd","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Ba={class:"DocSearch-Button-Placeholder"},Aa=c("span",{class:"DocSearch-Button-Keys"},[c("kbd",{class:"DocSearch-Button-Key"}),c("kbd",{class:"DocSearch-Button-Key"},"K")],-1),Pe=b({__name:"VPNavBarSearchButton",setup(s){const{theme:e}=P(),t={button:{buttonText:"Search",buttonAriaLabel:"Search"}},n=je(Na)(Ke(()=>{var o;return(o=e.value.search)==null?void 0:o.options}),t);return(o,r)=>(a(),i("button",{type:"button",class:"DocSearch DocSearch-Button","aria-label":l(n)("button.buttonAriaLabel")},[c("span",Ta,[Ca,c("span",Ba,L(l(n)("button.buttonText")),1)]),Aa],8,Ia))}});const xa={class:"VPNavBarSearch"},Ha={id:"local-search"},za={key:1,id:"docsearch"},Da=b({__name:"VPNavBarSearch",setup(s){const e=Re(()=>qe(()=>import("./VPLocalSearchBox.0bede1e4.js"),["assets/chunks/VPLocalSearchBox.0bede1e4.js","assets/chunks/framework.c53372a0.js"])),t=()=>null,{theme:n}=P(),o=M(!1),r=M(!1);G(()=>{});function d(){o.value||(o.value=!0,setTimeout(p,16))}function p(){const y=new Event("keydown");y.key="k",y.metaKey=!0,window.dispatchEvent(y),setTimeout(()=>{document.querySelector(".DocSearch-Modal")||p()},16)}function _(y){const I=y.target,S=I.tagName;return I.isContentEditable||S==="INPUT"||S==="SELECT"||S==="TEXTAREA"}const g=M(!1);ke("k",y=>{(y.ctrlKey||y.metaKey)&&(y.preventDefault(),g.value=!0)}),ke("/",y=>{_(y)||(y.preventDefault(),g.value=!0)});const V="local";return(y,I)=>{var S;return a(),i("div",xa,[l(V)==="local"?(a(),i(N,{key:0},[g.value?(a(),$(l(e),{key:0,onClose:I[0]||(I[0]=C=>g.value=!1)})):f("",!0),c("div",Ha,[h(Pe,{onClick:I[1]||(I[1]=C=>g.value=!0)})])],64)):l(V)==="algolia"?(a(),i(N,{key:1},[o.value?(a(),$(l(t),{key:0,algolia:((S=l(n).search)==null?void 0:S.options)??l(n).algolia,onVnodeBeforeMount:I[2]||(I[2]=C=>r.value=!0)},null,8,["algolia"])):f("",!0),r.value?f("",!0):(a(),i("div",za,[h(Pe,{onClick:d})]))],64)):f("",!0)])}}});const Ea=b({__name:"VPNavBarSocialLinks",setup(s){const{theme:e}=P();return(t,n)=>l(e).socialLinks?(a(),$($e,{key:0,class:"VPNavBarSocialLinks",links:l(e).socialLinks},null,8,["links"])):f("",!0)}});const Fa=m(Ea,[["__scopeId","data-v-0394ad82"]]),Oa=["href"],Ga=b({__name:"VPNavBarTitle",setup(s){const{site:e,theme:t}=P(),{hasSidebar:n}=D(),{currentLang:o}=X();return(r,d)=>(a(),i("div",{class:T(["VPNavBarTitle",{"has-sidebar":l(n)}])},[c("a",{class:"title",href:l(t).logoLink??l(J)(l(o).link)},[u(r.$slots,"nav-bar-title-before",{},void 0,!0),l(t).logo?(a(),$(ee,{key:0,class:"logo",image:l(t).logo},null,8,["image"])):f("",!0),l(t).siteTitle?(a(),i(N,{key:1},[x(L(l(t).siteTitle),1)],64)):l(t).siteTitle===void 0?(a(),i(N,{key:2},[x(L(l(e).title),1)],64)):f("",!0),u(r.$slots,"nav-bar-title-after",{},void 0,!0)],8,Oa)],2))}});const Ua=m(Ga,[["__scopeId","data-v-86d1bed8"]]),ja={},Ka={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Ra=c("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),qa=c("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),Wa=[Ra,qa];function Ya(s,e){return a(),i("svg",Ka,Wa)}const Ae=m(ja,[["render",Ya]]),Ja={class:"items"},Xa={class:"title"},Za=b({__name:"VPNavBarTranslations",setup(s){const{theme:e}=P(),{localeLinks:t,currentLang:n}=X({correspondingLink:!0});return(o,r)=>l(t).length&&l(n).label?(a(),$(be,{key:0,class:"VPNavBarTranslations",icon:Ae,label:l(e).langMenuLabel||"Change language"},{default:v(()=>[c("div",Ja,[c("p",Xa,L(l(n).label),1),(a(!0),i(N,null,A(l(t),d=>(a(),$(oe,{key:d.link,item:d},null,8,["item"]))),128))])]),_:1},8,["label"])):f("",!0)}});const Qa=m(Za,[["__scopeId","data-v-74abcbb9"]]),er=s=>(H("data-v-a0fd61f4"),s=s(),z(),s),tr={class:"container"},sr={class:"title"},nr={class:"content"},or=er(()=>c("div",{class:"curtain"},null,-1)),ar={class:"content-body"},rr=b({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(s){const{y:e}=Le(),{hasSidebar:t}=D(),{frontmatter:n}=P(),o=M({});return Ve(()=>{o.value={"has-sidebar":t.value,top:n.value.layout==="home"&&e.value===0}}),(r,d)=>(a(),i("div",{class:T(["VPNavBar",o.value])},[c("div",tr,[c("div",sr,[h(Ua,null,{"nav-bar-title-before":v(()=>[u(r.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(r.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),c("div",nr,[or,c("div",ar,[u(r.$slots,"nav-bar-content-before",{},void 0,!0),h(Da,{class:"search"}),h(Ma,{class:"menu"}),h(Qa,{class:"translations"}),h($o,{class:"appearance"}),h(Fa,{class:"social-links"}),h(va,{class:"extra"}),u(r.$slots,"nav-bar-content-after",{},void 0,!0),h(ba,{class:"hamburger",active:r.isScreenOpen,onClick:d[0]||(d[0]=p=>r.$emit("toggle-screen"))},null,8,["active"])])])])],2))}});const lr=m(rr,[["__scopeId","data-v-a0fd61f4"]]),ir={key:0,class:"VPNavScreenAppearance"},cr={class:"text"},ur=b({__name:"VPNavScreenAppearance",setup(s){const{site:e,theme:t}=P();return(n,o)=>l(e).appearance?(a(),i("div",ir,[c("p",cr,L(l(t).darkModeSwitchLabel||"Appearance"),1),h(me)])):f("",!0)}});const dr=m(ur,[["__scopeId","data-v-add8f686"]]),_r=b({__name:"VPNavScreenMenuLink",props:{item:{}},setup(s){const e=ne("close-screen");return(t,n)=>(a(),$(E,{class:"VPNavScreenMenuLink",href:t.item.link,target:t.item.target,rel:t.item.rel,onClick:l(e)},{default:v(()=>[x(L(t.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}});const vr=m(_r,[["__scopeId","data-v-05f27b2a"]]),pr={},hr={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},fr=c("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),mr=[fr];function gr(s,e){return a(),i("svg",hr,mr)}const br=m(pr,[["render",gr]]),$r=b({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(s){const e=ne("close-screen");return(t,n)=>(a(),$(E,{class:"VPNavScreenMenuGroupLink",href:t.item.link,target:t.item.target,rel:t.item.rel,onClick:l(e)},{default:v(()=>[x(L(t.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}});const xe=m($r,[["__scopeId","data-v-19976ae1"]]),kr={class:"VPNavScreenMenuGroupSection"},yr={key:0,class:"title"},Pr=b({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(s){return(e,t)=>(a(),i("div",kr,[e.text?(a(),i("p",yr,L(e.text),1)):f("",!0),(a(!0),i(N,null,A(e.items,n=>(a(),$(xe,{key:n.text,item:n},null,8,["item"]))),128))]))}});const Vr=m(Pr,[["__scopeId","data-v-8133b170"]]),wr=["aria-controls","aria-expanded"],Lr={class:"button-text"},Sr=["id"],Mr={key:1,class:"group"},Nr=b({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(s){const e=s,t=M(!1),n=k(()=>`NavScreenGroup-${e.text.replace(" ","-").toLowerCase()}`);function o(){t.value=!t.value}return(r,d)=>(a(),i("div",{class:T(["VPNavScreenMenuGroup",{open:t.value}])},[c("button",{class:"button","aria-controls":n.value,"aria-expanded":t.value,onClick:o},[c("span",Lr,L(r.text),1),h(br,{class:"button-icon"})],8,wr),c("div",{id:n.value,class:"items"},[(a(!0),i(N,null,A(r.items,p=>(a(),i(N,{key:p.text},["link"in p?(a(),i("div",{key:p.text,class:"item"},[h(xe,{item:p},null,8,["item"])])):(a(),i("div",Mr,[h(Vr,{text:p.text,items:p.items},null,8,["text","items"])]))],64))),128))],8,Sr)],2))}});const Ir=m(Nr,[["__scopeId","data-v-1ecb84e7"]]),Tr={key:0,class:"VPNavScreenMenu"},Cr=b({__name:"VPNavScreenMenu",setup(s){const{theme:e}=P();return(t,n)=>l(e).nav?(a(),i("nav",Tr,[(a(!0),i(N,null,A(l(e).nav,o=>(a(),i(N,{key:o.text},["link"in o?(a(),$(vr,{key:0,item:o},null,8,["item"])):(a(),$(Ir,{key:1,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):f("",!0)}}),Br=b({__name:"VPNavScreenSocialLinks",setup(s){const{theme:e}=P();return(t,n)=>l(e).socialLinks?(a(),$($e,{key:0,class:"VPNavScreenSocialLinks",links:l(e).socialLinks},null,8,["links"])):f("",!0)}}),Ar={class:"list"},xr=b({__name:"VPNavScreenTranslations",setup(s){const{localeLinks:e,currentLang:t}=X({correspondingLink:!0}),n=M(!1);function o(){n.value=!n.value}return(r,d)=>l(e).length&&l(t).label?(a(),i("div",{key:0,class:T(["VPNavScreenTranslations",{open:n.value}])},[c("button",{class:"title",onClick:o},[h(Ae,{class:"icon lang"}),x(" "+L(l(t).label)+" ",1),h(Be,{class:"icon chevron"})]),c("ul",Ar,[(a(!0),i(N,null,A(l(e),p=>(a(),i("li",{key:p.link,class:"item"},[h(E,{class:"link",href:p.link},{default:v(()=>[x(L(p.text),1)]),_:2},1032,["href"])]))),128))])],2)):f("",!0)}});const Hr=m(xr,[["__scopeId","data-v-d72aa483"]]),zr={class:"container"},Dr=b({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(s){const e=M(null),t=Se(q?document.body:null);return(n,o)=>(a(),$(ce,{name:"fade",onEnter:o[0]||(o[0]=r=>t.value=!0),onAfterLeave:o[1]||(o[1]=r=>t.value=!1)},{default:v(()=>[n.open?(a(),i("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:e,id:"VPNavScreen"},[c("div",zr,[u(n.$slots,"nav-screen-content-before",{},void 0,!0),h(Cr,{class:"menu"}),h(Hr,{class:"translations"}),h(dr,{class:"appearance"}),h(Br,{class:"social-links"}),u(n.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):f("",!0)]),_:3}))}});const Er=m(Dr,[["__scopeId","data-v-cc5739dd"]]),Fr={key:0,class:"VPNav"},Or=b({__name:"VPNav",setup(s){const{isScreenOpen:e,closeScreen:t,toggleScreen:n}=Xn(),{frontmatter:o}=P(),r=k(()=>o.value.navbar!==!1);return Me("close-screen",t),te(()=>{q&&document.documentElement.classList.toggle("hide-nav",!r.value)}),(d,p)=>r.value?(a(),i("header",Fr,[h(lr,{"is-screen-open":l(e),onToggleScreen:l(n)},{"nav-bar-title-before":v(()=>[u(d.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(d.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":v(()=>[u(d.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":v(()=>[u(d.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),h(Er,{open:l(e)},{"nav-screen-content-before":v(()=>[u(d.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":v(()=>[u(d.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])])):f("",!0)}});const Gr=m(Or,[["__scopeId","data-v-ae24b3ad"]]),Ur=s=>(H("data-v-e31bd47b"),s=s(),z(),s),jr=["role","tabindex"],Kr=Ur(()=>c("div",{class:"indicator"},null,-1)),Rr=["onKeydown"],qr={key:1,class:"items"},Wr=b({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(s){const e=s,{collapsed:t,collapsible:n,isLink:o,isActiveLink:r,hasActiveLink:d,hasChildren:p,toggle:_}=gt(k(()=>e.item)),g=k(()=>p.value?"section":"div"),V=k(()=>o.value?"a":"div"),y=k(()=>p.value?e.depth+2===7?"p":`h${e.depth+2}`:"p"),I=k(()=>o.value?void 0:"button"),S=k(()=>[[`level-${e.depth}`],{collapsible:n.value},{collapsed:t.value},{"is-link":o.value},{"is-active":r.value},{"has-active":d.value}]);function C(w){"key"in w&&w.key!=="Enter"||!e.item.link&&_()}function B(){e.item.link&&_()}return(w,K)=>{const W=j("VPSidebarItem",!0);return a(),$(F(g.value),{class:T(["VPSidebarItem",S.value])},{default:v(()=>[w.item.text?(a(),i("div",Z({key:0,class:"item",role:I.value},We(w.item.items?{click:C,keydown:C}:{},!0),{tabindex:w.item.items&&0}),[Kr,w.item.link?(a(),$(E,{key:0,tag:V.value,class:"link",href:w.item.link,rel:w.item.rel,target:w.item.target},{default:v(()=>[(a(),$(F(y.value),{class:"text",innerHTML:w.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href","rel","target"])):(a(),$(F(y.value),{key:1,class:"text",innerHTML:w.item.text},null,8,["innerHTML"])),w.item.collapsed!=null?(a(),i("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:B,onKeydown:Ye(B,["enter"]),tabindex:"0"},[h(fe,{class:"caret-icon"})],40,Rr)):f("",!0)],16,jr)):f("",!0),w.item.items&&w.item.items.length?(a(),i("div",qr,[w.depth<5?(a(!0),i(N,{key:0},A(w.item.items,R=>(a(),$(W,{key:R.text,item:R,depth:w.depth+1},null,8,["item","depth"]))),128)):f("",!0)])):f("",!0)]),_:1},8,["class"])}}});const Yr=m(Wr,[["__scopeId","data-v-e31bd47b"]]),He=s=>(H("data-v-b00e2fdd"),s=s(),z(),s),Jr=He(()=>c("div",{class:"curtain"},null,-1)),Xr={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},Zr=He(()=>c("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),Qr=b({__name:"VPSidebar",props:{open:{type:Boolean}},setup(s){const{sidebarGroups:e,hasSidebar:t}=D(),n=s,o=M(null),r=Se(q?document.body:null);return U([n,o],()=>{var d;n.open?(r.value=!0,(d=o.value)==null||d.focus()):r.value=!1},{immediate:!0,flush:"post"}),(d,p)=>l(t)?(a(),i("aside",{key:0,class:T(["VPSidebar",{open:d.open}]),ref_key:"navEl",ref:o,onClick:p[0]||(p[0]=Je(()=>{},["stop"]))},[Jr,c("nav",Xr,[Zr,u(d.$slots,"sidebar-nav-before",{},void 0,!0),(a(!0),i(N,null,A(l(e),_=>(a(),i("div",{key:_.text,class:"group"},[h(Yr,{item:_,depth:0},null,8,["item"])]))),128)),u(d.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):f("",!0)}});const el=m(Qr,[["__scopeId","data-v-b00e2fdd"]]),tl=b({__name:"VPSkipLink",setup(s){const e=se(),t=M();U(()=>e.path,()=>t.value.focus());function n({target:o}){const r=document.getElementById(decodeURIComponent(o.hash).slice(1));if(r){const d=()=>{r.removeAttribute("tabindex"),r.removeEventListener("blur",d)};r.setAttribute("tabindex","-1"),r.addEventListener("blur",d),r.focus(),window.scrollTo(0,0)}}return(o,r)=>(a(),i(N,null,[c("span",{ref_key:"backToTop",ref:t,tabindex:"-1"},null,512),c("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:n}," Skip to content ")],64))}});const sl=m(tl,[["__scopeId","data-v-0f60ec36"]]),nl=b({__name:"Layout",setup(s){const{isOpen:e,open:t,close:n}=D(),o=se();U(()=>o.path,n),mt(e,n);const{frontmatter:r}=P(),d=Xe(),p=k(()=>!!d["home-hero-image"]);return Me("hero-image-slot-exists",p),(_,g)=>{const V=j("Content");return l(r).layout!==!1?(a(),i("div",{key:0,class:T(["Layout",l(r).pageClass])},[u(_.$slots,"layout-top",{},void 0,!0),h(sl),h(st,{class:"backdrop",show:l(e),onClick:l(n)},null,8,["show","onClick"]),h(Gr,null,{"nav-bar-title-before":v(()=>[u(_.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(_.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":v(()=>[u(_.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":v(()=>[u(_.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":v(()=>[u(_.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":v(()=>[u(_.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),h(Jn,{open:l(e),onOpenMenu:l(t)},null,8,["open","onOpenMenu"]),h(el,{open:l(e)},{"sidebar-nav-before":v(()=>[u(_.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":v(()=>[u(_.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),h(Mn,null,{"page-top":v(()=>[u(_.$slots,"page-top",{},void 0,!0)]),"page-bottom":v(()=>[u(_.$slots,"page-bottom",{},void 0,!0)]),"not-found":v(()=>[u(_.$slots,"not-found",{},void 0,!0)]),"home-hero-before":v(()=>[u(_.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":v(()=>[u(_.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":v(()=>[u(_.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":v(()=>[u(_.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":v(()=>[u(_.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":v(()=>[u(_.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":v(()=>[u(_.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":v(()=>[u(_.$slots,"doc-before",{},void 0,!0)]),"doc-after":v(()=>[u(_.$slots,"doc-after",{},void 0,!0)]),"doc-top":v(()=>[u(_.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":v(()=>[u(_.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":v(()=>[u(_.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":v(()=>[u(_.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":v(()=>[u(_.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(_.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(_.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(_.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),h(Bn),u(_.$slots,"layout-bottom",{},void 0,!0)],2)):(a(),$(V,{key:1}))}}});const ol=m(nl,[["__scopeId","data-v-5a346dfe"]]);const rl={Layout:ol,enhanceApp:({app:s})=>{s.component("Badge",Qe)}};export{Na as c,rl as t,P as u};
diff --git a/assets/index.md.4cc1630f.js b/assets/index.md.4cc1630f.js
new file mode 100644
index 00000000..073b8da6
--- /dev/null
+++ b/assets/index.md.4cc1630f.js
@@ -0,0 +1 @@
+import{_ as t,o as e,c as i}from"./chunks/framework.c53372a0.js";const h=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"ZerDocs","text":"VitePress Front-End Learning Collection","image":{"src":"https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302041807975.svg","alt":"ZerDocs"},"actions":[{"theme":"brand","text":"开始阅读","link":"/FrontEnd/Git/Terminal终端美化"},{"theme":"alt","text":"关于我","link":"https://github.com/fxzer"}]},"features":[{"icon":"🎨","title":"FrontEnd","details":"前端三件套相关基础积累。","link":"/FrontEnd/Git/Terminal终端美化"},{"icon":"🚚","title":"Framework","details":"总结前段框架学习笔记。","link":"/Framework/Vue/列表最后一条数据删除处理"},{"icon":"📝","title":"Problem","details":"积累编程中遇到的坑。","link":"/Problem/"},{"icon":"🧑‍💻","title":"Interview","details":"归纳前端经典面试题。","link":"/Interview/"},{"icon":"🔐","title":"TypeScript","details":"TypeScript 中英文档","link":"https://fxzer.github.io/tsdoc-vitepress/zh/"},{"icon":"🔐","title":"TypeScript","details":"TypeScript 教程","link":"https://fxzer.github.io/typescript-tutorial-vitepress/"},{"icon":"💫","title":"Canvas","details":"有趣的 Canvas 练习","link":"https://fxzer.github.io/funny-canvas/#/a"},{"icon":"🤡","title":"Tailwind CSS","details":"Tailwind CSS 案例练习","link":"https://fxzer.github.io/tailwindcss-showcase/#/"}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function a(s,r,o,l,c,d){return e(),i("div")}const m=t(n,[["render",a]]);export{h as __pageData,m as default};
diff --git a/assets/index.md.4cc1630f.lean.js b/assets/index.md.4cc1630f.lean.js
new file mode 100644
index 00000000..073b8da6
--- /dev/null
+++ b/assets/index.md.4cc1630f.lean.js
@@ -0,0 +1 @@
+import{_ as t,o as e,c as i}from"./chunks/framework.c53372a0.js";const h=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"ZerDocs","text":"VitePress Front-End Learning Collection","image":{"src":"https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302041807975.svg","alt":"ZerDocs"},"actions":[{"theme":"brand","text":"开始阅读","link":"/FrontEnd/Git/Terminal终端美化"},{"theme":"alt","text":"关于我","link":"https://github.com/fxzer"}]},"features":[{"icon":"🎨","title":"FrontEnd","details":"前端三件套相关基础积累。","link":"/FrontEnd/Git/Terminal终端美化"},{"icon":"🚚","title":"Framework","details":"总结前段框架学习笔记。","link":"/Framework/Vue/列表最后一条数据删除处理"},{"icon":"📝","title":"Problem","details":"积累编程中遇到的坑。","link":"/Problem/"},{"icon":"🧑‍💻","title":"Interview","details":"归纳前端经典面试题。","link":"/Interview/"},{"icon":"🔐","title":"TypeScript","details":"TypeScript 中英文档","link":"https://fxzer.github.io/tsdoc-vitepress/zh/"},{"icon":"🔐","title":"TypeScript","details":"TypeScript 教程","link":"https://fxzer.github.io/typescript-tutorial-vitepress/"},{"icon":"💫","title":"Canvas","details":"有趣的 Canvas 练习","link":"https://fxzer.github.io/funny-canvas/#/a"},{"icon":"🤡","title":"Tailwind CSS","details":"Tailwind CSS 案例练习","link":"https://fxzer.github.io/tailwindcss-showcase/#/"}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function a(s,r,o,l,c,d){return e(),i("div")}const m=t(n,[["render",a]]);export{h as __pageData,m as default};
diff --git a/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 b/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..2a687296748f6b8bc8076cd11bde49cd27e4442b
GIT binary patch
literal 28332
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
HNCp4^t1hY;

literal 0
HcmV?d00001

diff --git a/assets/inter-italic-cyrillic.ea42a392.woff2 b/assets/inter-italic-cyrillic.ea42a392.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..f64035158d7e4c01654e3f23dcd6e8299928a28c
GIT binary patch
literal 17824
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
DQ<h`1

literal 0
HcmV?d00001

diff --git a/assets/inter-italic-greek-ext.4fbe9427.woff2 b/assets/inter-italic-greek-ext.4fbe9427.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..00218960325a4636092b66a46e701c2bf4bb0466
GIT binary patch
literal 12188
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

literal 0
HcmV?d00001

diff --git a/assets/inter-italic-greek.8f4463c4.woff2 b/assets/inter-italic-greek.8f4463c4.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..71c265f85c9b45b6a3f2df9a0c6aa39547501b98
GIT binary patch
literal 23264
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

literal 0
HcmV?d00001

diff --git a/assets/inter-italic-latin-ext.bd8920cc.woff2 b/assets/inter-italic-latin-ext.bd8920cc.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..9c1b9440ed419d4a71ba46b0db3951164f9e10df
GIT binary patch
literal 63552
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

literal 0
HcmV?d00001

diff --git a/assets/inter-italic-latin.bd3b6f56.woff2 b/assets/inter-italic-latin.bd3b6f56.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..01fcf20724f915f68a974ef2fb85f86f3039b1d8
GIT binary patch
literal 46048
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

literal 0
HcmV?d00001

diff --git a/assets/inter-italic-vietnamese.6ce511fb.woff2 b/assets/inter-italic-vietnamese.6ce511fb.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..e4f788ee02bb687bc1d5045483ff0d381e7654e0
GIT binary patch
literal 8784
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
G0002QVTgqQ

literal 0
HcmV?d00001

diff --git a/assets/inter-roman-cyrillic-ext.e75737ce.woff2 b/assets/inter-roman-cyrillic-ext.e75737ce.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..28593ccb8a4d849a746f2b970678fe426cb136e8
GIT binary patch
literal 26600
zcmV)1K+V5*Pew8T0RR910B7g`5dZ)H0L6F!0B3yw0|eaw00000000000000000000
z0000QgDD%9791)+NLE2ohdl;hKT}jeRDl`*gBUMt3i?>&JurdRNC7qiBm;*E3xh}i
z1Rw>38V4X7X1675n-=kI2biyYZzqeQZjoA&vk?|!900t9xyk>ZkaUdUz#0Rktas3h
zfMl{}Rjm$G%``GXUWU>#GS!C8y3wYu)n&M!lCuJrK<G(f1~R83X=Vp1iRcU=+N%kf
zdE><-+U(yb=|6)@L+kXfeR=3N_CMzFKaOs?L6;G3(7!0W#721gJbQc**tm?5tem_A
z)qbBnyZhcpybFVn><J`M`B*F;2k2rHs#JVj>_x~p9HiVT)0TFC0#yo>Ps?BAkpjxQ
zQfa{|xPUK@O5qof0*auZ6sWWce-S|{RH*U@$WsN8g=#BSK|#c&>a3u$ifdiD)my8}
zF7RK!_W!Qk2L?V-BpRQ27y=a;W216<<_6g@sz{Vro=~Qu@J<gAy456I%C=p~QUZo{
zEujQlF=F7N<|HTE5}{z^qV_Oi;qp*1$AuEKVxJ3qx{cDq*jqJXgrKqJxc(V2LQV??
zjAiWw2qo4~RtON<w1jpkOIgdd-KK|A^Um{gCpk`xT0ja(=KAGy4M|7j4_mMUjfJ`a
zE-n0JGF{6-gQpO9^~scQalcyt7D|%U^Qo)*>3`{4Rvg7q662Ue3nF%I2TaybF8ERu
zM_~n+l(`LSZdVbq=DPora^qc&<ML8jPIKLcGRJLF-eABvDtJMgC_yp8k=|TTo7Jc>
zoN<#$B!nfzU_ulLVJC=YP$cv5h(sr5LMA#fBaVoQIKdGKPVm9~|GR(p_x^n!>uUeU
zt7Z4RKko}Xh)a1T+2<tp=Y&O|kSqZ0Tn8?Ipng+WZsB?U^LhXHXJ&4+e*gLX=MVpK
zT#uC59sxp4YkH;-OM0YdI75wRpi4<<#0a5YOYB74k=V)LsSz_yWP(uqkNt1<zArR7
znGlI4S`vpu^^nP~(Mlz%@7VLC&gT7H6}Qytt3Acn{}vU>^|V&@OKYQ$#Vnv0#RzBd
z2}cJTM>vb47{Muy0ELJyx)OYe=)RoO%2|ro)gJxc7BR33AV7zkp%g=kn$iaRlmmkM
z&V5Pe($&cSB^;1&_k5RQme>emhwT5mw`PCl=5OhDtKEfe9Kx<c$xNnZUqYK2LT$|`
zgkMH+kSLVFYm7xAoa6sD)z9`_fTSKoSq2!sz>T2);V~#De#bVaq713ByP5Ye!~}pG
zV5lz)K<WdaWDfvAI{?V90Z3W`lax2bgg|}|00j~dy}}P^L&{o*5Xw|}`?V{(+j5K2
zRhx^-E}Gt5VHH{Wk7SN^?N<4DA(#;O_j!ypJ8;hrYtE<<l0&#o6cG13mfFYk)mtMQ
zH!7fJm{(D%o88y2j5cCKL`0N`dpz$Nwu&acyL)%G{^jD2&tOb2lF;ce3{`izfVP(S
zP8@^c3Jn8-bwV^vL2bGuSVMjKG+;y%<|MPA4O>S6Ar1y~;!G-cdfDRWAS8g0AOnU7
z;~smtUpOO0@{nj3147~nNh0L10aK+hT{<%y<#ETE>jY0LU?DEcRkB(wg)Z}|Zr6|H
z&?JUHM*ISI7etd0a?jMf?*S)Fa>_IQYK}@Tj?Q}n!jFI{G+;a6IN(he^#v4AM}B{>
z00bSNM5<7X#S=^_&2qehglh~&v(?YQXaFbxaAG9HqMx)sfH8mo0cx-Wu@F!g0e~Q^
zu@q9hHORu$JI<1^#6cGZAdUC9cOwx87!Y?6Lo*QwA_^$~TT%581E_yCYmg9#mZ+kD
zlP)JNQ{9jOAI3k2Z;Qyr@MxPSoU`SQA?ZEiJkWS!Y|1|H#Nb`053aY%+}Yg7ji%H0
z7jFf>KYXd{X{v^}xZ$5t{|#puL`SAE*o0$e+qa2wJUjW$sDUi{p|Wgi_w2YB*UgKj
zck@9ZZ)XL8mG!se_ltzujG?DHp5CfHNjV9*18-}-*z-L6GM>LmaToSaPOFsYc_K5#
z`O`&HLgS#uk1Pj|HgfTRtQ8Em)%3eeU+4ukBE2?FAHAEKtK$8Mjp|2b<M~ow^bIyX
z9)?M;{)4G(%seQC7N2ZqEoXc+JBVP6*}QNs_n+Avw-5SO$}QFWQS5hzvsW2#;pw9>
zJ2yMF{bO~(QxKMh0zF`&Tg+%}vPygR8{=6@6Jmwrg5L{ElQujZx`p1%(SYH6)PyNB
zSg^N=!lAIQPvy#u`+_$g{=JyC3lb(mWcltDBVM8;$qpB6GcRPwl%=w5ss7ah9EFN-
zRjDCR=K`Tinu&;A8J2I?q0=>8x((p^8*Umj<W|u({Q3J79+)!Ysaek`J@*32HouH3
zEH!9~hJO)97Xo|f^hh)4WNz*Ale$$5unG&OqpncgoCe&_NAcoA%l8Olf_k=7TM*I0
z2#KJfNFkykYbqM(N1Q}Plq7%voWdCpCzESr5pq;;$VGj*AkGOw3TT8wtU}@x5sOPL
zRn$>K9RkAYs7*+;O9G=Uns*W7D#Z}>sH+o1xh7cr1-f(i#h9$2Awq^gEw=<u2v82S
z7;=p%qRbHXlxxgV*E7+lDr$Lw;}8@-!nDT2)SQ+!U;sgTL##r<*$^n86^{O(u)Y3_
z7(0DQi`A-73kq+HXwd>Q=p?kn1!Doa&;we~B#90HD`<KIMNEVhyXZ3D00}1Y1>(R&
zEln0M+)@&?4UlLOLD2vhXy9^Gse-+e4ACV3XlO$RxU<oK`7wtorkEiBQ;ejo4S=l1
zDWCvo0e}fG=t&1qA)zl_02)P_N<gU9AP=;p0cu#@7%#R}K;WCSZN69ZfOzT%06$UN
zqsX<P5f%$a8{GS}pMqeZmIorxeHyw4=c9K2U$689mrn>jaqD;AKJh?*aKnQ~p5F89
zo)^LIrG1b*ppJHa$^1HWbMO#jD0ql9?78r}++TNujxutT!_ohfk5?8FrxmBIg%8K3
zpO1|r(s_r@bp$X15KsVMgZ&dufdnW(0Qmea8214^2;mU~w-CAo+GB_xfcOmP=fFP)
z@i{^s0rxV@SD?Q}>w8gq1KIZgKOog>6v&gO0RAI@J_Fn@!2Sc!e*)(%Tn#Bu0N~eG
zATAI2Jd<WcMnfruaVW=Ry)v10MVOM(nExo;oKOlAR+u@hP(w2~IZp83#|kl9;H}q~
z&Zd~kW+<8h!G8tP*%5{()og13MOl;1hCUq)b6UiacEJM&9ih+>i$4ir!V4w^VN)TY
z#Dq(ubcPc`R!KOR5EGI}!XkwoQs9un4=Lp$rBV`sBNcuq;YG$yC_#->Z(@0n$Q{5U
zHK@sK{1S8%>>T6m_P4>d+N-&Wp8B88p;qUNOL*dL1gd`4cj6*-%R5g~(AUM1FQTl{
zyDB=>tL;$FeF%wYO~0b%j<>*^!MM8DG@uGgY&WIh;-<r9iz|(nCpi1AoM|b_9q|<x
zG5^%sS$}*uUx8S4cJeBfD@XqvQD|@r5cuu(s&`q_SA{kQ%I6P%RV(`W97@%fXE&CV
z4%C;;(<WU|)r6&F7eFy3nl&J|vPQ1~nZ|Qh*X97sdj+r%hRzm%>U`+DCe2SpCEtUx
z*U9$Q-qdg@nIH(JaWE(vKx1cp0Pwv%n17HqnP_B<h`H?q!1T=S*agyIy>C9-|8l^D
zQ@b<X0gf8Hj?M5O5ct<TXukf|L*2g>l~sCxv2`}s%-_!<CCUN;#85oY-8G`vH4fFT
zNl?3{!S9+S)2?|6?^<MqW0{>EfBgA>1_^3AF!6*`Gk;hp*z%^Vs`KX10cmdr<#G|J
z%J92+{^yywNDTL-t5*KE<C#&N@>Lli_M0nSY4K7kM4e%c<bqH|;;J>IiJN+38c1Dq
z$9cCrG~up(_e^@^F(dJ&<T2;Y-ys4w>~UIv7+1|(BMDP7g2V7K=*qMgu<!k^hQuWg
zG*c3Jj_kOd3WdlO>Vz;(_A65E8ku&lZI`H8Ds5SG995~CzI4veY+&jGL37?*xch_@
zI=s<lL4;xkEN|#06Ru2+Fq>PM_Jl7lKk>GOj|yEiX8Frrpo?Z9+brfnfFTqpYD73<
zFvJteyYmyrAcjOOj7s>1#<tiG6L<<!_=RS+bP4A00WEBKGb|^b5Vkd~##bPA0fPpx
ze4soBa+4U8VEzYKL<G7+D00WCI8Fp-K<_+2z-#9lrBT)mZAqkc{C`2!7Svv*@S${r
z(2TSQc!wf-oT2A-5yz>474oP3bs0v_Yt_r>P?U{hlzs>W&XU(>gjQg@Di$#XuF-|{
znvY3(jl8x9AGPRJoCujd4A>}WC~~`uL1lt#-ZS?1Jn<2UJ<I4lh7|3-C$nbaz;<~U
z9Ah3l%<e^EqG|XQ<i$ro$Tm0gdT6RZb&~<G`P25aVY7f9w05zfOfqo4wu2BDPFf@T
z^11c45MAj7O?24QrVhYc5b^6H_LxG}W@BV-ZZaW}V^}E(AL#>W$T#5mnyRt9O_!Nz
zH_W`QYg9_p2cZ^4r}CI0i7X(WJs;^&5&KWerKXi=s~njEn%z%bwt|)F9l^uwa<vHL
zQ3G^MAu~lVFX37S+MZNhtge?=*iZP<q@{i4-o^*BizvFhtzhaBoD?ZrN}I{3f`?_(
zR+jks>Epi8=_ru5B~l}ai8xA(3hN1rHZ}xnY%4^D7M22M9ehYGto0pvPKU@&H@nyE
z>;qNBn$vMu805TF8maFt6@a&v6l&M`ip)C83JPSd64xYy>ZB6qsb&&NA3WKKAjO7&
zCpFr_cGd)*Q6VIR^amk>hVUIA?8c)5Jhv_@itPVw^7N(vnD-<!u~FrbJ;zRb)L;$T
zCv}jgA9xZ94BZHPEXT?xK2nLG`E-Oux#4futjNA7c~>Hamos>iQiDYnXa;z`p<;Yn
zTG5*2<@J$*Chqs-KE}Ymzh~S!<~c*+6(uf6?-u6xrLFbZxhl`px;)>?vU{b;N!Kxf
zztocB%Mso()+><nj0tFlg%fu~ia|*05IcQ7UI{u$XwnEdx<DQ?j5uxU)C}duzTz?S
zRoXcQD}=wflE{`Gw2(4*C~y_BM}U5Q@NB}_<kMPbsYFm8uvyUAIc~-`>v>g(n4;f3
z7gAV~%-mW?0uF5zig!C{@KkXdbt4rLnrFZk!HkoUXX^ow!bH$6@Ps9lzFaUtF{whK
zMQ|k*4Q5_x3wf`v{-RLUeP%$8D}9x1ZrC4Mb;FvFf{TgRm?yB$ImeLa%s3f%o8-m?
z_$|dgJVEZkFyVBxP}oz$e*SSGg9p5Z!vZ%$+fM}-Z9ZnU|09$`+XerihXTz?^Ob*e
zc%F_s-!-`?^Dkawjs-l2D;9?`mIGnUAZW!XqS2IxBZ?8`oF$!JW&Zm&4ttU7@WQK~
zO|Ip!C#3$L+AJ^iImaCFT0ghyB{gMw{vDx;D%vx-2GT(s&*)F;mH5)vLp7sJ<W?ZQ
zf<t9wjXFmXS`XFed%lJ_E=FoVul1R%qFPMcyDzj591*QkJi25jh6zKCDHScFVvyss
zCaVa<iK8*mpH-3l?zeDG#PxA3KqVl&E_MCO$5+DklG{UafcbrRb#lh0;25T7?8gf^
zXncgQr}1nytPdS@nlfRF-k5Utly(7`{Fcv2C!eHByWA)NW+8h<K~p~zKS73xwwh<)
za_ud_(bGO7Y|)aR84*I_wZV;wz;gtn6+{#nle$m}Midf?ZOYCkmGGe0?$hE-HOC3B
zJ#33ET5sNM4I4vJJOrq!%>_IEv?RVAN)#!xPpphc&_zn2_Gsl)ud*SR)vlK}mx3IH
z8PtR9BM;mnyh5Gw=-Hj<J`aNQxK+4SNsg5Sr?K$d@~KzaVP-}qQnBdxd~JKDL^wF+
zL#rc0L@MQ@)=BCuha)qtE$uGDicWAUY!N8_MXFR0=C>HvKKWWvGiR=fu*Fk&AECoY
zd`-KA*TBF%G<}I7d(07p1v#dbC;vz(lu)Z=1zpNMD~Kp8+6o9<qi>75TRfhlRk-<0
zo9BZyY3_tl<N`pNUW}Y=MdV1;azWa{s_Y@%O0}*Vameuj{u7XCS$uXmr;J$Mr`dSQ
zB?sPG&E7{KxJtN;D0TzXt+pGdk{i}GIzCwP&EpRN&-*yOLjAi0c&OLBZxXA;l;^yc
z)CHb>CoZz@`-e3?N_O!t=2#JHR2ADeqyCLc#G_#>$Zc=P0Xa0WgE9E;I9~P`l_p=T
zI`uE@Mp=_;apI5aPj$ks=rw`a?qtDzqOF5y;Vum?naK4z-Hw)P;H(_6fV?yL@D{}t
zuB@!)twoR4i|+h1LPI{wUVfJWg>_`-rsC+A0%Y{W|B-Kc^{xH;rtWkvHN7{uyF>0h
z>EN<$7kF=OPP*JTL%!2<ozpgy3!KAr&^>OsI%ETmNO(n^6YjUD7jjV6TWaM0QCN|f
z1UHGp?x1c3J0L;P_~#~0S=)riGiuNZH^0$`R-hn2J(NIRXW>Mpb!nZhcn9}HgRYYN
zBe)&o0PE0?Im#KR%l6C=8{UsWFlHkRKzyb#vjRs5WV(=qkXQ-b@ew~3%P)WxiRUdc
zGQcmA^^fXJ0hn805KRL}QX)izLn>qu;9|9#?pwFg5d{K{pW&ztQqnG8Ouy}sIP7@4
z_lTAjm{J~2B$IC}t;OK5+Egg`_Ogo*(TKgUdTWlsFvjHEMq}&<!QVg)7_;{2p=tFk
zjH<TV9gJEKNBb-JL<prYC@z71!jf*yM72-8Ic7kMwf2k*-7OWF@K=yTlmHhyFxn#q
z>&b%)FhE+CBf4v)ORcwAWH~p@jh;(!lW{k3^MT%aKyfG$lR}_Sw*;^eA_cI3i9lTX
zlI|<8X<{IRWgzt$DPq7la~b4u!Ptt%NxKuD=^-f!4`r)v_DK1ZXc6|7+ooaNoHv-$
zT;Pc51u!K4bL|q?+_+I=NA3B%j4WNbpBZ^KFE8@WgY-5Dz{LQ(&Kh9>fH*N>;~KyS
z1{UZ&gqSsj0Y=_>Eikt13~PIq`2e#Xm{}E%kf#6Z(#)A5304P#Myr}n>7_Gu+$3@L
z!5QZiozgWuYeSv9;95~@YsZ+tcK3XUPpLxq=ayqTq?VG@oacjIRnz!PcIK^+n5SjZ
zBeC5q<?DE}BH~HiJyF_C?yTg<yqo#9A1UbX&`|z^FAI=Y!^UkD4*%@vHoG^O`yphk
zKhtI|UNqTTlsGYx%_*NecjVP+e$R>Jx%`TQb?!$}%tPM#Ssm@@`OXTFP7l8)`RTZ>
zku2^y^wjw<9_jxap0MDuxTRhC?zyGW@Djc7j77SJtcz&AS6unWUf|9lD?KLK65jpM
zmALugbPGD?%A9_s$|QNHMR@LUMHZ^3KLhu;y6l|1oP0{9&l4)aX|PF3enpda#i~?Y
z$tRaFBK%tc<bHFNcLp${3xz5GL&Xs{9aom!xb!i<2#m*7(!mi$+p(K5$+sOdPJ7<#
ziTiW8C!rLlyP<^TKQjg<Q%{>FF2~?5UX0P4Xl)w!R%5~A@>Mr`q+r`%>RxsCStU-o
zPg=B=xTL4wB~785FU0NdNS6ZGUHocx;Xr;*Y~5YEJ6GcV`g$ea=B~81FE;vg1JMx#
z(0USJS#3q_xG-Lerm>ju`noDvRU8VCN&x$)+X<gn?a21scEbDBc7W~YdvGnuXKJrO
zv36qehGPynRwXbn;VKCHH3U$`7aWck3Oj>z9~mfuhQ{g)nmV8WNHPJWU;s8VS+ZMW
z@L?h4X0%q6QO5^V6xAnYC9hy;xK*dtIMqgJBf|r?%w?DiOIZSms>KKnfG8$7Rbv|r
z?75D%=vhY#dYLMiTBa-0_jih!rL2r;g)Rf09J6tEp5!l_XayIWQ*meKaqdLa(blv~
zcGp~tP>hIA4((5FPD_qzxVkqpWjHvy3X`y`A-eIGEw67>ufF<wb+_cpMQ6gD_0M5h
zn*{c_03xNyp14u`Tws4jitv$UkE8Ez_bi&r>d6*zV2uI9^|Ji0`M{=Fj8ITncgB-`
zd~DuDxiN))DW5n0LD=M>ODPru7-~=DNauKZ$qxjJ0dvupQ{KAeh?WzIjw}T5&$=rp
zw2SuEgR+mG-T*cx9SH{jso|uTi4De?E^*j7`Q#nzgB%0Ncq@jQ%uvJYb|v=FDXll-
zgdma+kQV?znzs>6r@$hm+67bq4hOD|OrBmhfS>^CO^YAe#&<X3YmF)_7{mpCVv$9e
z(PezxtjmcOy*EFjka|@CBOpVL$fGJv_8bBI@7yK)k?F+3^O|DBOvJfTsL|gq)N^h?
zV(o$raM|6A`2Kjo>)9D*D#mj%{m;ii`5q(~dH)oU=U%`6-mAKIJV3fQ%k@`Fdg|||
zvLEP|1ASSKi+9hvAE`_C#3m{eSxd~jKfn6-_BaEMRIWm|SG(fHne(h)EB1o>fzH+T
z@_n!JC;5l|)nL^qrQTJqF(;!Q64jT=Oy7+zr*&URFqe=fg#l}S>7AvG^>2U75$^j?
zRTv&#Qxd*Zo4kaC*Np;gdwStwU*E+^G{rm&^S4&P^rJI6!6uTruooXb{Jb>K=Oo-E
z1qzL$vsT21kN9MtU<zZmY3etxG^*be|BCm$^<cBY%w4GW_|dv!>z)tr{*U<@voIz!
z={g_<%AjL=lHPC4{R-5*{GF4>8X2Su$UmnCSsfOo8x81FeN|gtxq^XJQ7b98;tumT
zXJT(oX8}8D^!Myhv0}A9oQ#Y}tS%6Gai%R-b*^3SCwMnLzDX?@`yYsS$EDv9KWk<z
zlK1?SViRw3HF+!exdA&u0$4u)#*8YGyb4&HSzxJHKxZvb#ol%58=h!+XVrUFw+t0!
za>q&LGh(%8<(0=(2f6WFX7d4yM{jo({S6oPKRIsuc|rx?TU3BK4v;9&h^YV;U^^~9
zTowL4Px+CXYlp@seIcz@dR3~b{MCQd#C@@q;mvS@+*(y_uC@T=@K$h1U8$uN4~`Y@
z49Ys|cL<(^%S#GaN!9r!yn$TIAvHR$a`ao8sO8U$BI(JZ>gFRBgnb&E*lkU$vh$BM
zGTK|Al)6zMd&QX{CIBo{erJrB_$dgK_iuEs(5}%X^{pM<%;g(zmJbSe2<I8I>6YQm
zx{`lCbzC&|kqK?a-;`#bmb^-+vE!Mgo$0v*zMa3OqT7vxFK^e&%m@PBG+z^wkKhsD
zJ`Ru=Vp#$%RXG&#Jdl(~U8@P1wgI@wKqKaEWQ7}XU6**LBZdR~A({nOx?o=dr1&^M
z40>rSA_GBZA=oKPLqZV`fyzJB#vuRcBlSqC;0r>;{ZEGXpT5p)*oJG=pJTGHYr~3o
zx%uc~d%3V}jVvH)%CJU^tY3a)O?yLcyXm~m|EyIx6oSfOP2A2a+YpFL)t@ItYpva!
zw0%>h{^11E9d<z_+O6!}V1J40e;2HLiG-M6a_lB0Yj_)*s8p)s5f>V^v+DlZ47?Z&
z7=g!bYoE`AK0BmqzGmiJ!NNDLgd4>5>&pfN$4(A3lnw1HQum|*Kin+h4{go`XMyH7
zhMA)_?8pN#_rCcY;1u8)0z@GxMWIV)#2?_Qx*6-I^-+_a6ZHqIpU$*v)Smy|u(Ut6
zuIWGoI0J59iTPgOS;SHgx8~hNL<sO`MuH#twDsFbFY(~d{f#CbQ;8-`ry@F8oa3@-
zHlJL~njvqb-9;jVGrQx`h|OfM*PZ-d9+p=dZ+n`zz9lzQ99zPZy*^xW2qhxSsS#TM
z{{#eyU@~dj`Rv`1#on$ISYF5H%Ue<mdn5~k@!KE2n552iWWLK7K4JU3vkLLg$YjV)
zW?Vg{qi8-|F<(~*L_^(KFCrqcCPYJ>eYmaXK>!vYaU@;C+Enm$C=}5;V|~%zuQ02H
zO5U0Jy2<Z9a6xEgb$PZW*(`$fgKf;ag?=&DE-$UFfI)W-B|Nm6D;lwK*h)(`mG>?K
zkNdPiv6zSF=csgQ-V9?>`A>!W8J#<}zNP;cR1lEWc6Q@bloTN0&u@QL;*3_1L;nBA
z{+-u%dakZFZu2h*%f408)AFRG0pELhaeX?l#MZmD!KrO&^KBTrHeiVZRTy*Z`vfm(
z3<XfM+MCQx0g#sYN77$jJ!(OI-j{v&aAY<x!pZeQc4`-<WEal1OyL?2p7ag~NT6oI
zz~|lc_9@#hQ_Au8Gsp8&AdA64_R|1D7J^^n`||I+DZu}|dD0Y%3z16sX?6W-dp_%_
zO1Z6L(D}aEne=-P(s&K8YIF3*>IY96Jr{Z?&6GfIJrIrB6?LdYO&y=8#gmG5`O6Vm
zRozgZOf)v92+bjA4|ibg&W$n-NA3$?2FE6D$z%`gw`o6_-kaO^U)M9w+>WS-wyeQ7
zqtE1;*xJvZzkHSw*g5>v90K?@6KIU6fyPMBa7T9e&5oW!U)tGGSUBFU^y0smQ=)T9
z79(~??0Z(ZNPVi}U$A5AP}fqIE{|3`YW?KuE!ewWmgX_fA>Z6lYP}za>f;wm3nGoU
z2zx3U!m6lse%;hR_OpW&u5oVMrLxTdX>s9CnwPRKjy@nfxOg|aYOte+vB;2C{rlsT
zNVLMQA<ht{-}Ecz7@Vc0mPM-~P7`Lp>`E=}3ex^IdTw@<=QiGbKzPtN3Ieyg^a|6^
zjf!41XX!`D^+wrZVL=|_UvZcgemZqVYitoIc=-M#GFu5vFxn!Tb;)hfU05NnyuQ;k
zE-LEw-+#3(v;?!{xnzn7w_6NnIEm$wbz(UsKHev~*J)9{B~IaK<_Xx`cqEJl5Q$6}
zDUVJcCb0W@^~F(ac@%3W81$~=16!QC-bAk>6ByEIs!3JqHZ@TV7<Agw*CmWxdf`VV
zoTEH%<<(~4yu(n&5WxGmA74W2oNCX^bIqBO_E|z$dT}n$6P^1l+US?vcHXzM2-#G-
zz9v`-*e@qllfWTx<*j}@20gaB8L(t~kRc?Aw(vuI&CXvv9(E+F-gU)oe(=+MUu>c8
zy7iAURVqbhEFahH8uxrrA7}Ywx)UcjuhEG~*?akX6szcRa}ZSHd3wjPSZFp)oCa7w
z5cTOK*5Ak(+>4kf#B%ZNoRpX=@lB$!dBsn=hNsR{&uZljG8FZfUdFNqI(EoDK_$I^
z4*u?YzVpPf>|gTl%2D@P=GvW)`LG@#V>7SG4r-Nd{v&nh5@(8DfSyYeh9p$G$g}O8
zbWOnAb+U>qXf0!9_m>Gi-%VJ?KHP36|Meg2+S3oBeWJHUKa1v8%(Dw$1Mk3GKm=<7
zNX3J;t>9Prn=2v!gH+7t7ycNj9WDGmpI1@w8@u3jCk>$qE|z7pE?n)a?YYq5#X%63
zprfa@PjHo$-Bc#%;X99p=Gj$e&Y4&6eYAF@;Ky(IHn-V93g^XoZhBfwxJ{7n5G{9v
z+Th2b`p#~rdqYo!qmp_)1-$Qjb}hgvT`NJik>%B5@tI$_oy){!L0;L#0xswckN3Js
z+{!A4G+q2M_Th7X^MRl55BajYsptJFsbLL0)phP8BxWex&zD1O@Ef7#(!e?e;jKP9
zDx?`b1_PJz|7gCG?XOD3#2-%T_1w?+ZVp^924ccZKUaQ?yB_A>2AAEeN<T(l7kt$J
zT>3t4U|aiVOy%LQbrX}Wfwerms_QFrxpo<t;)al+<-k;GiXV>}=XWdwZzA4=NRoDe
z%Jz$)0#EF;kS(m@aT}}H^_%^|m_fdK+@JwrR(&;(C#=pAdim}OV*2b_%^Y<#R&ja4
za>C8NVL<^~!q%Ws=b@GXi_l&sGeXqDQ81ar1;=LJy;?Z6<ca8Gkv_kfFYLBs&)feV
zqn68UHokn|IgbC*HpPv8YqhbMN4)(sDw-f`e;F<HyWeImC+ao6>qrx0v^#qa2_wCk
zo={qJlt6!xqkJgv>BbJaFWVpWA3v`c?BtUj%NzxB61Bv)NUaEZyT>RbTA=uR!6;~t
zk-oTHy#E{QP%80DZO>@9)H1x#Fv=awXwNvjJuq=0?2vmNaD!>Js#;SAwM4xEjc-;w
z>M_fT>b!g?Wk<P3ROUWWc$lm2mXJ+0NkQgE_T?T7VE&}BRg~M`$lt~f=L5M631#YA
zjgYtLhayDeeY@z|NKc38z5hLHqzf@DK45NjV6#=RTx<|0H*byK7%jGv$=&WQkcnh)
zgic%g_q;fkN*-O_fuPUZ$B9cYmJ>)e_ok-}1Ex(Fgih%juWwqoB>q_cg6G27bq>S<
z+kOChHvC|^6dZ-9Ie3#v_t%`YU*A24J;%GL1NI&7o=WqD@18Wp$nQb|fB?>kPyjU`
z6jDJAyy9ti0KX0r<ZskhDJ=9>SbpwTU5(<i`XUT;fvg}qeO3Vm_G&&J^J6{sq3oEc
z_E#>9b08=@YeDeD+^Cu`bv@g|{KTR=i1i_MulXV%IEo&`r4AlTo_>=7PfVSKd(uNb
zS|SzDBp6h?0|hY0<9w?gax%62oAo%du7F@Hu3xvjzQ%AbgtcU0#`1;R@_}d&?+KM`
zVT0eiQj9UR5su57uYs;UgWt?_3Y$iDH>6)3$j%I5>pL8J>u^!%ZNpWcZwIWm4`gdr
z`tjjx3U3LKm-EP9N}k3OCCiMIc6a3>{2Jfk(uS!gOD)(q&QAx5!1`2H%|n%~E128?
zb!j8n;pM$H9CMSfMA<q$QVSD!VSy(nwT6}P2>}qw8x-_kp0fz1coIBm9Zn|oR_5RR
z2N=m^IAQ)_ZAXzlb)ZPU*;weYIi1Dc-dTLIFaXp|OANIk%Yj426}n^T@29UzF<|Lp
z4?4q(<&gHf4TTT&@{TMitsuGres1PTq41Am5Rh^aWeKmyaq<6)5q1R)VZx^RK_`4A
zG}hAmX1a<Di^Chx0HQX%2kYqh`5uh~;quxK42*kZ=IPpW*Qq~#ePaX=Knf!8{orXK
z+=4%L04O@_TE1+;B;Tvcc}MQ-Sc*<mgta*ES8huL1f98hW3g-Vti3@D{-noXdMgEx
zd)*QXrFvP2fx+vSt(7Yb48RbCosCjBq3y|4FtC+|<h+@8w<9p<B)+Z@R4i6^Gw37=
zjq=L>?RE?XS#X&}hFYO4jaPH5^jGqmfGdH#%IURRE<d^|pw56FGS%-7g2`-4cxV$T
z;B~r36LhM;T1Wka-|n$}N%S>b;oNim5PG*mj^4qD0Ql?qL<T;EKp+aOcUvE@^k8{~
zWTo9iZVUPtODP7S#SXcOK`W(A7Q3`cLAAah$VpJrxuzlm>}{)G=U~9GNIIAW5&U)#
zAVh%bnGV$XWvux}jAXS<xr(o9VcU=80m6c6An!Tn1JDWK*BxIcOs}^aPgjJ2!xm_r
zc}pBFOs?W&d-A~wPwDi7)oChDa4Jw)+80X=nHZ@~ve0ND-3ul0s*FB=*W-?pX0ruu
z(J$UgmgtuOM~+A;g!651%TN4c@vET#SOZ51j)C8ZMQBB%H-!2BbM@juh@vMZl2g*9
zXVZ~%It?X7hVm#so!90AIW<2jN6LwErqq`I#kx9N{jrL!N^9GOq%ml$YZf(2n~lwH
zwYYVn71>H`O|;Y7FWc|i-`ICLJD<9lT}fBoo$k(eKXw1n+}qUC_B_3To}!QIFZ%!A
zpBv~8whcOm5%fjo4ZlTyoPo`7jJ_<Q^6s2et}bi+KB6O0M0{g_HOMt6GiWy$HpCek
z8a5e@89p%rMiE9SMpujwk`c*{<VlJlu}No14Wv891Y@$XkMR{_iShqTAd~GT)g~WJ
z15Ag_w9R78EzQHs=hy9CCtM%2K4ZO%Od>myqsjH;Ve&)r3-SjGu7$v&#iG|jYPrGk
zxz#?aX&X(O8#Z@sp4iOWe70G!)v+bp4%kK8HQRlqpebu9WQsH8G^Ly(q;yfnC~A9a
zdoTM?`w9CO_8;uk8{iE_8wwrl9gaD094Z}gj)hL`&LPfx=UV5>&chp>HhOJjZrr!=
z>_*W>rOOwp7nM%kO^u~yP)}1Usm-n%T_vtk*T=5CRV@69sp~sui(}mJ&N&~Q<3A_F
zK>!1IP#}R50Nh|xhVtOh4eHI+%0;1M5|F{IPK6M>FOjfyXL$@1HZ6;vOc;%JB$i`g
z$qrIR-KmH`5_aN3qc4L2Jkl9~tPt&G5?Qhm&aKFeK<0nSCFnp^d>G!1eT1tvE1B}R
z>4?SA>EwUU&r);3pX&Zz{%!fIrE#u)v&#`tm|tzyoIW2winyF9HIp{0qw0mWS9n-*
z&e$oMUxqIsZ;$u@O+Ow=ywcb8#W4j<&>ZvdW6ZZcJRTju0#?-bK~vm!nBah1QxjSN
zF(I-2UL8r@pene9Q0`OGT!O{D*DE-@g4354#Hql;H<qx0C@vK&cxsW67AZlYB{bl2
z#L=B=NLvrbYf2^4?qNI^dJa9N;ZzW*!RWMsXmqj;oKpR@>HQnos#jH(8~EX^vh(++
zCsOl|?&Rg>Mo^QQK+dxMyxr$Ps5Kj(pCCbkdFlU}Ky*(sS0`HUZO-Y~%o2AaDZ@eh
zUCgL!?eRtxcB~lfE%h=iLPNh4yc81owWgA9Qz1o~1WP+QJI2}u*^#Pl%5br{orEj}
zgoY2D97fnKo2^j7s$kWM`wpR-cz3CT>;vYS&WQ+0%ENgSO(Yrj?V}M2`iQhA;1B$f
z{?u!B!7ecllrOf(^~7>Oq(QPIr_hw#2H->-<uTKOnSY+0!d<tZccP*FP2O_Dl^ZU7
z%z@%aI^Y2)_+Vl_BH<zJfR=#?Z2m7-7;SFVJJN+sWKTRkJTRDui=y9uhke5?6HG~h
zu5SvzdHwE$rI|JuAsZ#CPPvxmV-(EA$&j86U5d(DMLK19ewxsniJIhKyd_3v)rdX@
zS?RK-fW8~KBX{%;A(Mm_cxwk3>g%&ArnwhmtDsRqlNZ?z2Q!ncJ4-IhM8~Qb77<<w
zU;vL-W4l(nodQE9{9$pZf;2HhrT|W$oC-YQ-f$^;>4ujy5d01*9)WL^xFwWoYAW0i
z>_~$q#<#a-+jev<I6gy?QYjZmuIXpAzzw^hI`{XKi$G}dn#1Frma=lST1k@1C+`t$
z(AwjsXIqm_!JL4;q2luim5ef9Dy1}ep#(U<^Z>;qfpfN`F=ab-apAhl{PIEv7{SEn
zbK%`2kPATcO+=LIfHT_s+5=Kkfva@F94|<uQ(j}b<;QNviK4ksEKzbPQBtW}?XLlx
zBB!o}EC^AfmP20to;ejj7#QZl;%m-<DNHVOH=<!8&vImRY0jEtC$zh}5oG{u5M@pH
zqIV<{96?-uj+auCC(89&C^gKPRYD9~1GtBgivmkUluY7>@jh!0<nJN>ukj>n^5w9J
z$iwwNBVN;kOkDbO`BsMnhvbS)B*QWRFBt~UC%O!2pFVbU!EO{kA5;6hau564^enZ`
zwrJ>vlkIESRWq~MExPSpF<!#-f#U`hRAl7*5dJ@wvF`5!c3~QunYYaV{ZFfnX?|31
zRDi&vRu?Tjm5}+pQWTGo00W0N3YT}H)6R$|b0eTy)h1GI(9m7dx|e_!NYkrvWZ&kD
z^>v!-2p-&ry-ewQFgroR*=g`289YFOEVW}h(p9X~dABSpa=)>3dsx|nrf2$!#tO^q
zYNHYTAUjf&^R~<`I_<_<F>5vxCqa-8LaPnc19MTwY782Z#@YssjMTV-Q-Jlu5ohb!
zd8izf)E(@E=yNH#_lE@JlCCAUK=%L*rATi-skxK&Ung*F_{x=0r-?47&W$dVIX!#S
z%(>{cj;PQFg+0^ND=5go%X4qI(TUMqV%?j*VoQQNR=rw})|-?I&+GDn;Lhj4v2xg1
z4a*&ur<NPQ<MOOD`rp1;TGE$Cr4nlyZ;p0KG)m4lSc~+rEwfh0SPxf8&GSW$?km99
zfksuWPpoeg=<~S!<}e4ZklS9-cQROtO&-artWndHgj`p_Q~-dxr^XUZ72>cotfE0q
zD-5dk!J`-u)U=@lxRbl1;iUg=m;kZ}l0v^YKM@^k69+#?$tti7qNX|uM}ps;q&)Az
zk~ug+T7u&722S>M7WjwMf`X2m)TuM3_yQ)j6Wgx~igC~K0}ixn%>{VgJPkkFu^GEK
zRb}!+;f?nbKbHMir0?7e8Di2*RCny%cy~@abAA189{;GY(ee<G9}QXMy}4I<-Svsi
zE4MlQSro8R-#l8I;QN-UZTn?vwU#Yi_B<%jZ}`<`%{7-Dh!6IQ+-4wr<cf4PdlzIq
ztkK_{NIs)GF2*mpzG>YOhrM9YA8@1f<r#0$pwm5{WuvI6ru9c|seYcNDe;N}{m`L@
ztbPibuy@Vd8%X-mNXYCd>?)z_bcnu6gS?>1?jrd`t{B!0WtO^+*YIf>c6P8xxffeF
zw!Vsg;K`xa3WZf`h7?^mu!{~R?p?2tOMZJb30bMt)v-}p?xTc={qH65@3o-cnGC)V
zoD<<Q?0N2=?^Qr&<)7Y?a~C+Z%~`2i{hzE^u1*r5{KByH1TFJt%VL|@9v+e2PLM3l
zmlo8OM89FOOfd25$c7U3c9vJ-FM|pPbILU|T=62p_dahLxYBdW;-h=I`MJT(BZPY<
zO8=RT@B4Fw(T$Dg%S)#o_#ALQZUd3l$ILd*?}1o(>$w3H!_3RaUP%Ba=att~=p6Zr
zDlM;&ad60X_fG|ck46n%TEUmuZD)7(m$&&d%}KX}iD_G=K#fO7pn33p9Co(n7CJKb
z46U&l7bEEr_+<AD%J4fEUl3_3XnN%%I%m}nOn2ms{_9ITJk_GviR8@bWI5K^b0_w{
zI`aJ|4gXp0PAq;K`2m(Q$hwCcO=EJVDSbA^#^V~t>Gu*cvdYnNhUtN?Pb>j-_bcUd
z?MUMQ%^ZWK1DRB4uVa59hKyY=ZSx!1c;z!LWOG~(YY1tK1WN>#ccTR<T6Ml~evEb3
z{fr-ecX|GrgJs<J52~hQOD_&==1K>|S4LKB0fE-7Qv%lhpDPEPQ0SCvIV)SDV$VZO
z$>?#qUtC>*`!CaK@}g9=l7z3=i;}(WgiC^k0U>gun9FsIl2BSjVGl)Z0txMYt|56V
z*UHdEXSjSSFjhsbIJmkMHdEc%dqMkc_iV^Zh=mi{v_js4F}YVRWygN|`SW~l`iax6
zYW7O&FSTb>6<@kW`33DE_K|_|(9M?|JFUpc`nN^s7mrsXcFpNHbj~KU*xj%Bm$Fy~
z4H?!Yy_OV>mP^WbJM>>X;emskfFPSWSzfLaB6lTJc-qO^YEUD6)|E<5zC9@xUG6<f
za94E!3Orz^R?}m3XhUxpeTmM_gwQ#^>=Uuq(iV{8t%ZrDaz@<`X*E@zF^>eW8&U{-
z7(?Dv+<b>Y{=(x}A^v?5+4|)T*KY)LXQcK(-onCSu?)#>^+OF1_U)pPPpc{RE%<lB
zihy5g6W5i5y(meC+EEFM$<0ulIe*M`^VVl>E4lQ>+XvHM#imIMya#L-Z3SWL{+|}I
zi(?jA3AU1Ty}oY)^whQS>GroHq0W6=cQxbYmwu*y$>JS{@^qE7dxbTjOB^j1#xtSv
z0^rvu&3Xf9sJmvo9p$lFbWFmO-?kC}TVXS~=ne4ubN=Tiedpf88`7s=;XMe?&Lwa5
zFppI7n$8iX`I1y~es_`E&1bA`5L`Y84|*Q2xIC_YP@?+y--qP<9lzm#a|6@j>y!mE
z(SZjkDiN`jtZr}!*w2!6wzfSzaq%oe4+jPgPmX7c?&4xv+5~x)X;G9)%D5NJ%9d$s
zXz`XBrY$xUz7s6KQCtn$!sUg8ct=M*pSD_8#r@@_RC1of;neny{5o8;U1~Ci!{s(B
zkUt2HYOMDGc_89~ADXsmR7%=#Q9z<RID60%2*G`Oeyv4FdeoYeY)ss8PtGF&8=^Le
zi=@|rEYU`8szWuml<1cT(ZW{<oX!xI*i8qDY`g;lESQrp2A%*y8Z11Yb~drLstC7F
zYd)+=5pa;m!(_oRl#=5RXMCAVp)Av)Xeb%_4N=v6E{sg$)+C5vNVeEg#0inCFcpb?
ziw!KmHp>k;qu3-z-D+Y3*;}P+kHmm-1Eme#zng<){M;W{8t_aT6JW%gR7L@b;0A}=
zfW6x;c*B-vg8RoM{p}ZqAZbG*UXUvhQ&lL5WOt<3T#E~mhJMJu-wB3_G{zegb##kG
zuM5tgb@?UB8QK0tD4F8~ig54IairlBoP+kpp<PgZZ36nS>9W5@X`vt>I5VGOi3d1y
zCfSZ8)w@Yxq*njbI3+G|N^LBBw89^Scp)M30rO0UA$X=BVXR<O(KDtiaXBZHr0gUG
zC$j&D&I}nDkD&Ho%y9bYgMR=O@GsvW#Y7uM?i2<Dji%!2&MH{xA|kbigAXD151J&q
z;&F(PSc+m`-@aX<-9*K<0y36F7vZH(TLG{nDy4j1Q_*iE_!*B6pW+OnV0e<;;{<x4
zLPF%YShz&j_RG#Xe!P;XEMndEnx1YWuriU`69>B+y5E0MKDz5cztA07J&T9R7yF1<
zKFpd`Tnj`fOK_#z;f)CfE*!4qH6>;l!@)9fj~^!IUtGRaWr7k$;t*`^ojWaYzA;mK
zZ8}P*P~5QpZB!E~IVk~v@$wX8@?~?{@_Gr#Bm0!};DB;jmqn3b2Ry|a2;*ySx-6Iz
z0E<%N4mgvU1MbPjOCZkoaMuzsEc8JabeSD=y2ek0I&iRhggp`RkkEc9ufS&PjZl0Y
z_RF_E?Hg{-u8~S<rNTR7;>`j1`9|c4t@3!mhdKUqqUi=4*Q{MNt0fK$lpAUA4rUFj
z;i;7{<z+!ukB|{y$z|}dFPe?5E5oO2r513~zbF^v+PQ+h5Oct3sL!&-MoUnP#WTpi
zxL!}^JmPAk=1SR+erIVx(99|@FWED!-#vjWR=;!7QsQc}C^SA?Sbv}bkPCurO~1Zh
zw(H+CS2Fp_+JRm;v_-0PlW&iYR_m+=nlPD4^g!LpVgP?KIyyYD+ENsb-kMUe=!H#d
z8}1%VI3Q}^wQDzaoU1$Y{k^H@U;BjYCLx20R@}1(_F)7KdG>(lftGb84O{2|v4>Wx
z!dot+xho{e104JDP~UxQciXynhA29_x<7A)Y<q`nks>#5`qetwGI{vxpKn1>#R1WZ
z(#Hr^*a69kldA8qpX|a%?x=O-F)osw@(E*ECPC{cA^`a?xvVfKpO0s<lJzt_t%?)l
z3<5ak{1gR%8U{5u<mZq#fDL!E>fxOJtPs3Qot?F-X2`EXEY!5;hS@gciS=>vx>m{s
zl(mPWN!zPNP6ajeU9b!^Vi$}YxE%m+q?{WyJ#2?V^vq3l@1l9a;7)$>?trAzkHEHF
z@ahuv*Lb5v5Sj&(kF#n~BCD>YcQVg-M`V2j(9konY{QDOiI(uW3<b(`8=?Z!Ey?o(
z4>*gzb0HCz6)C#e)5Q@E%vEE<UCwpg;>x<z%SPRb+m_SSjTfTpxR%tDOs7n*c&sP5
zgV#;2JRwpdsjja!|2%!cPO6ZWG)`(C*MR4SCXcD1Y_Q@ikGc6$Z@wK6iiIuTT}?9O
zFfdI1j7F{bVWhOK2^if7VPb>%0Uod@Ib(k@p$*&yMB%iHpCz^J>~&o%#EXdk=$|+L
z1x$o`Mv3ZIwRj?`q0cvbm^<vQf8IhQi$ZF5L}>Zv0Oqzy=TfgbV!>ylJu+ZsuID>V
z2!khhwH4UOxL&^v7uL81CPVG|LZ@zBLWZ*WjuH{g5WbfE=^hZgRn6#Q)wctcDQkJ1
z+Vr0YWpKqOL=eI9H9%I7;QLBJ+kgyz8mDct?xd=R3YN%GDQLb?&!jaLVnm@6e`q4&
z3wOMrN%&XbUo$q)oaUd+dAnGw<{0UZz`>1gf(;PXFvCo*<t((BV^(SK6AI1&98DO!
zl(Dy`UR!;20zq=eUl<rYKLo?E>dC0Yzg--M9<|j}a^Vv1udA>nD7w{UN3KV>lrmW#
z9oRJWe?6@cK@NB6G_kJbw4}iI$Km6P1|&5XgkML40HvC!KT_NI^X$q>!X6ionXl(d
zuR4HYAD{+7(%$09C+v}{!m7(h`HCPSv!u3D<S*RBvrM*MCkQw4f_Gf94=L@}GY;Mr
zLPNEWU8dIR*@?a{zUu2+`GGbxdNthN-xXbZ-J=b0MH1e|vEESdPb<n7;_(ag1#YiP
zWHSu2(6HMFtJz2y45kYi$zHE}iGpwW4+3#QmP_1wyeY=1D`2TX6E8k=ZrDrLt2kMn
zW~ARwCtbKNI*+Z<H}o+w89k^t$0i&44XI}w=aRkPd!UJPdq*~1y6x1AqHg%`Y|2%l
zz3W>vcdR&ib*g2>_sLW$iiH*T7*=OBO|-N(-RG36^wcXf3<S1o$g)aPs%>wS&1$$p
z?krofC1oD{AQ6t&wxX#gvfnN*h>|b6;uD%SBnfS%_OGwKjQCz@+p0NS3wEQW!A%Kx
z@jN){{+OlfgN4)=nj%&?*uNfAY)@0r_62Q}&M!9L8<81bc7k%`Qz=QeuQo>TfDy~b
zH^jJvG#VCMPTQ9ER&*;Qlo%$m5{Y|S$qN~_qJfE2cBS273?$I~wlmIq7HE>94GZ(`
z1)2{=bcd_XKgw;rxlmYhlk^Ec^=m6j8!<b}Lw_UjZV;scUBGV+qm!5??>=o{be!Rx
zKnm3U_*l@7hfx#Z^@Mo$j51p1<nuGbX7EVJ?|S1L*?xWe0Sgu`ztPd*H*^z_IdS^8
z4+vveC->IOh<j~jgt(P^euA2CnfKzv?x9md<LH`FZf;Tq8$WZAC4&Q9u_W@~lwv3W
zmDSkvTsS#jw;L;}h1>p3-0x{<q%3M}On=A?Kd0D_xwL483<x*No=&Vg(h3lP{hH2Z
zC|iml6yT9{X7>Y-H{zYMGCtUaFY^sJV6`5Ga$Twg8c`Tf8BGvhNsX8LZYswtc!Le|
zG1vNg0*Svap0|t)j_=;e7#E|L#e}J{Qf(|fWOA`mHCw2py0(QrUBQ&UM7-kQ;a$kH
zo3w%gs0gCYO(-|<=3qHGSaQR%_Y0L<9v=9&X51{A_qM-h60`Pv{7>Bw>PFlC7mQdJ
z@Na-1X(H#Mt+%Ud;~8cM3LOwr=c-I_-m!dl_gBB>|0TRARb{E()!Y2q=@yY}h~H;r
z0|~;_isI-X0lIrB!l_#Qs1I1Wz=VjBa!O#{@;2c3Nhs97_XvnM)Ch4q*)(h%%LB!=
z)g<}LzP$}CWBFX`Oi7kXaaVa;A!}FBkcrQuH2WIu-{E($Nr;Z<!L~%7;G|vPcp_Z$
z?-fH9-<XxJ_n9Z%F0v5FzIJziYO=YPf{m}mVaL*HyuOtoLm3>hX275e->guoP*TcN
z%xv<%Qn+Aedd<h0oLDc>enfLW^FclBc17Aj7FQZTW~^pHb%=rnr;91d4m-~bnR-{#
zv?ry53}0(I0cR^Ne|f8I&zYMprpJ1pHjT_jhG1~vQ=P=lt-C|AoXHIYr8T=X>rOJz
zbe&b*S=`h<|5(@nHO^nl1})WLYi}G<AR~x*pZ~@_$~{<>;EkGh`eWB<!p?zHSlt7u
zaK1{mJ3ztn+`Ma<9&kE>F6i3+T7v%Ga#(n1Z%osR{t!FkycId1OJ#1}mkRdO3?Wrn
zsJr<5f^uT3iySu$V__qDhkLX6{1kkAJUlJnEHGK+VtF-r<(p?fl67+Z`&&6UyD#l&
zLH`uyB*L@BR07D0m+Rjcrv00(h@_k$-jVmg3x3M+{e2PJqq>ug6ZPS|el9mL+bysa
zO8MjFDh#t`)&aIBN!Sr_Qx0)9ZaL(l?o1`>Ii|%!qKGQaE$jIy@VP%NkP#b?vKE{Z
zhi6@o(~g2yJ(kl0Oo1$d+Ng9NvTW+@4X*~*^;Q>Vf2o><azK@{B^K}nicvOh?!hPm
zriWOB3`h!1?C4S58UNhgagpPGFO2;$o)R}QQuUxpQ$hn`G*nm&!?Z+U&>QD$5D{5o
zs+b-ETBsIiU8~JV20thyLuz_7rCRTJw=kwg7bz~b2(q$J53sYFP$UQ4*QZR%nl1Hi
zI-o*W!$o|8I#F{m^B@Q2sy%Ao!E%B@e-My@wJ5XH6fht#sr4;J!dg<+5XhZ2pMJfZ
zrb3d9?8@&YH+Hx>P|E2l)c%ceMC|ta;>!Nou8t}KG5<Kokrmhv-?4meOx_o?k#<RV
z3HIZY8<@U&J-~+mdBWSMK_F~vfaV0a+$@>eQilZ^$(1cpB<xm%i}_;P$X7GfjTchW
z8!3fd(8!D|2MuXxGz)oGgGVA(#E^20(^fecr)gkZqL&=XMqV`=>Tnh6aRTk(bWPPA
z8Cec`({M7=*}RGe)h7}_wp5<iP@Hk?{qfJYM3vdaMR{IetFSin>KmX$>YLhLvy9*R
zaT^nruCCL^%dCwo4<1}Zxa@&R5})Vg`QgGR+gSDuDU(4~Q<1k9q*IPB)0$&h6D+?Y
z=L&m`kEF@M680`!s=&@TDWJ%PLLJ{6t-7%&wj$LhU@b@S3zOiLm`FpbgHlB>OP5ST
z0fZOYTDGTa?{$HMb5@z68gxf@HlYheBR1;V=!1Uj&HbyIV6)_;X-Lt|mP+N&^ir{G
z(H|{(U?{Ag-a3`mH8*ls9GvaY-U8owy(|y5E|3d|DJowQc03SF$RR1DFIClOULkW7
z(DLCqxeMO`GVs-9pnrneI5?aQtg&NMw3)e*ZoNX(G<1FBnPf{KgIO^O7X(HNGMzHp
zoQJyMW|R+-s|XN^FND!ca(M^2X~$xR+ejKm;~t`J0tW{b8;!qu-;9aQXA<7W4i?KY
zKezGRLFe1y*>a#&I<)(7rdQPHy#h2?w9r4_v|i@k%W;~JQ8mUFlFMK%hY0XB8K)F0
z725D;)$TDB{frkOxHPe5HSW2X7bU+=sa`KbU+Fz=o-*%W#lxzjj?-g5ss1XOsskqZ
zQ-<=<z@Qw!QyoYJMQ0y2j(I;cY@RfN115KTqi?bXcU=~~M~D1b;C@q?%KA#Y0|vJd
zl4}VNjRomRO9=S{l>lK(As*G=%ZFe@4?P2JH><+)zK>h2Q--s%!o;Fh-hchnFhB;q
z0=AD|jCQZq0xAv}%YARMk}xJaQYAv9mRxe!iYu-s&g#8Q?1e2yLP%k@v)1aGb1&KZ
zK%%R^d?N{JZd9F9)i9shFiWYvJ7aHqez7q4ZXxeYZX%+Z5`yl=3LEq0WeiY{h=u{F
z3U6$b4t<ZCK3TaHk_A*JeK(kd03%JZr8;IOS(8;DQj^MQ#k`ygSVh&km77?Q$=SnP
zyhppUqK1Qz#aX@oO`-Kaob49)26YcH6A&VfokCtZt)QSZJnWqKR#4pz_vZVm0)RhZ
zZ4h>y_Ghh*_Pdm%t<NMOSvaroGeL(G7qj&i9u3AUW~ACF3#^@O7lpha)nw8cNgrDr
zBO%D~)6ID#6&}lK?v_s{O@FZBJSpt~19r;Rs7fmnG~^IL$b9kAt;AvN$y&r&_78*i
zi8;j71{f&}zk54oBXtN-NICRyR1!(3H*J09Srr<~4NG#>R@)woInMvU2&9@&OeVV#
z#uf53HL|7Q#Kqbm%Uov&#4b?wvSo?|uf3MN<*d=+a93xajB}!1fZ=nn8t$<=PL2>7
zrhw$XN5W_0h%bQT{i@?gjD53G?Kp^^sdV2W?~uYqcY52_m0GW92<*i3m4Tz?6J?L1
zG`CdjD?RG27BJ1N)cXsvaSDFKq=*7~vgJ$yXx`sIJ~ZkbFz1UB3?XYyrl6iKWVUv1
z&J%jxaGZZ}CzG13ctGrMEnMm(zE6PBaI=o{z!?<<jfSMLAhlXYr3+PD$-1YG*>bKA
z#S2EZrUyn9q`L(FMpv=)v`3uj8;|}O`+ob#M6;n=Ha@p7F}oFDj~{zPU$_j%$z>S`
z8a?|}M!^^358F(x?&Q}ijUFBcHqGtBC|Ra{%HlM(+6JLtfoA@-JDj%>OUj}+P^`S_
z{zS4t=SXSSr}*WPlgdFbctX%KHvO)iUoO?~=}WPy_75)eSt1dxQK74X$9=c=KOVnm
z+5;c7O^2!Xc*%rHSbZK}dQZ~(!d>!(P#*M@I){F8{mW1BP?i36yOZe9CVITYiZa(T
ztYw^nAE`!;ls317yyw5pptFA{{@~NqF$|${u_60H=#aaE+nXP_R(%b$vOBdhCXTd%
zUE&@mf3QR+5|ybGP7voY!cqxY-q~oXpZr|n+gB;^R6)9#Hh0eJ`M5|jq{qRm9M93B
z=z}cXDj~)aaQKp}#8M&#=?~bMp9{c&V_nFq1|+^4jHbawKaMOp&GC0^<G-5V^o@TK
zKW+)njpL9CS<`CbquaQK{C7&z>OA+wt9fb5-{Pi~WprES+fO!d679L%AO;lCcgnzZ
z1&-$9yOyKsTI8~VKDe7yjf^!s{CVta-ATQ~Xf4%F$xv$?ax|wvbnRT6$z#b@nEX@o
zrRad%CCa8n-13VTGrBD+?^z(vx7a6&8@_$|Id}CH2jP0H>e8(5)xliuU_PuCCROs0
zi@#+oaVE!&(on>PEH15x@IPyQcymLCYiPC!06*Uu{B*2Uv;^0gkake!;WXV{g%8cD
zF8&8sdyB^{e;hvW6T-(E-<^lnm`VPFzQUyYu7PM2s`l)=r0NdqpS@O@^*h7mABf0|
zia*c4Q*2Kns!o9b7uP}_NHpilVI2)xy~wgIC$QYk8qkYDhhCcRCeH2j2j`&>4-d@H
zcsX~NlyOMRena=BB9r&X9E;{p+{TBI4`9PB7Pj~a#3O29odo-Rs5T@mj1)%{P7jXH
z>MCvAIPLWBQTo}OhYGNdgdE{!=dg{?KFpLFJnJ}8I81%RY~AYAxsly%<_EVB^{9*k
zUAHdAOOKnP8h88!LvTCPzDD*HWGx?lEm}2$ReRVBiLeyO)v>YT(-F&9INg3YhqhQ_
zIa3L)u2`n;GfjxD(}w+v31YU?q&(i8kMic+(C`P(WowdY8Q+|m<B?Z(l7Y_8GCS{N
zC*h-O?v7d}6LM7NGsyQX?X<nC#y2P6Gk6O2{7{$b0sG0<g$etRnZKict!g@mq9fER
zg+!8@B_uhAsyJDd>Vh^&mD46RQ6N)Yw6QOxVIEYV{w@WkUZWT83=jDYK5!jOF$~>e
zodIVvir+Rwh?vw4GLQ<`^5ljSg0Tqqvk+C^)C%R=yrT@;M5|nwo;o2?dDl}1unyT4
zGc;=kM*;KLRh65XE_uey#KaU)h--F<q{0d`^q3DNtvxDIaFOO@u0;+W1H&n(E<N?C
z+<ZUJFG#-g+g(BKdw+PZ^UN`ahWxI37~9q-i(iLSFr{6AaO^LS&bOHD+wZyQ<{brw
z2io%PYT9_h(XN|e1aTUz#L;c%inhD;oo<!Z+8*&jmI}u>{>WP>>c-sODSuiH3`2U7
zn`p*X7T`y+$=s0TmJnhU{>C>q`l^3aWeU?cKG`(crStO-MBC@}7vejB2cNO+Bv<nv
z6BX04@?R5?!+rUIOfHqpnrDDc7i!Q>nP}2;lSzV|R{A>#x7T_T?43|1LR+8wdEb6h
z8h8X+;E?IyYY+^177Gz&f^y+7lrzs-o@7C|wcvLvKBeC8xpZ(9u8|hEa@G5s3HzGn
zW@bi`Bt}P_8TKz`$R?9T85~?qdQwV3hoEW<xp`P&R>aIcV6K`twkYc{_5RAr3W1Kv
z3Qd!@q%F!#%hm?mxnZVxO4O~KDt#w^{K{b*_+q~<w}2w0`1&uzl8?QAZ@jkl!a#3(
z@tg2y-O1dU5VI!)=YC2{lEC1wrgI@NuBMYdCm*%YOEiInx1E<I_rVWxK}IgT!%Q4!
zDIrI>6NGpNouCd0JqUZ6ue}U87zODNwb0)@J~Ud<#MBQQ%qXj8nz_9pemta^z{HHZ
z#Y94%e5KH?m=2cK)DhN1^TIY7);NlXuSxo(xxi^v(E1wzZqHvK9lVhwYw<WB*GMDM
z6y}pz8ajvyZ)@_86JS&gQf&g$HKE~YRJZUm>_{&I@moxq&{u~xn^`>mS#2!~mgpvM
z@i_*!fugzM@Ymdk0;h5moOLKuK@pxQ^>btVnKm}OBjc1#=)I!I@w2;2(<%~|fB6>O
zJ}5q|zCkUYSP!+z+Uk7H+DwjGk5!!cuWyx;fJa(1p0*%i7<pkcy$1fLphgW&DG>7}
z57-leQb2tAV8)dt()t~j|LyDlxDZ_6de>0L^;(`Zs@Xy|9^8d~4$&~Kt@^2>BJOKr
zc0zEK)`mAMW#O8NH*BN*4voMWd6Wfq9mt@VSwqEILyzwmJYB%Q$4Rm#TE(1Iaw>a1
zc8~*?V2u%Ce4}##A0p00IHkJlJn$7&99)hPdTs=*+xT7IXZ{<^9n7%lOGA7k-43Q<
zs%>wadVi4=+j+B;4WM~0JTuRRy3eHLK4C8L341@zjf`->X%1MwX0+k<_O<ayh4mnp
zjLP-0{t&D*BmhdSm-wJJm;MZw>?3~`e|$9Rpbq*yESQq5jf4I3w}sKMgfOesaPBn;
z{ixiV`z3bU6>Tt`GnCzk)*eUws!2v@NoTj5|6ZJbY_E>xh;K%Eh0kgYLIeGT)bcw9
z3#PoOqy>))thVx6Y?q4QVivQI00j&%fC&twV_k<+5T{Zd!$C;UlrW8(YnIhZSMs&0
zAglpcA*5(g<AF{A@kb8qWM_V}?Q~SmT716bz!{cft959=I~?%70>^KtD~=C!wiZU9
z&qtV}PV!h~XS5*U9_J=Z)k>Oyx>LFvU!W3VQ9>rF%F)g%Y2{vv(`Ul2+f{0v^lId+
z9o0#VE{B^qUW*M4!w1ggm#^<Kj~cZzzR9wmby%8$4kWe#)3agz>x3h5{efiic;?kw
z-Qj)|Rmx}%3Wtj0nuW6eeUdTmhXLW}hJMxxn^ekJlc7aS_uaXiz}GD!<r%(2;<R4U
zTu_*7H&kDoOhV2;Y3W*U2vCP+=+jN@|9tR6zec?LN_H&O`dMyE)dD>ddXYOh93t%v
zz5iv%eIM&3cIuS;(6L2Sp!S)b7xzE9iw#{B8at3(rE2zC(VkJG@K2Am6*bsuHgxhY
zaNozYtG+kO^Vs@tMz%65_lH-$G>4m+Qg+vXUpGVSW*B?FI#N1@kp5#R8w@cg%WA@#
zJkWBK7F#K>`e;>?hB?~pF5QcY4#ES_kFc;xAH3PxGareDGjH~!BweB+w;ou3u#hfU
zggc%A9hR45@f^fH)$=))!4PXJY0#X%F-&Bfx@g|&Ld%227VnK%x!LBD#tvDL;qTxx
zT^{(1DyFyDhQ@Sc!a5!8L{QB%$-)){(ouneV5iw=V#(TWMV^;RBv#%xe#^?1<>ueX
zHoReR>ET+C+cw7s<Qi(QQ)=HR9{kFt&IuT(%iOQjNjCGO3X;;HIJpv5P^n)E$9gj;
z!m8?F_f<5qnozfDRsodC>u50v-qKGeTrzxHT!VDOla&smvH!*P_ig&deV{O0^U4gH
z6<a-nD_zKqAq`F@XWU|UXlI5ww|F^ydn%@e>Y?=INZ^WtzKZm4Of!bLljB%@rhi`>
zgQg_Qt|;6i0SYFqN@u&|$(UiWJ~Jpy6-8iW=b()JB9I;*BlFl7N?o;q+K0ZRG0mT`
zHPCjf+bIu`cEM6aDZufC^Ve!ihy%Mx`EIUMI4vVht11m7r31(XVbvinra`h+lf7JO
za7^_!Ix2D5y5DpXx+)DyiLzZZKbV;47QbxTTDxp=rrShCtD9&}Wvg;<K@jErAZhm+
z5!Xp?--9tJ)0W4S<43_JUN}7lfNf6w#hi_qFPnn7X{Mec3EjIO2=b}F1mLx3Jb4q-
z--wn87jItXY;4+W#c^HgjrMl>r|8176J@h`a~4^2IIO<!v$s<T0S|Xt>Tt`@9fcz#
zUGpdkp<DeSfIxCua1{Z12<dr;^bLj;uZx=6_ph1|6}BTS55!GoAY#_>JMz%~(98`q
z$wsfx#&_r=LTE8SM|4IUD3N|ZLBYqc4@1x`s*IItB9NCC!pdN}phtQf+()7!FhDWM
z)>DBVbl~=ltf7A9k>7BQ$A?jeO=)SFa!3fRq^Y$%Q_?QgjI{iM;*NQ?f;&RrpVMHv
z?^p%Q>$6W{X=wB-R>bZZ90O!;boo+8ra9Y<B(97@Zgl+8*G}FflDGeHSn3Jro2hn&
z3!3KI*@0x36|SXTeBD~?ejp%pS4b3lcT=k*yh~W(lQd%VwSy%_R*4aWsx*`pMv2M$
zueNn9xv_{&EB{`DsJ`q;cI$-w=^V4B@W>(dDMnQH%02&88Vh#en6h-W1_e-yIc1Uz
z)qmLpgyFK`+p-c1DY;7pP(Me7qJ2s(#3e*1wqxf75I9r9LXfsOOEi5)y?2jE7qef>
zQ~O4JCts33S(I+PV)vuB8G}fMq*uX;bF@L3W;IwoDCVnxv80e0<1c<*i?lQHBDM}K
z*`-8LGm>|5pbfeT^88Kp>besNSEcv(z`Ed3MJR_-&0VnyD-uyjT#;;oYz}2#oJw=(
z+qhx-9=DruHg_wjVVa^Z87glkWpKx4i)b_W=~h1-^;hPt?OFtdPe&B&`nA@#e+C6K
zj!5gO1yGK(zj4+@+e|l=rp3#G<8T%po2t8Pv==r@Mm3+|J~}O-X#<w}y$bVkGL~}-
zx6?))Eb1}{D<bidhC%4Hh*4Gu7<!q;2cbnU;8Yb)b_PW2(s;9Dmc2zX1Gv3_<WJn?
z0fzx9_G)f^xC&Q7|JXWiGxZ2y!S4FM+hkO_JdftV#O^X(_KR-AHToMO8@|$C{<@a|
zHvYIQY|!j6RJpDU%(^SVaz*)}sWHWJ*?>**uSXvL_pz2z_Um$I?xCc7|3VXr7eXNp
z<*pe8R;52=WfL8uUMVKJsZ_VHsg?MIexNA8ZEebzDLHw%7@P`JZzx}dh#C34-s8j?
z{X0^sG-mF+yI%eZyqk(g!xqRS2q7!(vo)c4H&vJ3oYL4l^a0wtiT5{nWtRPa-TKIQ
z18R$sYSh-JeSlHmBxitVN#zi(IhR`GazGT-sJo2nT)Ls1x_Q50S_s9#7pIo4$OK$3
z((KYf)(K{dshg$YyCg2<yJS|Hr;TLVMa^I;a)DQJ@^V`8Pv7`RTsP(TqNok;#G=|?
z!4Sc0l*_70RZ&Mh8A&Tq3{`#>W(2F_dLd?FLZ>k^KTM#pGd)iuf^}KnDpu%lbfYfC
zvOA;=dXFnd@t^Gm?+guFPkUE*HPokfT+u_l@j=JqnR3mSblHDU3-Y`ze!{edbk;FE
zEv7Q{P4SI~%Rt*t@K{l?!afhMWrn&%nbjMP^9lJxJj&PUU=#rRb*Pd{QlUE>M(Y6N
z<4_SNG*u3O3T~lEhhC>f)v~QEVQ!}m+h(^zyMNa<Ivg(raecp8D!lOhNe5UUb+c}K
z?3M8NFR$g-A1cwUS-j?IgmJ2hOIC+zV@X5xbC_pQ(j4-Kp)qkf`ilnFg6VAsZ7zGi
zHu8_*K$o3=$7X_eQK6w}9AB<Tg_f<knoNS1oC5}x6Q1kH1F<Ab0A!#urcDhQMDK5F
z3h@Nd`A$5oloYxSeINi~WA=XAC4b2E#C_{F-yA+TJB!JJp<=RMK%s384hI(IQ~Hns
z@4#Q~yu_G0c&wWy%MRpfZcKkR{c|R_?5~Z|)vYfZ{{FK*TBgx&f;{8?BU9J^;fE%2
zGZndZ>5o!Eir_lEuv0%prk!=&0YJAD#yyOp>Y!4T?~<)+r>c${`3OOly39Ao@;2_o
zA!adGaw`cEKFC6b%lPO)d_E*>=ya9+bqdr0$Y3yZ14l)0vP4%Z;0KB_#BW&#lBd4{
z!GPdF7c2Ck;GZT7QB^wc_PXIC5$;+v?HaPF%1)8uBlOnb02=P1fCY&ek*5ZBW+82X
zzs1`6)9GuDVxx&yq7FdO74d79RLdHC+U}FtHkcNWxznyKsIEuR-89hg2s1XNbs^zD
z97ascRO&?L)l%J2Um$9$6-!PTC!vK7q(c8R`gADehi~!GwTl%}=PF$b5Qw}{9Uor|
zm!Kh1p0YETOC~^*a5;CPbwlW(BxGam?3yN=%Vp329om%sgV#cjR%XALuczArHRtx$
zW=d(gMRVxM$w}5b-Ro9(Kbmw3jl*wEfXNpxaN{Gn9N#{bPJifVouobFrlRi$-t7UB
z$6Do0jdeDm_x7QIF~WkEV$PnzuX`KW*7xtBdmlX;(+1k>qm#Z7+Lxyb<=WbCWupkZ
z=WOLKPC~>uc!Xr@#z8IHf^cAQsvQK<hz#p@)bMdCz#)pkZ}<!&z#n<NMc3qVaGfN+
zeXD;DgX(FdQsKT4w!t^+N+7jf$6AXIR{u6?NPg|nH9w7T(Wf+F#!J}%eyVIPqLqv@
zp&d6LRh;9(!i`mh)h1iL{E-430^13GI~Lr5Z&hE@;OlLHJTgT(>1F`WOCP1x40zBv
z>}i1w|3Kks^P7Fa;4@xfBaix13J@o}TqPLlDX<GYz^L0aEYAy}(J!9N44g&))A*$X
zH~1b^qY|#xa4csS-^T-cs-kf}=yH=L6zBPe-2~gxkHyg~G#n=S+{oJlimVVfYT@3r
z*g;rt2)95g?LVCh=JoU~E?%F70TGUcs#D@Uel3`vZ|L%&=8Lk#)nQW2IBg|K!#`yy
z6bP+f2}83H^0Q6Ww2TTaY)(oHszKVAXTw;;qEf~;NQVDOK+3LpK;dB-B}Fp-@0-5y
zZ?N+l?Bn*C6+|jY+~z`=UV;-My^#9=U{Sk7m}zy$&02B(>W5*s(p6!iDe6`?Ar#(T
zU!m|3SgIxAvdhkUTkNpou38d})M+ZKqRigE3)sGNA6uY0K0YRo#oMiemg-)dz0Gw*
zHA2GyNeGDW*tSD<Ox6U4$7C#s%e%l8vZ^8>u#&MwASYBo31Bd+sY4mPWJ=-@hpHb@
z$AOg=k_9HhA}L)drUUzg>Bmy67+5qJsAfg}-s2#c?Wqw8IPMhe-^``$=pU?FW04hN
zfz0;1W3ID-M~V01GODqY2~*+A>dG%8r5yVx49|aJ2F+bFVosAboGmq$@13U4Tr`nR
z>~TeN7Ug^aqWkB?LDE0Eb5IZlAAGW^G)MZbQxw2B&io$Owd&`_*5Ej#y78T(Wc^^#
zd(YCP+=_!9uC)|N=QM|U{<CCOEBm_kc6PM}1;H`-kDq$deVN9)OUwLe+(17|;*xk#
z+e^y{;Tx`V2pd~<uD;3ndEz^M!oXlJgR;1)xPjHIB_Ae+Nej-<CS&AzmT%r{FWK~5
zI=CYYoaP{gfysB60QZ_dbC`oNPz#1?zvnzoXP7fMji3?2fElk}lto;?Wi)tvC^VPt
zX!!rG$$_#okhm=lWdTS}?p6V?s|b{C1IDZbHl_;;wmLK$5V3&JeSk21k=rtaci{jp
zcP=@E{ztaK49^xP24TW|dGY891=<tGhi(h*I@hGk)4Pd|xXlu>2Ffj7`z>-=dq5c6
zmUv@D8ulhRbAy>QDZ@Rt%BH}*$1I3JLy5`%JGy1#nMKklS6PapU%XHH@9!8~jrW?I
zY)I7allBn3Pl+)PR2%OM3eksALoMZlC~ZnNe;MyFKo&wJQ9v}*(~?heHALI{A^`QV
z44sqix}f7t$;ae@jhRD#R*$8%RXHb%f-_A#f}+s|DJp7feE%{9XNkV0!oyL>+o|#5
z2pe!TTY`f`3)$n_Pj6cp71En^1n6Bd3C&12%Zaq?Kb{=1?^n2Rz1?2#bSc@8`_%@j
zMa1Okd}dxUX<5&9nK9iVJJ=7rVufo4M#VAe+4NGyWQsM?1%m-1yk5Z4+5{A!Sx3*}
z>s~iCGdvvkdF+H`r{ac;MnFrl0SiuO;Zo+inB2PtpppHPObW}k<{Li!^AIFU$thG5
zuMy8Z+MAxf-kg(eOm}anD9tHhtr_*JzsTi&rz`cV%>wu1lgZ%E->(u`T(`V>oW$x!
zol4u5NUE6G?>NRf((%q+)dR4uO+VYMI@+zvLG2ikZ14V0#eDV`ltCrXKhj7y#>|>E
zr8u@9>tKuPG${H(1$pDgS*nzcJKArV?9~k7mF!8%<I3f$iIuJ;0BUg;wJSI!mG;;9
z^(hkW>w@lJRUm)x;-Se%9e6juO+U)!<WGz!&K}t;EthV5Yu*hSUEZ3L>mt(utYyBx
zUH{Hi!G;G~vPWAxq!<^(85hBdel{vo07#PsG!F9l2x_+B+Y!u2X7r^HacNV@;su{+
zEif)`+h)Se=Hqz=d@v<iH_$#%R+BBk9zSGQij3QZ7l6*S%WD)H@+q$~hqK;}Tz2D`
z6PsN5I^Eck4-_dMY59~oMqGl?f`gHs4#EW0^fyjESR2j3|3xQoN}Op<KG{x0)r?_I
z-q}6O;Q=GnkL>Dj%XPB6pAX@fJ5~M2_Vxx8iN*G?t(d-{#P-<<1BSv0Iz&R*M>eL{
z+ii;pST{Src}XlJQIS~(q1C4R@oVMQ1IfvD6$Mq!`4ZN4wlVZoXMPGxUiB9Ri^4X1
z(;WuV%OB;sl8juCyk?^@R&6jWNd~51btcWE)fV-`C7nIBs*<nT@u{~%%|MM_U!2G(
zUZ~$R@#a3c@RMAV+Rv5x6DxP-O`B5b-+OvF+2|To4!=&az^x!!6#+U9`qaOydw1a0
zdj3PcnmkDya4i^qUbvNa;q-}$OOXm8ny4bF%umRq)40otrjW=_#w(^An$Y2DwR{LJ
z2!r*^jKy37Ee#O2C0D1yRn!cQpw0Z76#1*?><cF|7-cS`PTqsD@iB`Wt#W{l{l!tq
z8o}XXyuLFWI6L&yQ*QhDLda58jqc)`F+<l+3&L5a?Bmg=Y&HyI9ND4cvIhRo9JKV4
zYP!tke`9pJ!v5KYYl2W5FS`EW_O_rSIl3l_bVac2_uBHsXe5<jIKg6B7D_Xz6xa4v
zIU2St$IYe;Bb9RORK|%f)dx_Z@w~3y2&CN%dO%87*<k{U?M5#J7YV1ho+R&yf$-s0
zBVkjv5AZvmh=Qhs=jS2SA<V>{NmWIcQWx%k37`h|SaBi1S$r1lA_8ihEnHSa5Nfa*
z9;Q$(q!y7>L)gxh#5lrs=BsFei7E``OIb`AVb)Vh4AxtO3ezGuhl*wvsi$YL?OFy|
zA?-sf3zMG*XD6lu-2QEEfva2<m~4aLGMByRzgS*zwopaoMKH)*F|J9Qn~~7w?dGmT
zotzB=teHu3aURRpw1l&fn4hmSS9fXmn}^K9pvMyScMJMP`_G$YW_ebEosrbrOep5G
zj}-*Oza}Y_Y6xJ5sKtC{?}6MH_guytA~*rXvv^BaI{<|6YLX4`ZM4F%o*WHUcLq;^
z&K^W^^^KI74F@R5z)}Ha^U0DZQrD)7lvJY&@o$Qv5->hqf?JWY$R@@Olc`32=&e*q
zr*Ddy!{eIlZEw}U79Ez5|7(bP=ghb%<?k_LQqE*^WSVxuBxOmKTCNr?Rf_gXVxJi{
ziLUTQ>zQGBduE!IpwSG}cs2~zg<+)R$ZhXWBdJct?M%0%$i-fE52{`PhcqT9B)7P5
z^Wu5bSvO3v$G1tRN>i_Pn*VN5l7K{%t%Dob8^l~+$0DZ;bV1hDkxGRm`GqErNW^J=
zYD*OwagIi3BfG!7l8Cx5)fUZxeJ%q2IT^B_5+djyBM|vPjCV+WLqZ3tJK*e~g!kKw
zgA2<JD!CX11rFojluYL4<1vngFZczFiJ2hlTxSJgO!68>lJ#6L!_RG8KGSd!&>pPQ
z{EgT&X<yZpvBo%~h2VRbul)fR^J9Pvet8@TI0rSM_=;H4Zq1tJ&((PTSM{x=a5|s#
zpeT#KNi`p)GA+rtd)y|2$oBU{>D%;-@ubKDN?2jp$(0KTMl}J*bx2EozVwmK$8ktX
zrDCy!r-W_d?ILvRL7$k53$U!}8QBB9;fd<wv^g@_z&b;Clv$04wTKgq;&EAl0mQ}%
zzDP>)9_y61@0Nr<Yz6<;aNE>Dww9k2t)tQCFF>;(0YP%4j@J+aenunCvr@0Jr4Sg~
z)^FYW%0wZ8?B59K0!vCVIE52HF4@`UgOw=?0>qd1+<|DWW-)ydDBO6&{Ld@$TLhr{
z&PD=Et_F#$%Fkue7444QVmz}nzgBYL5ZiU;Pg7xr%$P|T%b@udbJF-8k99Q*U-D_q
z6THjkLDi}va>~c7@`X_OK(yqtWQ<NSDu_AhsA*LziKlUGyL`}Mh`jsxIjGgE*24Q?
z+2F?A3f(Y^!6(Fc!6FD2t;A5YixJ|kTZ9n+@X0?Ox&2N3)pK?G;F3xJ01W^2{glN<
zXZ^$_d)?M@002Kw|4tI%e;+6x=)K_rPc{}$UfQ;igAlNRD)HViroUPbKyP&;`XWaO
zHq?ZJOh9F7mj?0xHBk}8cjr|8ux3cts3L>_il%LbpUw!XYC!E6Rko_^wDdUOkod>)
zQ(zD{T5q4}5S+rHzA9kGt|XvJRUry+5FH8;2zHZKP8*UL9ROc<SdX9s)JGUV<sVD}
zYG5Nt2?EHwhCx(e5(C@7fT)r~pa-PYVCS{k8K8C{P$dOYy%tPC0O;<BOg-eN$HkVc
z6r66OOrTl-b%Ht1Zv&`y)OAWARPG6k^*SW@yQkRshEo7Apd18a3#G}a^n^}K+%cO6
z1(g|<d5nX*yB6;uFtgUJexxc3xQxPC9ptzNWDb6uv=j$0UaZD3*c0sLg8*Sjs`Aya
zvrGnt$OQPIw(x{CVM6+kA9q0No!sF;4&Q|HC`b4@)>Mf84#@U)5>d-1Ieo@TTILWj
z%P=GuUApdqD0MlaZ!YnI$OAmdCY1t(%VToLtSh5)QTk~8grnnNi)1y#{>ZFIN7E3c
z_vXfJ!WC7~SDz*7xBW39mU5Ba2~#p5(k+=Y;m`J>JA(Vuz0>Xyk=JnujvS(vR653l
zkuI{x1X#av5MWIWybQQMt5iwn8<~Lyl@{O}@En3@*)xQq>(CIIv$W$ex*-jlT|5r^
zHY*13rq|FA3>g|Rv^X@T<%fR~M=&&nk1{l~Ht5hC99xGLh*{Lml2#l-_kbfL2PF*X
z7bP=#GJ5S$)rf6CpV}hc;pmePm_i*fm`J^*e8L!6)QBBFsuns5p}(!h^vp+nv_>Ib
z<AQ{(m4J4+*V_u!FaQ;n`W)2(BTJ@H9UGJhrzZW4hbP-&ggsmtntu3zIFFPgp=T_p
rIQk*%xF(28V$85zH4GnVL>dtzo?fTocTz5=*N|erAFUT}00000A`o_+

literal 0
HcmV?d00001

diff --git a/assets/inter-roman-cyrillic.5f2c6c8c.woff2 b/assets/inter-roman-cyrillic.5f2c6c8c.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..a20adc161f433a7c4e3d92306301b9228bcf9fb4
GIT binary patch
literal 16780
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

literal 0
HcmV?d00001

diff --git a/assets/inter-roman-greek-ext.ab0619bc.woff2 b/assets/inter-roman-greek-ext.ab0619bc.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..e3b0be76db2641253744aa613469eedb118667da
GIT binary patch
literal 11808
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
O1{o}0SRMEP0000Yp_Hru

literal 0
HcmV?d00001

diff --git a/assets/inter-roman-greek.d5a6d92a.woff2 b/assets/inter-roman-greek.d5a6d92a.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..f790e047daa346583880da2be470431e35aa6054
GIT binary patch
literal 21776
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
De!(H(

literal 0
HcmV?d00001

diff --git a/assets/inter-roman-latin-ext.0030eebd.woff2 b/assets/inter-roman-latin-ext.0030eebd.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..715bd903b9b14d22a056f10e6d13b8d7e0acce57
GIT binary patch
literal 59608
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

literal 0
HcmV?d00001

diff --git a/assets/inter-roman-latin.2ed14f66.woff2 b/assets/inter-roman-latin.2ed14f66.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..a540b7afe7a46b9ff1412f433cd5180a9a9ab77d
GIT binary patch
literal 42464
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

literal 0
HcmV?d00001

diff --git a/assets/inter-roman-vietnamese.14ce25a6.woff2 b/assets/inter-roman-vietnamese.14ce25a6.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..5a9f9cb9ca0cd78b6ea2f3e5c9d2838dc8895598
GIT binary patch
literal 8492
zcmV+{A=BP>Pew8T0RR9103j>@5dZ)H07h5<03gEv0|eaw00000000000000000000
z0000Qfg~G@2plRuNLE2of^Y_4KT}jeRDl`*f;ca13aJRB4KTl60X7081B4(8f)W4(
zAO(aP2Ot}wL8BwA#{rDwTbk^j37MN0nnkm<&CYCgamAG{BQEv-@{h({JoW2WsiKJ{
zny6DpNHPoG)7pQYy0^RMEdaY!8%0bCP)`3Bl0b67#zmoxM+wMNKk&@$|J=(RT-bHH
z&ZRfSMH4riXiQO2mtGhuDmm0S*_?%n8{4L$t(=MqgOqF)PiZY%M!9Mg`Sy%wXsdWi
zi&vE7_{K|0QofPlA|)dwE)T@Ldw-UVjnSme!@vrsm!}gjPXlfXhXJSKzO~;D_{{Ft
zj#v{*BuL~hh*>+q?$fMk<x#~#q>0}-VxizyHmlss&T2(Vn%$U|B3849(nV<Ci0q*w
zw$Qrs&ctrDS}>*F&`?B==1_Ccqdm|ZONTW&&@StM@DVh$ga-iLzu~Y&<Pq6`hGCNX
z5K}aB;FNUZqKePhKmBKzGY@j;ow_5N8Ky`n{icLc{APGvmqJ*IKs)^|r~(Wk#-dD}
zh_9BYP{pL`T=Uh1mZ{6FP}SC|b+l@OCe^^G?($UfKt*JHU?mi=8L)SdJb@<xGl0Mo
zZ`!eBDvblC-<oR~9n%i6m%(B}v!H|1)U{Bsys=|D6u<yvu2UAb?%Gb$7{PFjkK!qU
zKmjW|x8|3YQ35t-mCZW`%_`!uIXB568qqQ22MS_>GUY_3sURj%X_ncf<dl}HQD;4^
zjoNLq-43Yrbbu>PmoA3C17NwajDXbzt)aEFj@Hu#+DKbyD?gcrUjTvlky0JwkaT2p
z8AY2Qu-I6`8`6=EbfhC4=}1R9)LA0?t`iZ766832kO=LeFLgp3u?_&16bTh}*?wY`
z29u=(+z0CbsIRUF)!9(t07}m;w`r94SH>0B--x_ovEiXmZ)gc(sTKfsm$@cOl_kKB
zN)2Gol=8c&Goqr1n?d<dSy^QVtP#XCn(;G2ESc)-m%DMrUFMmn`vZ|h31|#GKom`-
znS56Mq{Xz1R?zzCIw+Ec@{sMHXbfUY6XTlU5jY7cE+yp?0vz3VL1r48r$K{48#F=b
ziG>6e5Jt%HJd<)iXHgQ)^Rhmn93`fF;Kl{9m&So$tpP#T0KFe7K@E#vfJ8{t0S5CS
zV4r0~E^7FF25T$%Y^d(U#(j8H@?`KvynmwSL7-2301rqk_+P&ibaEe_Wl#Eizfb8?
zhcppoL><wkRKJO+0I(p2v3`FE8J&dbpa8$RS_t6fr@?*z`VN5W0Q4U~QhKp>neROy
zplht+UGz<d2u)6Ur$PFsB=kC8fy57<#O*R%)*>3~5sWb+6fE|u>f6a8;ijibrcN!R
z%OtvX+N^2PENMf_Qh3-^ZZBP0X~#^do&u@bUbbu<9d(f8Z;AjxmY~QZqKntoYS(Di
zuT}z<nJEW(U}(1E0Pl36eBsMn$cvy<um)dxXv!~(i-wP_1)osCi;D;T*8+=AF#zZY
zK!XF=iGV=h5Wreoz*gw$c0&hJ2*7GyPM=F*74P^in{%T)de8?71Oi2g10^{EWu*g^
z&<3h86sV=3ww^XK44z(DEbscUKzQ;-kyy}xg^blSwdf5EZvSiN`(~gJAtjPQF8y=6
zYbds3ez+eHMT(6_Welrilz(3qI$*hp>datJqJdZomZdPu<dI{m#-W5;f=hv?O1?!1
zi;Y1m@TjrWiachVRf^SkfW~;MO|S-Ktx4A7(|X7T0*xNFQK`pG@dP2AsWvIIS-CAl
z^rqRWLX(+VJ)(_7yGq;4vfXSuNEyww%REn#=`i0@5Wq?(L@_Qrky+4#RCsf*<`9zK
zlDH0NvMK^6Ju2BKDtGCVs4k%CR5kG$ssY)s>NFvMCpctqloDU1yo2=sWVGFV@xOZs
z8Je~B$nL}1Z$Ztb6hwWg5$8fQapIDgi53Qph^mk*Hojm4My|x$^mrcA%T`Sw%dY^}
znZTQ{7W1K8YB{;I0Fw~8eEfiYFyufL?gUqb%oUWvLO~8<`P~D}eM2AkS6`i^g#Dt(
zs7erIq=p4jf=yCgC)NEzzVhZKFM99dw$7%-d+enbyZcUaUTOK=Qz`MmVcC*x((=No
zf=eB6X&VM<(ju}X3Cu>1$rdt2H7O0#$CpeKG|Q8X6ar`_F6r@xQM)B!XfbODc&O_Q
zYuK=*qg3fxHX8EAGMe{pF<4BgBpdBUCLh^A!qyp`s>or4AgGzw9IG?7!)~nCUHi02
zR=O_GM(k#zdYSbSujOV(`(?9{=^5o5Nh@6-on%Z#U0)<j2GS{Q;YMp!T8OTFIj&6%
z&+MW`BadlpR3fG6lh?yc0ku{1sRN=}ZD~Rnq<*G0XwV<XK>fldj0x&5kM!L@R5=B~
zvSP~{r#D|*3UxTEyXk4ArojO<v`}*;HV_SCuv$IPi^aA~FGcDg_49`Kr0<bGd3>;^
z83*hm!k#W19N#u`S!$4EzN@o}Usi<>v{*o09>D?P1H{Uf4v~WDJ}OFq@w;d=_t=G#
zE%!2SG|7D_ELvRgPWq?7BKmsp!@JY%061j8VVu9pYxG_w!Z$mfzG$EKp_Abu98A?<
z-y@*>`n#7Ib_*@bmHh>OtL6=E6MuZ}oM=+c6W?`V_sp3rAg1Q~`(FGHX1(FMh%HY*
zhCKBpziR8y@4u_2$xBmx`7>MAV@;%O@4x?ttt-(3mNQHVe+Lh>hyC5hH&lIih2v0w
z*?~XBIz+|)Sp1nvk2<4<SN9yfwf(tEJ+|il4>n$!**fOAv8ReOGv?z?*U6Lbes-*E
z?bVuv&jtEM7j>-gm3rEC|L>!8GDPg$vGZ)rrjc&nw#^^tB0uT*UB!C~YB%Jckm?K#
z`_7o4(kJjuJ^z+IefzB~<^MU~b82&=>E+^d5^#ur$A9IC1OM9m<j4yboLliz?k(sA
zhofh>cQf{8zn(YT2XlOaA8EgPb28~R%>6Rd`Af}br*}^MPVWj1b~Sx9^pyGe;E`=V
z9JHV6Onqm1abu5kTkGVS>x-v6`R=K|bP$0JN!Y+y21{<*s8DR)xTK3OuMSePASC<z
z)RxiIsjYN`dV6bXbgr?8iz6q#dSesk`0-8LuTGw55+_wB!CC(l3mYEmh{lKW{~FNi
zR+k(rXU}rZu85BAoBkauS;#pZ*WWzlxO(6q_}@(W28O;krae<{It%)y4E5Fozi9IG
zn+#RsyC$*>t3QVw$5(AEq846U_kcCO$xzWTefN|@I83w!$aq#D8jekW+S2#lO31#a
z0f;h%9lCR|c-}>L<O1{Hjx&ety*QydF|zvgNc*QO3DmInBhD+Q&RgcMFRQ7nEt@-k
zm3Hxmg?*<!vMi}DTT=O0+5Gt{v@kmW(L-0i_I>i>*KbBw)jieH((n|B54rsjLtfns
z$=v;w4V;%RhF|P#vTS@TAEZcjUtDnZ7vb1}*c%rvg!cX|UcA1sy``aX+~dazV^<6H
zwRaxBipRFREF3v-`HfG`{Vy-FcwJ*tlf0@m4MVJdZbr3}%PaOg+>rm|f4^*BzsjUs
zfy3;>;i%=x+rCeJeA^OTT&HVkX<oJUmv&ESvizfIMSW#WWz~#D%GvuSZL#z<Rc)-?
zP`O}+LJ6#;Loc^Qi!Hc5QYPAW=R&h^LNh4NAO@=_IM(*-ozL2WliHwCCEC}PDZHP5
zKa<b?qxT2AYx8OZGbF9$t2tKBM|+wYwri9)%&`+EYclyGlF0CE*FUl2q1Dzyy4g$k
zTiw$tmM<2zO<H~Mh_0e~(g;1Ne34rS1k0A0zB0575CGu7KGCSsu)k#h8cZ#L3LC64
zqgaCtK=}>NNQ@-HhZs`uqbP?xlA*L62Q_ibXqGp&NP=*eq^O9O`zjCtX$b1JNT10;
zWdB}Vu*d*N#7M6P80jS}lcZ<lBx1Z<J?25k5_>$TV~nbl{<sp_UpxS8^3Dfi*fi)+
zVZ<ZKu*qIJ*<`Q!*<`PzY_dm#aat<5({4FY5$Ggpju}V&UKvq{6Ij#rR4Y&S)iQAt
zq_o6iQKu}ne2Qo#(zO&@b6lv_nv+aQ$a5$n&!Ge@xYIs{Pyz?>@N#{WsN7&?W>Yp;
zaKmrtVi3`pR<dAXzxLp1u-ODZ{0sw5oXLhmM+ED*gBgrR52QN%aM)R(uyS2PPjlHK
zYo#l7$}7QOiaW7k@59;#s{k;cZRDGNk(;fAV|2`*%DnUdo^{8B_D(?nYaOpWW{_*i
z!Ro!u&gy-w6Xbdi38{Ktq$lNi8e;X*Ijp{t03|gXzZ<tQz=qD>YGE`}^zOw$bWb%$
ziQnIwTGk;Z!)h6adRfb~kECc5r)t@f+G%gSE+g7?hafW)btanagbSWC8wvpy=MJ7_
ze*X6=v*Xv-bDs^N005u@I3ivu6K3IRcRqnoRX!i2C?b`tPRVR1@eDJ=Ap0$cjSY}N
z&5Pm+P?Jx1c+#`6<N16hs+0I9v*~=bNXc9-!ZUykz#47yP<K87LCr(?IKV*GalANR
zaa<>g*7&kICA0PL40khY<hjtBPe_m|6IO&fA>-&E88iKVLV9peyYdMfz%0vi#dU_Q
zMmKJXfgk6&EIhV=o1&={9FEpTqf@w8#e}IQWWVG%xp}#K8^3`Wl=$nnVy-$RGifWc
z1|sd)BW@hHx{H`7l8B*Wz=KQA(uTNv#-nN&;1s2fiNXkOU|ayJ^VYLQ0MyPUVwFWQ
zI4x?}P}87E3v&64-vTNos%fCG!H_rO#9f`PQI$(k=wx?5#L3zXM6~Q-1G=~b4qza0
zS6pY<Y80@Qp!?sK=Q}gH8aDKD3Gx3hDKi9cXgpZ}0R#nVVh2E7062`?YMbn2;UB!g
zhg@KU>)b)|kPX_WXVt5>^>2Nyu&(P)VCcA*5|wc*3t0RV=fYf(8?rU`=Ck>7zLRJ2
z^OBG4DErHE<#>6wcuSysS8mjzT3TmSMO{;G)%%UhrdnB(Hbv7kUE9(2x98d`?cL!x
zrJPDmHRmJF=bZoJT<6@z5uC&y!XLrc;m!Ed_#yly{2sTHdx+b^?dN{TJ<t7?`x7_C
zWzIuCW??Z-;{v|nCy9cTOXXBc5n7`iI-yg#qj&n}OLzsJ;M?5he<DPUm=~6>+Sl(}
z_r3V*{4M@a8hn@o2oM1RGXQ{gt%^Zzt(A!l3`XUQ$tFdCwzfYbhcxL7hmA%nji`}~
zdl}M?XaR!(1~3sMC=<}qSe}tHq)FkpoKadiH={rR7ZBhAfSKqRGt#gk2NSYK;0XXl
z5LC{zw*X9K0P#sUfGAHC$Ym@yi-Z9xC{6%@o8Hy~svJC_DgcU}MW3rwn<W7{(MDX-
zLPk<D0tw(1ftlzDO#3*!lMb2D!R?>LA$LgwNvUxz3#2p?C`sQ&L@KfbuCpEVuVn)+
zhjp(f<Rzlf%=kJvSTJum*jPa(67c(b--a$;`oZB)sYIf|K}dItg3&LwUJhTx=IvEL
z-`X!=Xdd?W-!_)m;}KgiQ9LgERLLxJaZ#mu$v`HNz{W4Eb!U-C4nDS&-Q7N)9BkVd
zL1eL1Lw1zoA;^AT&1^ANj6Y}Pve}%CmD1@_RzGnZPy-w`f{Hhit@1jC9R7%zhCU6d
zX-40XZj%Ch81c!VG}8=U#%>zo-4!{-8~`wf8zLOLi4T-q^x}{~Y!RldOBki-#E51D
z;*5QQ98TCCQ2<C*$-$`z$wV6DHlY+waS%v|&MIy|4`g7#MVP7WO4($RhrW67IXi^h
z93cS6OP+o>{$Uo1pePMKb*sCoXh;_T)L{mC%2)#{L4r`2e?10AWIs}<nR|*K)VLP(
zRbafw6S$WAqfqEeB=07#1w49v&7|a~M-)s)HFP-qadMJo>%D7cM)J8`7>|HI{^-K~
z`~&!H3K+oF%eE4@@q&WUHr7jVs~o!Xm$uWAk~?8t!#gDsx?KU?rcI{<BswL8B*0Jz
zrA`8ly(c|_uA7n3-@C9oDJUxJVigv_sZ*FoS*GPV;}onp1uk$<C$%PjVcU0y13LjA
zaUxUYM{#!w`8kyDDn~nt<Mnd*7-uDAMG%(rPzj(&tz;ps!AQ>f`L$dEW_&~la&8Am
z@?1DTchW&s2!#$DCxBOj-R+$k(`GvWG<`}{qP6yBme=CKn9y4v0v#KsWYCFR#V!ye
z1Sf3;Fb!4UYSuT2D?n$K1nAmpw*>LIEAO2N`+)>?E<Ts}ZDJbd!6+LcI9dZa8LyRR
zNOjdrS~_6)D0xLvmSU1&C3Ck3;R0OZ(AZape9PfcLabb-QaLX0@m->{Q4aRDU<At2
z#YQnk$zye)NxxOWG@?pa{Yfj$;ESthRC+HS?C<Wc1|J+pNaC;DV$U;9l@S8nf{TlB
zLPy1m#TG<$PzfW#pl8oP71y!BtphUO=o+tXmQj^zDw^4@AB!~8(NTe*NdW<F5=wRR
z6Z8E1X6F*MwVUcBlBE)2n~Nz6>UN({FrChiA-lW#+*24fC;3RAro<so#^%r00|`<{
z77$wi5#@icotolyz{Sld1pynmjwsRK5=e;>57J;yb<pkxl#856+)-v@(D2wr;Z!Ia
z8-Su2b@&E_3P!uLmsDH~w2j?@ghCb?%s*Ct4vEtc891;zCJ7=$glIYqw5S^tlc|f5
zA^zme2Rs1=!5E!$Nyn8Xgs;O!6t_wFr8fF&5lW<PG34q-b9w*|%F_75;-+_pFZ1tl
z#EZB(bm1R%aq&++|8GBg%#F4hDxrS67P`#ZANtUob&d2lmYuae4ZdE8VSnFFo;mLR
zI{eL*TPfwHYH%)I{Z|&ZOYuK347)bMX|!Ml!z?Z)XN)#3d!486*txy6S+AWAnKx+0
zIOp}fI^gkf-h9FCd{)Wqb~~PQ{EKLk!v$jUAEg;XywBgQgdslrubvKvI0|O3n<E$E
ztIt={>Wtb_Ui+n7tg40{LiL)*lc4T}1d;naJ(?vaQ{=>li%GA7sVy4m<e;3<{hDTQ
zfpz(8RAj+$Jf0-v;KaGCp&;G&*6FiDL!S<h3O3N-<h?HqzWw|L)O7|QlB^7=pJp1F
zb86ZNzCPABo`-hWAyE%Yfr3aI5vbsTlQx390YH=o^0?s1ooPlGjrbst4*DCapu3Ge
zXa^FKZN$L{8Su`Oh#PZ~rv#IIw0#>8M~!XD9<l|A+XYVx@@~fiKbJ}_ww&p#)mHNP
z62Z-jfgjicFJgTk80t|lomfO3I}5&U;TDXA)NdFW)Gy~1pQm>q7PH{r;?nzlR$x#-
z?_y{%R%AmC`U(f{^L`cd%*dzC+ih-}Z1yG3-LiP`(pHzfOU|^pW2R#N)25?*fT@<k
zQAR~oZ!9EnjG*jng7{+;6A8Ll#RZ9k6(h-Hicmm|82zybhEHLdEH1vn?Gb`mayU+m
zWgebDDmJ2dl2?gzpJF~IlIJewEz1J&xtZn7fwG&CZgF<8Hpgq~gfw?@ehDXe?~kiN
zAGfd1WLk+QuMAW(rWmc^((d!=sWo-A{ci_GA=NEo#}whYzvu47zq%>bX#D>Bjl1R|
zwHfh9A3UqLgI2Gvo_4rzaBN&MbJ_2seV5~}Q9>6-uvHla0{dp{-TB%r(XJ(Mk$YsY
zYM<14e#X~hS3n<c^Fk~KRcEtC*(}b>>*B`03?@S%sWkn(g3(}%`X*o7o840lp5klv
zx^}8*=nkC_vvSJkfz*EcK;<_&<xijz-B_j-fy{Qpkw+E)LaLr<`La$a4pk{&ACQo0
zD~>M6z|indvep%PAjL)Dn82dmse+eie>@n9v1#Wx%_rut1);n&qm>u9ID(=q6k#DK
zcus&+PEBY`3h-j0zq4JXTJ2@m14PG|moJ;5X{Qsy`W<lM-O#@Pr;2~jZQX(Ui$UVk
zJG?(p&`;dV0EC~KVcOM?>#+I6i3t{8^Z2a9*B`pQk>~5gEur>|DYp{w5AMiy?&}b0
zGA5tI{`~9o%w3GkpS|@*zQGpk+i2ec?3*JFPm~++OVLP9v}V5ox~nmA{~B>v$!xc>
z7;U@4;-z5bnutQn9Oe-;x5PwVJXv58m4U*}!xRu8fGsQVpN}Zkn;?(;j919PMqsX@
zQ8|DEY&p|fKM{7mlgr)ti#?_9YOan>oT!#V4@a`JLQp)x@A6<c5nQ-d*2`pydPA_^
zMQL#L!f^OKhr{W7{ao1M4Dt;?=+*>4!wo64J}ETfgGJqe5F)r{N;AKFDTj8uSL1Uy
zwA&et&*{)^_%-WN0}$d8kB5ID;|qcdadL?UmSy77!OAXjiH<DEM8gU;&?12IQ0Y(_
zO@DvnYqd*iS1gh_bia^`xU5zK(GIpbno8a3LOHhs7R2kUW*V!aPF|QJp^$u^r+G<v
zqf_5UzdHACkEa?^r1+h8im7G7w?O0TAhx0c0osK=KxHkUI|X`(io5>=<NW2A6h+-k
zeQ!(*g6m|4l<ER+**Z9AKkQN}dwVTkt)8!1G)wGY{_%PtD^@9ic7ErjQoPyARq^=$
z-}L@(rj{d0#D-Xr$B_vTC(hpzA=OAMCP(-PpO?*M;pTT&zWm(pS0aD_g1|>~=brMP
zfL5=C$LD8;-R?-_77-kCGehZ@t5S4biNGhmHH&_UKn?YZCRe&ehX{Y8iG++2)UJ3t
zj4oG;PFw(s{&fZ3jr+)r^A|@kR3xF9jtB?Ea>nSVi@9$YT-}18go5d?&TY|UPFmy)
zWvZirs~H=wefj+$e)sy<9_Jtpsi0}65+af!bCCz({78enTM*tv1zaM;nP?OEEpl+-
z>ZndzVdFWAqjJ{v@PlHz^i7&B-7P6m4U{6h#2jPcS<%GCL)|jbq3k&t`Z{XFI%uZ0
zpJE{pivnmm0gh<+vXw=qQsjSK*rhi<G!=`btTx+2W+`aq0B`Qk?KP>eL@MnPhjw!z
zj!S8#J$rk*w-irciA2onjU}uKNRknT@cGryFEtWI!e$ytS<K+?tgKL&jT_EI>9c>Z
zpI=d!2BNT#oJ4D)!#`qNPWHFN$SKJ53AMEk2EFz_9}WcHa=ULyYZpJJJ)zz@LAdo+
zUr*&t<nuCrU5QF7Cy|`=uYcfUh1Ll;EUwXLmd+K6XOu~3{6_rx=-)Vw7w36=1gG_b
z`=oh2uty=`>xE|>QmJ1<|8_H`6J#I8!jV}pM&Mb-${H3d>06#%ysF^yVTF9zD$Qz$
zw=+g0;v^-=5sBt0%cUdWtU*|yf=}yv65wlsd_|bkc<RB0RgbP*U@eSBhrjqSTUxD5
z{+cDm<xnd)&dddJ{kgYu@8t%}{v_w0zZ7OhJKlTzB?nYl3TYZcSm|^uCKL*(3h|R<
zBwy4-0bncy#ZYKF0S5Fy1d)d2OoziQ4|yDwnUm2?2?A%Yjv|$6*x`nG6XyYdg><)B
zKx9dc^{DrQN=qkaJ$sJP#%VtP<-@b^)7JV?OJzGE&)s8$Bb^(xjKwgD_8^5}>Fn!}
z7RqEoE0|7#FeBKPXdWC13#Tm5wC*cb%E60cd;)cX1-m-LLa$nY-G#9OZg;>sZX2^(
zEI-`t^qVd+wKJ)7@^edzn)ea0S{lq{WcA=Le!u^hP97G<4Rfe)J*~7Grt@_~rqoZ@
zFDfdI9(|!&*6MLLxMKG9d$0C5kG^rDZwa%)1U`MaD@Hn(v`qFxkN0u(_I-?+F3$X!
z<2^8@z*-G<l8ka}re>WUB#R{Kb{dYXG^B#xUJhUW|723Kw{x%205rX^N%&pEE@qJ|
zpUvmT<3C4!42KDVoBlhS^%b{btyAr%r|;`xn8icS%{6PzocUMJQfA+G+UBfY<tKcg
z9=0ET!EUE*)tm3j_Z-KMb}1N>4|?xNGi80s-MeEJcw)>?`o?XX8z;_Px<eW-AxIY7
zyK(LfKl%I%FTQ521~XBv@Z3(#xGw^Nhol<)LBi0iH#Du1$*NbXv-j_3v!qDO&%e(<
z!Gc{25WHq7U{gVsh$tcyEE}|N1p>+~5Jl6CB7FFRLhgO9VhW~F=A3uA!U}Jnj^|FB
z>73KT!6*vD^cZdd+=}Bs5=mS@YG`mswX4SEkzOxJ21u9J>mtPIDEi=4Q*W-5QBK*M
zhcR34QZI@x?*TovT2QG#K!dpn1X4;Uq^v6F#YqPa2I$6)lJ2M_=efg+$z-X&(_)c8
zAVQ5RaPg9r(~r6DnFHQzg>GC^FvJ`Ei!Vn{oOtc%GRELm*La#M>IXR0#7Hw_A5URe
z6^2nbe)~?5P~L11PMIQEFuBCaE*8h6CW(p$^CA(RkK;Hc6xArfT=4zOO}OuUvR;yO
zkfb-A9y<G}``y02VDQ^O?0U>2)YHby&D^K;NG^@x<Muj6YgJu*gKNFQa?kf%PxpB9
zGP!KEhEmg3TjM%6+Ti^oojYVHkw!ZYlTwn&Qm>-gyt{Kx3oWLF&6h^uogboCQdS!5
z(JnC1;4ON!tmDa*#Q^&8a1J*wahPt7GeVeNUM{WI)NR=#2RpXdc{tEQy(E^XY(5rr
zqjsR*6?}hS=*(cP$2*kzZy<<I8}lIdmJ`kcsQ(!7lN=BICxBNfK!A*Yc<Gj7d!n%F
z_t~T+0Kj{{e7vrEvN!%2%bK>f5&+Pk01)`@QF`0@L`kO=K*aX5dtz~l49AG-2TI$o
zIxGnfH7A)0N7Xc%AdAJYbvjLhGaUmnTYGhF*-j9V;ewesc7tm>K#m60!Azw%uHJ*g
z@-W&oRM>+PqmKb{ktFTvB5G%I>?fVt!cl3zn3WTLJrRt=`%>6f0lF>48E0!}NY+r^
z3h-t%6D}#Dz<-Uve^lD^xfK=|SE5yxqD@I-86OBkf*ge~GY)rnmCIY@5-do}1>h3U
zhY>urVN`*~!z?qkmt*E|p1F>fv32J{3V{$3VG>+4JeKj|;UakMS>wiuAY2R)VBrTS
z3drzy@Srq2f#RUzxlr(eMO53tXpdc5G&ATR@NW2Lk@N}F?%>wG<+h)wTkRT4W0xIT
zZMDU^Q0^%m40cfdq}AXWTQz^#?KbIUb?087&Qc3T=&Q6KLz~P|x#hXGlGv=yAnI$e
z!+x{`W}8W((tHawYtdnb1FkoNFuZQsV!I_e)m=7CQyVV(H~HA@Nxcm|Wt+7lZo9OA
a!Vc~9U7SGB8$q3Ii#9CnAx#qS0RRAsKuhfa

literal 0
HcmV?d00001

diff --git a/assets/style.ca30dd5f.css b/assets/style.ca30dd5f.css
new file mode 100644
index 00000000..e0a02a58
--- /dev/null
+++ b/assets/style.ca30dd5f.css
@@ -0,0 +1 @@
+@charset "UTF-8";@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/zerdocs/assets/inter-roman-cyrillic.5f2c6c8c.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/zerdocs/assets/inter-roman-cyrillic-ext.e75737ce.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/zerdocs/assets/inter-roman-greek.d5a6d92a.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/zerdocs/assets/inter-roman-greek-ext.ab0619bc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/zerdocs/assets/inter-roman-latin.2ed14f66.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/zerdocs/assets/inter-roman-latin-ext.0030eebd.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/zerdocs/assets/inter-roman-vietnamese.14ce25a6.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/zerdocs/assets/inter-italic-cyrillic.ea42a392.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/zerdocs/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/zerdocs/assets/inter-italic-greek.8f4463c4.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/zerdocs/assets/inter-italic-greek-ext.4fbe9427.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/zerdocs/assets/inter-italic-latin.bd3b6f56.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/zerdocs/assets/inter-italic-latin-ext.bd8920cc.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/zerdocs/assets/inter-italic-vietnamese.6ce511fb.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white)}.dark{--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black)}:root{--vp-c-gray-1: #dddde3;--vp-c-gray-2: #e4e4e9;--vp-c-gray-3: #ebebef;--vp-c-gray-soft: rgba(142, 150, 170, .14);--vp-c-indigo-1: #3451b2;--vp-c-indigo-2: #3a5ccc;--vp-c-indigo-3: #5672cd;--vp-c-indigo-soft: rgba(100, 108, 255, .14);--vp-c-green-1: #18794e;--vp-c-green-2: #299764;--vp-c-green-3: #30a46c;--vp-c-green-soft: rgba(16, 185, 129, .14);--vp-c-yellow-1: #915930;--vp-c-yellow-2: #946300;--vp-c-yellow-3: #9f6a00;--vp-c-yellow-soft: rgba(234, 179, 8, .14);--vp-c-red-1: #b8272c;--vp-c-red-2: #d5393e;--vp-c-red-3: #e0575b;--vp-c-red-soft: rgba(244, 63, 94, .14);--vp-c-sponsor: #db2777}.dark{--vp-c-gray-1: #515c67;--vp-c-gray-2: #414853;--vp-c-gray-3: #32363f;--vp-c-gray-soft: rgba(101, 117, 133, .16);--vp-c-indigo-1: #a8b1ff;--vp-c-indigo-2: #5c73e7;--vp-c-indigo-3: #3e63dd;--vp-c-indigo-soft: rgba(100, 108, 255, .16);--vp-c-green-1: #3dd68c;--vp-c-green-2: #30a46c;--vp-c-green-3: #298459;--vp-c-green-soft: rgba(16, 185, 129, .16);--vp-c-yellow-1: #f9b44e;--vp-c-yellow-2: #da8b17;--vp-c-yellow-3: #a46a0a;--vp-c-yellow-soft: rgba(234, 179, 8, .16);--vp-c-red-1: #f66f81;--vp-c-red-2: #f14158;--vp-c-red-3: #b62a3c;--vp-c-red-soft: rgba(244, 63, 94, .16)}:root{--vp-c-bg: #ffffff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #ffffff;--vp-c-bg-soft: #f6f6f7}.dark{--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-bg-soft: #202127}:root{--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3}.dark{--vp-c-border: #3c3f44;--vp-c-divider: #2e2e32;--vp-c-gutter: #000000}:root{--vp-c-text-1: rgba(60, 60, 67);--vp-c-text-2: rgba(60, 60, 67, .78);--vp-c-text-3: rgba(60, 60, 67, .56)}.dark{--vp-c-text-1: rgba(255, 255, 245, .86);--vp-c-text-2: rgba(235, 235, 245, .6);--vp-c-text-3: rgba(235, 235, 245, .38)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-brand-1);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft)}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-footer: 10;--vp-z-index-local-nav: 20;--vp-z-index-nav: 30;--vp-z-index-layout-top: 40;--vp-z-index-backdrop: 50;--vp-z-index-sidebar: 60}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-color: var(--vp-c-brand-1);--vp-code-link-color: var(--vp-c-brand-1);--vp-code-link-hover-color: var(--vp-c-brand-2);--vp-code-bg: var(--vp-c-default-soft);--vp-code-block-color: var(--vp-c-text-2);--vp-code-block-bg: var(--vp-c-bg-alt);--vp-code-block-divider-color: var(--vp-c-gutter);--vp-code-lang-color: var(--vp-c-text-3);--vp-code-line-highlight-color: var(--vp-c-default-soft);--vp-code-line-number-color: var(--vp-c-text-3);--vp-code-line-diff-add-color: var(--vp-c-green-soft);--vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);--vp-code-line-diff-remove-color: var(--vp-c-red-soft);--vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);--vp-code-line-warning-color: var(--vp-c-yellow-soft);--vp-code-line-error-color: var(--vp-c-red-soft);--vp-code-copy-code-border-color: var(--vp-c-divider);--vp-code-copy-code-bg: var(--vp-c-bg-soft);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-c-bg);--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-copy-copied-text-content: "Copied";--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1);--vp-code-tab-active-bar-color: var(--vp-c-brand-1)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1);--vp-button-alt-border: transparent;--vp-button-alt-text: var(--vp-c-text-1);--vp-button-alt-bg: var(--vp-c-default-3);--vp-button-alt-hover-border: transparent;--vp-button-alt-hover-text: var(--vp-c-text-1);--vp-button-alt-hover-bg: var(--vp-c-default-2);--vp-button-alt-active-border: transparent;--vp-button-alt-active-text: var(--vp-c-text-1);--vp-button-alt-active-bg: var(--vp-c-default-1);--vp-button-sponsor-border: var(--vp-c-text-2);--vp-button-sponsor-text: var(--vp-c-text-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: transparent;--vp-custom-block-info-text: var(--vp-c-text-1);--vp-custom-block-info-bg: var(--vp-c-default-soft);--vp-custom-block-info-code-bg: var(--vp-c-default-soft);--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-brand-soft);--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);--vp-custom-block-warning-border: transparent;--vp-custom-block-warning-text: var(--vp-c-text-1);--vp-custom-block-warning-bg: var(--vp-c-warning-soft);--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);--vp-custom-block-danger-border: transparent;--vp-custom-block-danger-text: var(--vp-c-text-1);--vp-custom-block-danger-bg: var(--vp-c-danger-soft);--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-switch-bg-color: var(--vp-c-gray-soft)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}.hide-nav{--vp-nav-height: 0px}.hide-nav .VPSidebar{--vp-nav-height: 22px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand-1);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: transparent;--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-default-soft);--vp-badge-tip-border: transparent;--vp-badge-tip-text: var(--vp-c-brand-1);--vp-badge-tip-bg: var(--vp-c-brand-soft);--vp-badge-warning-border: transparent;--vp-badge-warning-text: var(--vp-c-warning-1);--vp-badge-warning-bg: var(--vp-c-warning-soft);--vp-badge-danger-border: transparent;--vp-badge-danger-text: var(--vp-c-danger-1);--vp-badge-danger-bg: var(--vp-c-danger-soft)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand-1);--vp-local-search-highlight-bg: var(--vp-c-brand-1);--vp-local-search-highlight-text: var(--vp-c-neutral-inverse)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}mjx-container{display:inline-block;margin:auto 2px -2px}mjx-container>svg{margin:auto}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info a,.custom-block.info code{color:var(--vp-c-brand-1)}.custom-block.info a:hover{color:var(--vp-c-brand-2)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip a,.custom-block.tip code{color:var(--vp-c-brand-1)}.custom-block.tip a:hover{color:var(--vp-c-brand-2)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning a,.custom-block.warning code{color:var(--vp-c-warning-1)}.custom-block.warning a:hover{color:var(--vp-c-warning-2)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger a,.custom-block.danger code{color:var(--vp-c-danger-1)}.custom-block.danger a:hover{color:var(--vp-c-danger-2)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details a{color:var(--vp-c-brand-1)}.custom-block.details a:hover{color:var(--vp-c-brand-2)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.dark .vp-code-light{display:none}html:not(.dark) .vp-code-dark{display:none}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:2px;border-radius:2px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;user-select:none;opacity:0;text-decoration:none;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor{top:24px}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand-1);text-decoration:underline;text-underline-offset:2px;transition:color .25s,opacity .25s}.vp-doc a:hover{color:var(--vp-c-brand-2)}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block div[class*=language-]{margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs{margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size);color:var(--vp-code-color)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;background-color:var(--vp-code-bg);transition:color .25s,background-color .5s}.vp-doc a>code{color:var(--vp-code-link-color)}.vp-doc a:hover>code{color:var(--vp-code-link-hover-color)}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc div[class*=language-],.vp-block{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-],.vp-block{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;transform:translate(calc(-100% - 1px));display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;padding:0 10px;width:fit-content;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:var(--vp-code-copy-copied-text-content)}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-code-lang-color);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:after{content:""}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-default-soft)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge[data-v-9613cc9f]{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:500;transform:translateY(-2px)}.vp-doc h1>.VPBadge[data-v-9613cc9f]{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge[data-v-9613cc9f]{margin-top:3px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge[data-v-9613cc9f]{vertical-align:middle}.vp-doc h4>.VPBadge[data-v-9613cc9f],.vp-doc h5>.VPBadge[data-v-9613cc9f],.vp-doc h6>.VPBadge[data-v-9613cc9f]{vertical-align:middle;line-height:18px}.VPBadge.info[data-v-9613cc9f]{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip[data-v-9613cc9f]{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning[data-v-9613cc9f]{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger[data-v-9613cc9f]{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}.NotFound[data-v-f87ff6e4]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-f87ff6e4]{padding:96px 32px 168px}}.code[data-v-f87ff6e4]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-f87ff6e4]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-f87ff6e4]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-f87ff6e4]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-f87ff6e4]{padding-top:20px}.link[data-v-f87ff6e4]{display:inline-block;border:1px solid var(--vp-c-brand-1);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:border-color .25s,color .25s}.link[data-v-f87ff6e4]:hover{border-color:var(--vp-c-brand-2);color:var(--vp-c-brand-2)}.root[data-v-d0ee3533]{position:relative;z-index:1}.nested[data-v-d0ee3533]{padding-left:16px}.outline-link[data-v-d0ee3533]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s;font-weight:400}.outline-link[data-v-d0ee3533]:hover,.outline-link.active[data-v-d0ee3533]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-d0ee3533]{padding-left:13px}.VPDocAsideOutline[data-v-d330b1bb]{display:none}.VPDocAsideOutline.has-outline[data-v-d330b1bb]{display:block}.content[data-v-d330b1bb]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-d330b1bb]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:2px;border-radius:2px;height:18px;background-color:var(--vp-c-brand-1);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-d330b1bb]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-7e05ebdb]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-7e05ebdb]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-ef5dee53]{margin-top:64px}.edit-info[data-v-ef5dee53]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-ef5dee53]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-ef5dee53]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.edit-link-button[data-v-ef5dee53]:hover{color:var(--vp-c-brand-2)}.edit-link-icon[data-v-ef5dee53]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-ef5dee53]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-ef5dee53]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-ef5dee53]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-ef5dee53]:hover{border-color:var(--vp-c-brand-1)}.pager-link.next[data-v-ef5dee53]{margin-left:auto;text-align:right}.desc[data-v-ef5dee53]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-ef5dee53]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.VPDocOutlineDropdown[data-v-eadfb36b]{margin-bottom:48px}.VPDocOutlineDropdown button[data-v-eadfb36b]{display:block;font-size:14px;font-weight:500;line-height:24px;border:1px solid var(--vp-c-border);padding:4px 12px;color:var(--vp-c-text-2);background-color:var(--vp-c-default-soft);border-radius:8px;transition:color .5s}.VPDocOutlineDropdown button[data-v-eadfb36b]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPDocOutlineDropdown button.open[data-v-eadfb36b]{color:var(--vp-c-text-1)}.icon[data-v-eadfb36b]{display:inline-block;vertical-align:middle;width:16px;height:16px;fill:currentColor}[data-v-eadfb36b] .outline-link{font-size:14px;font-weight:400}.open>.icon[data-v-eadfb36b]{transform:rotate(90deg)}.items[data-v-eadfb36b]{margin-top:12px;border-left:1px solid var(--vp-c-divider)}.VPDoc[data-v-6b87e69f]{padding:32px 24px 96px;width:100%}.VPDoc .VPDocOutlineDropdown[data-v-6b87e69f]{display:none}@media (min-width: 960px) and (max-width: 1279px){.VPDoc .VPDocOutlineDropdown[data-v-6b87e69f]{display:block}}@media (min-width: 768px){.VPDoc[data-v-6b87e69f]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-6b87e69f]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-6b87e69f]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-6b87e69f]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-6b87e69f]{display:flex;justify-content:center}.VPDoc .aside[data-v-6b87e69f]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-6b87e69f]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-6b87e69f]{max-width:1104px}}.container[data-v-6b87e69f]{margin:0 auto;width:100%}.aside[data-v-6b87e69f]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-6b87e69f]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-6b87e69f]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-6b87e69f]::-webkit-scrollbar{display:none}.aside-curtain[data-v-6b87e69f]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-6b87e69f]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));padding-bottom:32px}.content[data-v-6b87e69f]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-6b87e69f]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-6b87e69f]{order:1;margin:0;min-width:640px}}.content-container[data-v-6b87e69f]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-6b87e69f]{max-width:688px}.external-link-icon-enabled[data-v-6b87e69f] :is(.vp-doc a[href*="://"],.vp-doc a[target=_blank]):after{content:"";color:currentColor}.VPButton[data-v-c1c5efc1]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-c1c5efc1]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-c1c5efc1]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-c1c5efc1]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-c1c5efc1]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-c1c5efc1]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-c1c5efc1]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-c1c5efc1]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-c1c5efc1]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-c1c5efc1]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-c1c5efc1]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-c1c5efc1]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-c1c5efc1]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-8426fc1a]{display:none}.dark .VPImage.light[data-v-8426fc1a]{display:none}.VPHero[data-v-da5d1713]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-da5d1713]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-da5d1713]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-da5d1713]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-da5d1713]{flex-direction:row}}.main[data-v-da5d1713]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-da5d1713]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-da5d1713]{text-align:left}}@media (min-width: 960px){.main[data-v-da5d1713]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-da5d1713]{max-width:592px}}.name[data-v-da5d1713],.text[data-v-da5d1713]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-da5d1713],.VPHero.has-image .text[data-v-da5d1713]{margin:0 auto}.name[data-v-da5d1713]{color:var(--vp-home-hero-name-color)}.clip[data-v-da5d1713]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-da5d1713],.text[data-v-da5d1713]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-da5d1713],.text[data-v-da5d1713]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-da5d1713],.VPHero.has-image .text[data-v-da5d1713]{margin:0}}.tagline[data-v-da5d1713]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-da5d1713]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-da5d1713]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-da5d1713]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-da5d1713]{margin:0}}.actions[data-v-da5d1713]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-da5d1713]{justify-content:center}@media (min-width: 640px){.actions[data-v-da5d1713]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-da5d1713]{justify-content:flex-start}}.action[data-v-da5d1713]{flex-shrink:0;padding:6px}.image[data-v-da5d1713]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-da5d1713]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-da5d1713]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-da5d1713]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-da5d1713]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-da5d1713]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-da5d1713]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-da5d1713]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-da5d1713]{width:320px;height:320px}}[data-v-da5d1713] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-da5d1713] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-da5d1713] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-33204567]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-33204567]:hover{border-color:var(--vp-c-brand-1)}.box[data-v-33204567]{display:flex;flex-direction:column;padding:24px;height:100%}.box[data-v-33204567]>.VPImage{margin-bottom:20px}.icon[data-v-33204567]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-default-soft);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-33204567]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-33204567]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-33204567]{padding-top:8px}.link-text-value[data-v-33204567]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.link-text-icon[data-v-33204567]{display:inline-block;margin-left:6px;width:14px;height:14px;fill:currentColor}.VPFeatures[data-v-a6181336]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-a6181336]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-a6181336]{padding:0 64px}}.container[data-v-a6181336]{margin:0 auto;max-width:1152px}.items[data-v-a6181336]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-a6181336]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336]{width:50%}.item.grid-3[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-a6181336]{width:25%}}.VPHome[data-v-d82743a8]{padding-bottom:96px}.VPHome[data-v-d82743a8] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-d82743a8]{padding-bottom:128px}}.VPContent[data-v-669faec9]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-669faec9]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-669faec9]{margin:0}@media (min-width: 960px){.VPContent[data-v-669faec9]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-669faec9]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-669faec9]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-e03eb2e1]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-e03eb2e1]{display:none}@media (min-width: 768px){.VPFooter[data-v-e03eb2e1]{padding:32px}}.container[data-v-e03eb2e1]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-e03eb2e1],.copyright[data-v-e03eb2e1]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-1c15a60a]{padding:12px 20px 11px}.VPLocalNavOutlineDropdown button[data-v-1c15a60a]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-1c15a60a]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-1c15a60a]{color:var(--vp-c-text-1)}.icon[data-v-1c15a60a]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-1c15a60a] .outline-link{font-size:14px;padding:2px 0}.open>.icon[data-v-1c15a60a]{transform:rotate(90deg)}.items[data-v-1c15a60a]{position:absolute;top:64px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}.header[data-v-1c15a60a]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-1c15a60a]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.outline[data-v-1c15a60a]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-1c15a60a]{transition:all .2s ease-out}.flyout-leave-active[data-v-1c15a60a]{transition:all .15s ease-in}.flyout-enter-from[data-v-1c15a60a],.flyout-leave-to[data-v-1c15a60a]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-79c8c1df]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--vp-c-gutter);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-79c8c1df]{position:fixed}.VPLocalNav.reached-top[data-v-79c8c1df]{border-top-color:transparent}@media (min-width: 960px){.VPLocalNav[data-v-79c8c1df]{display:none}}.menu[data-v-79c8c1df]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-79c8c1df]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-79c8c1df]{padding:0 32px}}.menu-icon[data-v-79c8c1df]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPOutlineDropdown[data-v-79c8c1df]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-79c8c1df]{padding:12px 32px 11px}}.VPSwitch[data-v-b1685198]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s!important}.VPSwitch[data-v-b1685198]:hover{border-color:var(--vp-c-brand-1)}.check[data-v-b1685198]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s!important}.icon[data-v-b1685198]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-b1685198] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-b1685198] svg{fill:var(--vp-c-text-1);transition:opacity .25s!important}.sun[data-v-ce54a7d1]{opacity:1}.moon[data-v-ce54a7d1],.dark .sun[data-v-ce54a7d1]{opacity:0}.dark .moon[data-v-ce54a7d1]{opacity:1}.dark .VPSwitchAppearance[data-v-ce54a7d1] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-e6aabb21]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-e6aabb21]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-43f1e123]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-43f1e123]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-43f1e123]:hover{color:var(--vp-c-brand-1);background-color:var(--vp-c-default-soft)}.link.active[data-v-43f1e123]{color:var(--vp-c-brand-1)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-e7ea1737]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-e7ea1737] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-e7ea1737] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-e7ea1737] .group:last-child{padding-bottom:0}.VPMenu[data-v-e7ea1737] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-e7ea1737] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-e7ea1737] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-e7ea1737] .action{padding-left:24px}.VPFlyout[data-v-9c007e85]{position:relative}.VPFlyout[data-v-9c007e85]:hover{color:var(--vp-c-brand-1);transition:color .25s}.VPFlyout:hover .text[data-v-9c007e85]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-9c007e85]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-9c007e85]{color:var(--vp-c-brand-1)}.VPFlyout.active:hover .text[data-v-9c007e85]{color:var(--vp-c-brand-2)}.VPFlyout:hover .menu[data-v-9c007e85],.button[aria-expanded=true]+.menu[data-v-9c007e85]{opacity:1;visibility:visible;transform:translateY(0)}.button[aria-expanded=false]+.menu[data-v-9c007e85]{opacity:0;visibility:hidden;transform:translateY(0)}.button[data-v-9c007e85]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-9c007e85]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-9c007e85]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-9c007e85]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-9c007e85]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-9c007e85]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-f80f8133]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-f80f8133]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-f80f8133]>svg{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-7bc22406]{display:flex;justify-content:center}.VPNavBarExtra[data-v-40855f84]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-40855f84]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-40855f84]{display:none}}.trans-title[data-v-40855f84]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-40855f84],.item.social-links[data-v-40855f84]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-40855f84]{min-width:176px}.appearance-action[data-v-40855f84]{margin-right:-2px}.social-links-list[data-v-40855f84]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-42ef59de]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-42ef59de],.VPNavBarMenuLink[data-v-42ef59de]:hover{color:var(--vp-c-brand-1)}.VPNavBarMenu[data-v-7f418b0f]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-7f418b0f]{display:flex}}/*! @docsearch/css 3.5.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}[class*=DocSearch]{--docsearch-primary-color: var(--vp-c-brand-1);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-background: transparent;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark [class*=DocSearch]{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-default-soft);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:48px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand-1);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{direction:ltr;display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button .DocSearch-Button-Key:first-child{font-size:0!important}.DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"Ctrl";font-size:12px;letter-spacing:normal;color:var(--docsearch-muted-color)}.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"⌘"}.DocSearch-Button .DocSearch-Button-Key:first-child>*{display:none}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand-1);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-default-soft)}.DocSearch-Screen-Icon>svg{margin:auto}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.title[data-v-86d1bed8]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-86d1bed8]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-86d1bed8]{border-bottom-color:var(--vp-c-divider)}}[data-v-86d1bed8] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-74abcbb9]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-74abcbb9]{display:flex;align-items:center}}.title[data-v-74abcbb9]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-a0fd61f4]{position:relative;border-bottom:1px solid transparent;padding:0 8px 0 24px;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap}@media (min-width: 768px){.VPNavBar[data-v-a0fd61f4]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar[data-v-a0fd61f4]{padding:0}.VPNavBar[data-v-a0fd61f4]:not(.has-sidebar):not(.top){border-bottom-color:var(--vp-c-gutter);background-color:var(--vp-nav-bg-color)}}.container[data-v-a0fd61f4]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-a0fd61f4],.container>.content[data-v-a0fd61f4]{pointer-events:none}.container[data-v-a0fd61f4] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-a0fd61f4]{max-width:100%}}.title[data-v-a0fd61f4]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-a0fd61f4]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-a0fd61f4]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-a0fd61f4]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-a0fd61f4]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-a0fd61f4]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-a0fd61f4]{display:flex;justify-content:flex-end;align-items:center;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.top) .content-body[data-v-a0fd61f4]{position:relative;background-color:var(--vp-nav-bg-color)}}@media (max-width: 767px){.content-body[data-v-a0fd61f4]{column-gap:.5rem}}.menu+.translations[data-v-a0fd61f4]:before,.menu+.appearance[data-v-a0fd61f4]:before,.menu+.social-links[data-v-a0fd61f4]:before,.translations+.appearance[data-v-a0fd61f4]:before,.appearance+.social-links[data-v-a0fd61f4]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-a0fd61f4]:before,.translations+.appearance[data-v-a0fd61f4]:before{margin-right:16px}.appearance+.social-links[data-v-a0fd61f4]:before{margin-left:16px}.social-links[data-v-a0fd61f4]{margin-right:-8px}@media (min-width: 960px){.VPNavBar.has-sidebar .curtain[data-v-a0fd61f4]{position:absolute;right:0;bottom:-31px;width:calc(100% - var(--vp-sidebar-width));height:32px}.VPNavBar.has-sidebar .curtain[data-v-a0fd61f4]:before{display:block;width:100%;height:32px;background:linear-gradient(var(--vp-c-bg),transparent 70%);content:""}}@media (min-width: 1440px){.VPNavBar.has-sidebar .curtain[data-v-a0fd61f4]{width:calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)))}}.VPNavScreenAppearance[data-v-add8f686]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-add8f686]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenMenuLink[data-v-05f27b2a]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-05f27b2a]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupLink[data-v-19976ae1]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-19976ae1]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-1ecb84e7]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-1ecb84e7]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-1ecb84e7]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-1ecb84e7]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-1ecb84e7]{padding-bottom:6px;color:var(--vp-c-brand-1)}.VPNavScreenMenuGroup.open .button-icon[data-v-1ecb84e7]{transform:rotate(45deg)}.button[data-v-1ecb84e7]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-1ecb84e7]:hover{color:var(--vp-c-brand-1)}.button-icon[data-v-1ecb84e7]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-1ecb84e7]:first-child{padding-top:0}.group+.group[data-v-1ecb84e7],.group+.item[data-v-1ecb84e7]{padding-top:4px}.VPNavScreenTranslations[data-v-d72aa483]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-d72aa483]{height:auto}.title[data-v-d72aa483]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-d72aa483]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-d72aa483]{margin-right:8px}.icon.chevron[data-v-d72aa483]{margin-left:4px}.list[data-v-d72aa483]{padding:4px 0 0 24px}.link[data-v-d72aa483]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-cc5739dd]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-cc5739dd],.VPNavScreen.fade-leave-active[data-v-cc5739dd]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-cc5739dd],.VPNavScreen.fade-leave-active .container[data-v-cc5739dd]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-cc5739dd],.VPNavScreen.fade-leave-to[data-v-cc5739dd]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-cc5739dd],.VPNavScreen.fade-leave-to .container[data-v-cc5739dd]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-cc5739dd]{display:none}}.container[data-v-cc5739dd]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-cc5739dd],.menu+.appearance[data-v-cc5739dd],.translations+.appearance[data-v-cc5739dd]{margin-top:24px}.menu+.social-links[data-v-cc5739dd]{margin-top:16px}.appearance+.social-links[data-v-cc5739dd]{margin-top:16px}.VPNav[data-v-ae24b3ad]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-ae24b3ad]{position:fixed}}.VPSidebarItem.level-0[data-v-e31bd47b]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-e31bd47b]{padding-bottom:10px}.item[data-v-e31bd47b]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-e31bd47b]{cursor:pointer}.indicator[data-v-e31bd47b]{position:absolute;top:6px;bottom:6px;left:-17px;width:2px;border-radius:2px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-e31bd47b]{background-color:var(--vp-c-brand-1)}.link[data-v-e31bd47b]{display:flex;align-items:center;flex-grow:1}.text[data-v-e31bd47b]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-e31bd47b]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-e31bd47b],.VPSidebarItem.level-2 .text[data-v-e31bd47b],.VPSidebarItem.level-3 .text[data-v-e31bd47b],.VPSidebarItem.level-4 .text[data-v-e31bd47b],.VPSidebarItem.level-5 .text[data-v-e31bd47b]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-e31bd47b]{color:var(--vp-c-brand-1)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-1.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-2.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-3.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-4.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-5.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-e31bd47b]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-e31bd47b]{color:var(--vp-c-brand-1)}.caret[data-v-e31bd47b]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-e31bd47b]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-e31bd47b]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-e31bd47b]{width:18px;height:18px;fill:currentColor;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-e31bd47b]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-e31bd47b],.VPSidebarItem.level-2 .items[data-v-e31bd47b],.VPSidebarItem.level-3 .items[data-v-e31bd47b],.VPSidebarItem.level-4 .items[data-v-e31bd47b],.VPSidebarItem.level-5 .items[data-v-e31bd47b]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-e31bd47b]{display:none}.VPSidebar[data-v-b00e2fdd]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-b00e2fdd]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-b00e2fdd]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-b00e2fdd]{z-index:1;padding-top:var(--vp-nav-height);padding-bottom:128px;width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-b00e2fdd]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-b00e2fdd]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-b00e2fdd]{outline:0}.group+.group[data-v-b00e2fdd]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-b00e2fdd]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSkipLink[data-v-0f60ec36]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand-1);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-0f60ec36]:focus{height:auto;width:auto;clip:auto;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-0f60ec36]{top:14px;left:16px}}.Layout[data-v-5a346dfe]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-96bd69d5]{border-top:1px solid var(--vp-c-gutter);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-96bd69d5]{margin:0 auto;max-width:1152px}.love[data-v-96bd69d5]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-96bd69d5]{width:28px;height:28px;fill:currentColor}.message[data-v-96bd69d5]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-96bd69d5]{padding-top:32px}.action[data-v-96bd69d5]{padding-top:40px;text-align:center}.VPTeamPage[data-v-10b00018]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-10b00018]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-10b00018-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-10b00018-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:96px}}.VPTeamMembers[data-v-10b00018-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-10b00018-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-10b00018-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-28528e42]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-28528e42]{padding:32px}.VPTeamMembersItem.small .data[data-v-28528e42]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-28528e42]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-28528e42]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-28528e42]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-28528e42]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-28528e42]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-28528e42]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-28528e42]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-28528e42]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-28528e42]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-28528e42]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-28528e42]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-28528e42]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-28528e42]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-28528e42]{text-align:center}.avatar[data-v-28528e42]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-28528e42]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-28528e42]{margin:0;font-weight:600}.affiliation[data-v-28528e42]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-28528e42]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-28528e42]:hover{color:var(--vp-c-brand-1)}.desc[data-v-28528e42]{margin:0 auto}.desc[data-v-28528e42] a{font-weight:500;color:var(--vp-c-brand-1);text-decoration-style:dotted;transition:color .25s}.links[data-v-28528e42]{display:flex;justify-content:center;height:56px}.sp-link[data-v-28528e42]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-28528e42]:hover,.sp .sp-link.link[data-v-28528e42]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-28528e42]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-6cb0dbc4]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-6cb0dbc4]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-6cb0dbc4]{max-width:876px}.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-6cb0dbc4]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-6cb0dbc4]{max-width:760px}.container[data-v-6cb0dbc4]{display:grid;gap:24px;margin:0 auto;max-width:1152px}svg[data-v-b64031fa]{margin-top:20px;width:100%;height:200px;cursor:pointer}.opt-wrap[data-v-6e6d96d1]{display:flex;flex-direction:column}.opt-wrap .opts[data-v-6e6d96d1]{display:flex;margin-top:10px}.opt-wrap .opts button[data-v-6e6d96d1]{color:#fff;border-radius:4px;padding:0 6px;margin-right:10px;border:1px solid #ccc;background-color:#4e9ef5}button[data-v-fcdef9a9]{color:#fff;border-radius:4px;padding:0 6px;margin-right:10px;border:1px solid #ccc;background-color:#6fadef}select[data-v-fcdef9a9]{margin:0 16px 0 6px;border:1px solid #ccc;border-radius:3px;padding:0 4px}textarea[data-v-fcdef9a9],iframe[data-v-fcdef9a9]{width:100%;height:200px;margin-top:10px}img[data-v-fcdef9a9]{width:100%;height:200px}.demo[data-v-9caf4c6f]{font-size:14px;background:rgba(125,125,125,.04);padding:1em;margin-bottom:10px;border-radius:8px;position:relative}.demo .demo-source-link[data-v-9caf4c6f]{position:absolute;top:3px;right:6px;font-size:12px!important;margin:0}.loader[data-v-4fdc7ada]{position:relative;color:#a886f2;width:60px;height:60px}.loader div[data-v-4fdc7ada]{background-color:currentColor}.loader div[data-v-4fdc7ada]:nth-child(1){width:16px;height:16px;position:absolute;bottom:32%;left:18%;border-radius:50%;transform-origin:center bottom;animation:ball-jump-4fdc7ada .6s ease-in-out infinite}.loader div[data-v-4fdc7ada]:not(:nth-child(1)){width:20px;height:4px;position:absolute;top:0;right:0;transform:translate(60%);animation:ball-steps-4fdc7ada 1.8s linear infinite}.loader div[data-v-4fdc7ada]:nth-child(2){animation-delay:0s}.loader div[data-v-4fdc7ada]:nth-child(3){animation-delay:-.6s}.loader div[data-v-4fdc7ada]:nth-child(4){animation-delay:-1.2s}@keyframes ball-jump-4fdc7ada{0%{transform:scaleY(.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1)}50%{bottom:80%;transform:scale(1)}80%,90%{transform:scale(.7,1.2)}to{transform:scaleY(.7)}}@keyframes ball-steps-4fdc7ada{0%{top:0;right:0;opacity:0}50%{opacity:1}to{top:100%;right:100%;opacity:0}}.dark .tool-item .tool-icon[data-v-2525f4e1]{border:1px solid #555}.tool-item[data-v-2525f4e1]{width:90px;height:90px;border-radius:10px}.tool-item .tool-icon[data-v-2525f4e1]{width:60px;height:60px;margin:0 15px 5px;border:1px solid #eee;border-radius:8px;transition:all .2s ease-in-out}.tool-item .tool-icon[data-v-2525f4e1]:hover{border:1px solid var(--vp-c-green)}.tool-item .tool-name[data-v-2525f4e1]{width:100%;height:25px;line-height:25px;text-align:center;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;transition:all .2s ease-in-out;color:transparent;background-clip:text;background:var(--vp-home-hero-name-background);-webkit-background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}.tool-item .tool-name[data-v-2525f4e1]:hover{background-clip:text;background:linear-gradient(135deg,#5fe687 10%,#04d1e7 100%);-webkit-background-clip:text;-webkit-text-fill-color:linear-gradient(135deg,#5fe687 10%,#04d1e7 100%)}.tool-wrap .tool-group-title[data-v-a04e210c]{font-size:20px;font-weight:600;padding:20px 15px 10px;background-clip:text;background:var(--vp-home-hero-name-background);-webkit-background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}.tool-wrap .tool-group[data-v-a04e210c]{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));grid-gap:10px}:root{--vp-home-hero-name-color: transparent;--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);--vp-home-hero-image-background-image: linear-gradient(120deg, #bd34fe, #41d1ff);--vp-home-hero-image-filter: blur(80px)}@keyframes rainbow{0%{--vp-c-brand-1: #00a98e;--vp-c-brand-light: #4ad1b4;--vp-c-brand-lighter: #78fadc;--vp-c-brand-dark: #008269;--vp-c-brand-darker: #005d47;--vp-c-brand-next: #009ff7}1.25%{--vp-c-brand-1: #00a996;--vp-c-brand-light: #4bd1bd;--vp-c-brand-lighter: #79fbe5;--vp-c-brand-dark: #008371;--vp-c-brand-darker: #005e4f;--vp-c-brand-next: #009dfa}2.5%{--vp-c-brand-1: #00a99f;--vp-c-brand-light: #4cd1c6;--vp-c-brand-lighter: #7afbee;--vp-c-brand-dark: #00837a;--vp-c-brand-darker: #005e56;--vp-c-brand-next: #009bfc}3.75%{--vp-c-brand-1: #00a9a7;--vp-c-brand-light: #4dd1cf;--vp-c-brand-lighter: #7bfbf8;--vp-c-brand-dark: #008382;--vp-c-brand-darker: #005e5e;--vp-c-brand-next: #0098fd}5%{--vp-c-brand-1: #00a9b0;--vp-c-brand-light: #4ed1d7;--vp-c-brand-lighter: #7dfaff;--vp-c-brand-dark: #00838a;--vp-c-brand-darker: #005e65;--vp-c-brand-next: #0096fd}6.25%{--vp-c-brand-1: #00a9b8;--vp-c-brand-light: #4fd1e0;--vp-c-brand-lighter: #7efaff;--vp-c-brand-dark: #008391;--vp-c-brand-darker: #005e6d;--vp-c-brand-next: #0093fd}7.5%{--vp-c-brand-1: #00a9c0;--vp-c-brand-light: #50d0e8;--vp-c-brand-lighter: #7ffaff;--vp-c-brand-dark: #008399;--vp-c-brand-darker: #005e74;--vp-c-brand-next: #2e90fc}8.75%{--vp-c-brand-1: #00a8c7;--vp-c-brand-light: #51d0f0;--vp-c-brand-lighter: #81f9ff;--vp-c-brand-dark: #0082a0;--vp-c-brand-darker: #005e7b;--vp-c-brand-next: #4d8dfa}10%{--vp-c-brand-1: #00a8cf;--vp-c-brand-light: #52cff7;--vp-c-brand-lighter: #82f8ff;--vp-c-brand-dark: #0082a7;--vp-c-brand-darker: #005e81;--vp-c-brand-next: #638af8}11.25%{--vp-c-brand-1: #00a7d5;--vp-c-brand-light: #53cfff;--vp-c-brand-lighter: #84f8ff;--vp-c-brand-dark: #0081ae;--vp-c-brand-darker: #005d87;--vp-c-brand-next: #7587f5}12.5%{--vp-c-brand-1: #00a6dc;--vp-c-brand-light: #55ceff;--vp-c-brand-lighter: #85f7ff;--vp-c-brand-dark: #0081b4;--vp-c-brand-darker: #005d8d;--vp-c-brand-next: #8583f1}13.75%{--vp-c-brand-1: #00a6e2;--vp-c-brand-light: #56cdff;--vp-c-brand-lighter: #87f6ff;--vp-c-brand-dark: #0080b9;--vp-c-brand-darker: #005c93;--vp-c-brand-next: #9280ed}15%{--vp-c-brand-1: #00a4e7;--vp-c-brand-light: #57ccff;--vp-c-brand-lighter: #88f4ff;--vp-c-brand-dark: #007fbf;--vp-c-brand-darker: #005b98;--vp-c-brand-next: #9f7ce9}16.25%{--vp-c-brand-1: #00a3ec;--vp-c-brand-light: #58caff;--vp-c-brand-lighter: #89f3ff;--vp-c-brand-dark: #007ec3;--vp-c-brand-darker: #005b9c;--vp-c-brand-next: #aa78e3}17.5%{--vp-c-brand-1: #00a2f1;--vp-c-brand-light: #58c9ff;--vp-c-brand-lighter: #8af1ff;--vp-c-brand-dark: #007dc8;--vp-c-brand-darker: #0059a0;--vp-c-brand-next: #b574dd}18.75%{--vp-c-brand-1: #00a0f4;--vp-c-brand-light: #59c7ff;--vp-c-brand-lighter: #8bf0ff;--vp-c-brand-dark: #007bcb;--vp-c-brand-darker: #0058a3;--vp-c-brand-next: #be71d7}20%{--vp-c-brand-1: #009ff7;--vp-c-brand-light: #5ac5ff;--vp-c-brand-lighter: #8ceeff;--vp-c-brand-dark: #007ace;--vp-c-brand-darker: #0057a6;--vp-c-brand-next: #c76dd1}21.25%{--vp-c-brand-1: #009dfa;--vp-c-brand-light: #5ac3ff;--vp-c-brand-lighter: #8decff;--vp-c-brand-dark: #0078d0;--vp-c-brand-darker: #0055a8;--vp-c-brand-next: #cf69c9}22.5%{--vp-c-brand-1: #009bfc;--vp-c-brand-light: #5bc1ff;--vp-c-brand-lighter: #8de9ff;--vp-c-brand-dark: #0076d2;--vp-c-brand-darker: #0053aa;--vp-c-brand-next: #d566c2}23.75%{--vp-c-brand-1: #0098fd;--vp-c-brand-light: #5bbfff;--vp-c-brand-lighter: #8ee7ff;--vp-c-brand-dark: #0074d3;--vp-c-brand-darker: #0051ab;--vp-c-brand-next: #dc63ba}25%{--vp-c-brand-1: #0096fd;--vp-c-brand-light: #5bbcff;--vp-c-brand-lighter: #8ee4ff;--vp-c-brand-dark: #0071d4;--vp-c-brand-darker: #004fab;--vp-c-brand-next: #e160b3}26.25%{--vp-c-brand-1: #0093fd;--vp-c-brand-light: #5bb9ff;--vp-c-brand-lighter: #8ee1ff;--vp-c-brand-dark: #006fd3;--vp-c-brand-darker: #004dab;--vp-c-brand-next: #e65eab}27.5%{--vp-c-brand-1: #2e90fc;--vp-c-brand-light: #69b6ff;--vp-c-brand-lighter: #99deff;--vp-c-brand-dark: #006cd2;--vp-c-brand-darker: #004baa;--vp-c-brand-next: #e95ca2}28.75%{--vp-c-brand-1: #4d8dfa;--vp-c-brand-light: #7eb3ff;--vp-c-brand-lighter: #abdbff;--vp-c-brand-dark: #0069d1;--vp-c-brand-darker: #0048a9;--vp-c-brand-next: #ed5a9a}30%{--vp-c-brand-1: #638af8;--vp-c-brand-light: #8fb0ff;--vp-c-brand-lighter: #bbd7ff;--vp-c-brand-dark: #3066cf;--vp-c-brand-darker: #0045a7;--vp-c-brand-next: #ef5992}31.25%{--vp-c-brand-1: #7587f5;--vp-c-brand-light: #9fadff;--vp-c-brand-lighter: #cad4ff;--vp-c-brand-dark: #4963cc;--vp-c-brand-darker: #0941a4;--vp-c-brand-next: #f15989}32.5%{--vp-c-brand-1: #8583f1;--vp-c-brand-light: #aea9ff;--vp-c-brand-lighter: #d8d1ff;--vp-c-brand-dark: #5b5fc8;--vp-c-brand-darker: #2e3ea1;--vp-c-brand-next: #f25981}33.75%{--vp-c-brand-1: #9280ed;--vp-c-brand-light: #bca6ff;--vp-c-brand-lighter: #e6cdff;--vp-c-brand-dark: #6a5cc4;--vp-c-brand-darker: #413a9d;--vp-c-brand-next: #f25a79}35%{--vp-c-brand-1: #9f7ce9;--vp-c-brand-light: #c8a2ff;--vp-c-brand-lighter: #f2c9ff;--vp-c-brand-dark: #7758c0;--vp-c-brand-darker: #503598;--vp-c-brand-next: #f25c71}36.25%{--vp-c-brand-1: #aa78e3;--vp-c-brand-light: #d39eff;--vp-c-brand-lighter: #fec6ff;--vp-c-brand-dark: #8354bb;--vp-c-brand-darker: #5c3193;--vp-c-brand-next: #f15e69}37.5%{--vp-c-brand-1: #b574dd;--vp-c-brand-light: #de9bff;--vp-c-brand-lighter: #ffc2ff;--vp-c-brand-dark: #8d50b5;--vp-c-brand-darker: #662c8e;--vp-c-brand-next: #ef6061}38.75%{--vp-c-brand-1: #be71d7;--vp-c-brand-light: #e897ff;--vp-c-brand-lighter: #ffbfff;--vp-c-brand-dark: #964baf;--vp-c-brand-darker: #6f2688;--vp-c-brand-next: #ed635a}40%{--vp-c-brand-1: #c76dd1;--vp-c-brand-light: #f194fa;--vp-c-brand-lighter: #ffbcff;--vp-c-brand-dark: #9e47a9;--vp-c-brand-darker: #772082;--vp-c-brand-next: #eb6552}41.25%{--vp-c-brand-1: #cf69c9;--vp-c-brand-light: #f991f2;--vp-c-brand-lighter: #ffb9ff;--vp-c-brand-dark: #a643a2;--vp-c-brand-darker: #7e197c;--vp-c-brand-next: #e8694b}42.5%{--vp-c-brand-1: #d566c2;--vp-c-brand-light: #ff8deb;--vp-c-brand-lighter: #ffb6ff;--vp-c-brand-dark: #ac3f9b;--vp-c-brand-darker: #841075;--vp-c-brand-next: #e46c44}43.75%{--vp-c-brand-1: #dc63ba;--vp-c-brand-light: #ff8be3;--vp-c-brand-lighter: #ffb3ff;--vp-c-brand-dark: #b23b94;--vp-c-brand-darker: #89046f;--vp-c-brand-next: #e06f3d}45%{--vp-c-brand-1: #e160b3;--vp-c-brand-light: #ff88db;--vp-c-brand-lighter: #ffb1ff;--vp-c-brand-dark: #b7378c;--vp-c-brand-darker: #8d0068;--vp-c-brand-next: #db7336}46.25%{--vp-c-brand-1: #e65eab;--vp-c-brand-light: #ff86d2;--vp-c-brand-lighter: #ffaffb;--vp-c-brand-dark: #bb3485;--vp-c-brand-darker: #910060;--vp-c-brand-next: #d77630}47.5%{--vp-c-brand-1: #e95ca2;--vp-c-brand-light: #ff84ca;--vp-c-brand-lighter: #ffadf2;--vp-c-brand-dark: #be317d;--vp-c-brand-darker: #940059;--vp-c-brand-next: #d17a2a}48.75%{--vp-c-brand-1: #ed5a9a;--vp-c-brand-light: #ff83c1;--vp-c-brand-lighter: #fface9;--vp-c-brand-dark: #c12f75;--vp-c-brand-darker: #970052;--vp-c-brand-next: #cc7d24}50%{--vp-c-brand-1: #ef5992;--vp-c-brand-light: #ff82b8;--vp-c-brand-lighter: #ffabe0;--vp-c-brand-dark: #c32d6d;--vp-c-brand-darker: #98004b;--vp-c-brand-next: #c6811e}51.25%{--vp-c-brand-1: #f15989;--vp-c-brand-light: #ff82af;--vp-c-brand-lighter: #ffabd7;--vp-c-brand-dark: #c52d65;--vp-c-brand-darker: #9a0043;--vp-c-brand-next: #bf8418}52.5%{--vp-c-brand-1: #f25981;--vp-c-brand-light: #ff82a7;--vp-c-brand-lighter: #ffabce;--vp-c-brand-dark: #c52e5e;--vp-c-brand-darker: #9a003c;--vp-c-brand-next: #b98713}53.75%{--vp-c-brand-1: #f25a79;--vp-c-brand-light: #ff839e;--vp-c-brand-lighter: #ffacc5;--vp-c-brand-dark: #c62f56;--vp-c-brand-darker: #9a0035;--vp-c-brand-next: #b28a0f}55%{--vp-c-brand-1: #f25c71;--vp-c-brand-light: #ff8496;--vp-c-brand-lighter: #ffadbc;--vp-c-brand-dark: #c5314e;--vp-c-brand-darker: #99002e;--vp-c-brand-next: #ab8d0c}56.25%{--vp-c-brand-1: #f15e69;--vp-c-brand-light: #ff868d;--vp-c-brand-lighter: #ffaeb4;--vp-c-brand-dark: #c43447;--vp-c-brand-darker: #980027;--vp-c-brand-next: #a3900b}57.5%{--vp-c-brand-1: #ef6061;--vp-c-brand-light: #ff8885;--vp-c-brand-lighter: #ffb0ab;--vp-c-brand-dark: #c3373f;--vp-c-brand-darker: #970020;--vp-c-brand-next: #9c920d}58.75%{--vp-c-brand-1: #ed635a;--vp-c-brand-light: #ff8a7d;--vp-c-brand-lighter: #ffb2a3;--vp-c-brand-dark: #c13b38;--vp-c-brand-darker: #940619;--vp-c-brand-next: #949510}60%{--vp-c-brand-1: #eb6552;--vp-c-brand-light: #ff8d76;--vp-c-brand-lighter: #ffb59b;--vp-c-brand-dark: #be3e31;--vp-c-brand-darker: #921111;--vp-c-brand-next: #8b9715}61.25%{--vp-c-brand-1: #e8694b;--vp-c-brand-light: #ff8f6e;--vp-c-brand-lighter: #ffb794;--vp-c-brand-dark: #bb4229;--vp-c-brand-darker: #8f1908;--vp-c-brand-next: #83991b}62.5%{--vp-c-brand-1: #e46c44;--vp-c-brand-light: #ff9367;--vp-c-brand-lighter: #ffba8c;--vp-c-brand-dark: #b74622;--vp-c-brand-darker: #8c1f00;--vp-c-brand-next: #7a9b21}63.75%{--vp-c-brand-1: #e06f3d;--vp-c-brand-light: #ff9661;--vp-c-brand-lighter: #ffbd86;--vp-c-brand-dark: #b44a1a;--vp-c-brand-darker: #882500;--vp-c-brand-next: #719d27}65%{--vp-c-brand-1: #db7336;--vp-c-brand-light: #ff995a;--vp-c-brand-lighter: #ffc17f;--vp-c-brand-dark: #af4e11;--vp-c-brand-darker: #842a00;--vp-c-brand-next: #679e2e}66.25%{--vp-c-brand-1: #d77630;--vp-c-brand-light: #ff9c54;--vp-c-brand-lighter: #ffc47a;--vp-c-brand-dark: #ab5206;--vp-c-brand-darker: #802f00;--vp-c-brand-next: #5da035}67.5%{--vp-c-brand-1: #d17a2a;--vp-c-brand-light: #fea04f;--vp-c-brand-lighter: #ffc774;--vp-c-brand-dark: #a55600;--vp-c-brand-darker: #7b3300;--vp-c-brand-next: #51a13c}68.75%{--vp-c-brand-1: #cc7d24;--vp-c-brand-light: #f8a34a;--vp-c-brand-lighter: #ffca70;--vp-c-brand-dark: #a05900;--vp-c-brand-darker: #773700;--vp-c-brand-next: #44a244}70%{--vp-c-brand-1: #c6811e;--vp-c-brand-light: #f2a646;--vp-c-brand-lighter: #ffce6c;--vp-c-brand-dark: #9b5d00;--vp-c-brand-darker: #713b00;--vp-c-brand-next: #34a44b}71.25%{--vp-c-brand-1: #bf8418;--vp-c-brand-light: #ebaa42;--vp-c-brand-lighter: #ffd168;--vp-c-brand-dark: #956000;--vp-c-brand-darker: #6c3e00;--vp-c-brand-next: #1ba553}72.5%{--vp-c-brand-1: #b98713;--vp-c-brand-light: #e4ad3f;--vp-c-brand-lighter: #ffd466;--vp-c-brand-dark: #8e6300;--vp-c-brand-darker: #674100;--vp-c-brand-next: #00a65b}73.75%{--vp-c-brand-1: #b28a0f;--vp-c-brand-light: #ddb03d;--vp-c-brand-lighter: #ffd764;--vp-c-brand-dark: #886600;--vp-c-brand-darker: #614400;--vp-c-brand-next: #00a663}75%{--vp-c-brand-1: #ab8d0c;--vp-c-brand-light: #d5b33c;--vp-c-brand-lighter: #ffda63;--vp-c-brand-dark: #816900;--vp-c-brand-darker: #5b4700;--vp-c-brand-next: #00a76c}76.25%{--vp-c-brand-1: #a3900b;--vp-c-brand-light: #cdb63c;--vp-c-brand-lighter: #f8dd63;--vp-c-brand-dark: #7a6b00;--vp-c-brand-darker: #554900;--vp-c-brand-next: #00a874}77.5%{--vp-c-brand-1: #9c920d;--vp-c-brand-light: #c5b83d;--vp-c-brand-lighter: #f0e064;--vp-c-brand-dark: #736e00;--vp-c-brand-darker: #4e4b00;--vp-c-brand-next: #00a87d}78.75%{--vp-c-brand-1: #949510;--vp-c-brand-light: #bdbb3e;--vp-c-brand-lighter: #e7e366;--vp-c-brand-dark: #6c7000;--vp-c-brand-darker: #474d00;--vp-c-brand-next: #00a985}80%{--vp-c-brand-1: #8b9715;--vp-c-brand-light: #b4bd41;--vp-c-brand-lighter: #dee668;--vp-c-brand-dark: #647200;--vp-c-brand-darker: #404f00;--vp-c-brand-next: #00a98e}81.25%{--vp-c-brand-1: #83991b;--vp-c-brand-light: #abc045;--vp-c-brand-lighter: #d4e86c;--vp-c-brand-dark: #5c7400;--vp-c-brand-darker: #385100;--vp-c-brand-next: #00a996}82.5%{--vp-c-brand-1: #7a9b21;--vp-c-brand-light: #a2c249;--vp-c-brand-lighter: #cbea70;--vp-c-brand-dark: #537600;--vp-c-brand-darker: #2f5200;--vp-c-brand-next: #00a99f}83.75%{--vp-c-brand-1: #719d27;--vp-c-brand-light: #98c44e;--vp-c-brand-lighter: #c1ec75;--vp-c-brand-dark: #4a7700;--vp-c-brand-darker: #255300;--vp-c-brand-next: #00a9a7}85%{--vp-c-brand-1: #679e2e;--vp-c-brand-light: #8ec654;--vp-c-brand-lighter: #b7ee7a;--vp-c-brand-dark: #407900;--vp-c-brand-darker: #185500;--vp-c-brand-next: #00a9b0}86.25%{--vp-c-brand-1: #5da035;--vp-c-brand-light: #84c75a;--vp-c-brand-lighter: #acf080;--vp-c-brand-dark: #357a0a;--vp-c-brand-darker: #015600;--vp-c-brand-next: #00a9b8}87.5%{--vp-c-brand-1: #51a13c;--vp-c-brand-light: #79c961;--vp-c-brand-lighter: #a1f287;--vp-c-brand-dark: #277b16;--vp-c-brand-darker: #005700;--vp-c-brand-next: #00a9c0}88.75%{--vp-c-brand-1: #44a244;--vp-c-brand-light: #6dca68;--vp-c-brand-lighter: #96f48e;--vp-c-brand-dark: #117c1f;--vp-c-brand-darker: #005700;--vp-c-brand-next: #00a8c7}90%{--vp-c-brand-1: #34a44b;--vp-c-brand-light: #60cc70;--vp-c-brand-lighter: #89f595;--vp-c-brand-dark: #007d28;--vp-c-brand-darker: #005801;--vp-c-brand-next: #00a8cf}91.25%{--vp-c-brand-1: #1ba553;--vp-c-brand-light: #51cd77;--vp-c-brand-lighter: #7cf69d;--vp-c-brand-dark: #007e30;--vp-c-brand-darker: #00590d;--vp-c-brand-next: #00a7d5}92.5%{--vp-c-brand-1: #00a65b;--vp-c-brand-light: #48ce80;--vp-c-brand-lighter: #75f7a6;--vp-c-brand-dark: #007f38;--vp-c-brand-darker: #005917;--vp-c-brand-next: #00a6dc}93.75%{--vp-c-brand-1: #00a663;--vp-c-brand-light: #48cf88;--vp-c-brand-lighter: #75f8ae;--vp-c-brand-dark: #008040;--vp-c-brand-darker: #005a20;--vp-c-brand-next: #00a6e2}95%{--vp-c-brand-1: #00a76c;--vp-c-brand-light: #49cf91;--vp-c-brand-lighter: #76f9b7;--vp-c-brand-dark: #008049;--vp-c-brand-darker: #005b28;--vp-c-brand-next: #00a4e7}96.25%{--vp-c-brand-1: #00a874;--vp-c-brand-light: #49d099;--vp-c-brand-lighter: #76f9c0;--vp-c-brand-dark: #008151;--vp-c-brand-darker: #005c30;--vp-c-brand-next: #00a3ec}97.5%{--vp-c-brand-1: #00a87d;--vp-c-brand-light: #49d0a2;--vp-c-brand-lighter: #77fac9;--vp-c-brand-dark: #008159;--vp-c-brand-darker: #005c37;--vp-c-brand-next: #00a2f1}98.75%{--vp-c-brand-1: #00a985;--vp-c-brand-light: #4ad1ab;--vp-c-brand-lighter: #77fad3;--vp-c-brand-dark: #008261;--vp-c-brand-darker: #005d3f;--vp-c-brand-next: #00a0f4}to{--vp-c-brand-1: #00a98e;--vp-c-brand-light: #4ad1b4;--vp-c-brand-lighter: #78fadc;--vp-c-brand-dark: #008269;--vp-c-brand-darker: #005d47;--vp-c-brand-next: #009ff7}}:root{--vp-c-brand-1: #00a98e;--vp-c-brand-light: #4ad1b4;--vp-c-brand-lighter: #78fadc;--vp-c-brand-dark: #008269;--vp-c-brand-darker: #005d47;--vp-c-brand-next: #009ff7;animation:rainbow 50s linear infinite}@media (prefers-reduced-motion: reduce){:root{animation:none!important}}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}::view-transition-old(root),.dark::view-transition-new(root){z-index:1}::view-transition-new(root),.dark::view-transition-old(root){z-index:9999}.dark .vp-doc blockquote{background-color:#56475769;border-left-color:#d2a3f6}.vp-doc blockquote{background-color:#f8efffb0;border-left-color:#d2a3f6}.custom-block.details{background-color:#f3f3f3}.dark .custom-block.details{background-color:var(--vp-custom-block-details-bg)}.container .title{color:transparent;background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}.container .outline-marker{width:2px}.has-outline .outline-title{font-size:14px}.has-outline .outline-link.active{color:var(--vp-c-brand-1)}.link .box .icon{transition:transform .3s ease-in-out}.link:hover .box .icon{transform:scale(1.1);background-color:#7de4c34b}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:32px;height:32px;border-radius:4px;background:transparent;transition:border-color .25s}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}}@media (max-width: 768px){.DocSearch-Button-Keys{display:none}.VPNavBarHamburger{height:32px!important;width:32px!important;border-radius:4px}}.content img{box-shadow:0 0 3px #0003;transition:all .3s}.content img:hover{box-shadow:0 0 6px #0003;transform:translateY(-2px)}.vp-doc .details.custom-block div[class*=language-]+div[class*=language-]{margin-top:8px}.VPLocalSearchBox[data-v-6d2f2a19]{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;display:flex}.backdrop[data-v-6d2f2a19]{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--vp-backdrop-bg-color);transition:opacity .5s}.shell[data-v-6d2f2a19]{position:relative;padding:12px;margin:64px auto;display:flex;flex-direction:column;gap:16px;background:var(--vp-local-search-bg);width:min(100vw - 60px,900px);height:min-content;max-height:min(100vh - 128px,900px);border-radius:6px}@media (max-width: 767px){.shell[data-v-6d2f2a19]{margin:0;width:100vw;height:100vh;max-height:none;border-radius:0}}.search-bar[data-v-6d2f2a19]{border:1px solid var(--vp-c-divider);border-radius:4px;display:flex;align-items:center;padding:0 12px;cursor:text}@media (max-width: 767px){.search-bar[data-v-6d2f2a19]{padding:0 8px}}.search-bar[data-v-6d2f2a19]:focus-within{border-color:var(--vp-c-brand-1)}.search-icon[data-v-6d2f2a19]{margin:8px}@media (max-width: 767px){.search-icon[data-v-6d2f2a19]{display:none}}.search-input[data-v-6d2f2a19]{padding:6px 12px;font-size:inherit;width:100%}@media (max-width: 767px){.search-input[data-v-6d2f2a19]{padding:6px 4px}}.search-actions[data-v-6d2f2a19]{display:flex;gap:4px}@media (any-pointer: coarse){.search-actions[data-v-6d2f2a19]{gap:8px}}@media (min-width: 769px){.search-actions.before[data-v-6d2f2a19]{display:none}}.search-actions button[data-v-6d2f2a19]{padding:8px}.search-actions button[data-v-6d2f2a19]:not([disabled]):hover,.toggle-layout-button.detailed-list[data-v-6d2f2a19]{color:var(--vp-c-brand-1)}.search-actions button.clear-button[data-v-6d2f2a19]:disabled{opacity:.37}.search-keyboard-shortcuts[data-v-6d2f2a19]{font-size:.8rem;opacity:75%;display:flex;flex-wrap:wrap;gap:16px;line-height:14px}.search-keyboard-shortcuts span[data-v-6d2f2a19]{display:flex;align-items:center;gap:4px}@media (max-width: 767px){.search-keyboard-shortcuts[data-v-6d2f2a19]{display:none}}.search-keyboard-shortcuts kbd[data-v-6d2f2a19]{background:rgba(128,128,128,.1);border-radius:4px;padding:3px 6px;min-width:24px;display:inline-block;text-align:center;vertical-align:middle;border:1px solid rgba(128,128,128,.15);box-shadow:0 2px 2px #0000001a}.results[data-v-6d2f2a19]{display:flex;flex-direction:column;gap:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.result[data-v-6d2f2a19]{display:flex;align-items:center;gap:8px;border-radius:4px;transition:none;line-height:1rem;border:solid 2px var(--vp-local-search-result-border);outline:none}.result>div[data-v-6d2f2a19]{margin:12px;width:100%;overflow:hidden}@media (max-width: 767px){.result>div[data-v-6d2f2a19]{margin:8px}}.titles[data-v-6d2f2a19]{display:flex;flex-wrap:wrap;gap:4px;position:relative;z-index:1001;padding:2px 0}.title[data-v-6d2f2a19]{display:flex;align-items:center;gap:4px}.title.main[data-v-6d2f2a19]{font-weight:500}.title-icon[data-v-6d2f2a19]{opacity:.5;font-weight:500;color:var(--vp-c-brand-1)}.title svg[data-v-6d2f2a19]{opacity:.5}.result.selected[data-v-6d2f2a19]{--vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);border-color:var(--vp-local-search-result-selected-border)}.excerpt-wrapper[data-v-6d2f2a19]{position:relative}.excerpt[data-v-6d2f2a19]{opacity:75%;pointer-events:none;max-height:140px;overflow:hidden;position:relative;opacity:.5;margin-top:4px}.result.selected .excerpt[data-v-6d2f2a19]{opacity:1}.excerpt[data-v-6d2f2a19] *{font-size:.8rem!important;line-height:130%!important}.titles[data-v-6d2f2a19] mark,.excerpt[data-v-6d2f2a19] mark{background-color:var(--vp-local-search-highlight-bg);color:var(--vp-local-search-highlight-text);border-radius:2px;padding:0 2px}.excerpt[data-v-6d2f2a19] .vp-code-group .tabs{display:none}.excerpt[data-v-6d2f2a19] .vp-code-group div[class*=language-]{border-radius:8px!important}.excerpt-gradient-bottom[data-v-6d2f2a19]{position:absolute;bottom:-1px;left:0;width:100%;height:8px;background:linear-gradient(transparent,var(--vp-local-search-result-bg));z-index:1000}.excerpt-gradient-top[data-v-6d2f2a19]{position:absolute;top:-1px;left:0;width:100%;height:8px;background:linear-gradient(var(--vp-local-search-result-bg),transparent);z-index:1000}.result.selected .titles[data-v-6d2f2a19],.result.selected .title-icon[data-v-6d2f2a19]{color:var(--vp-c-brand-1)!important}.no-results[data-v-6d2f2a19]{font-size:.9rem;text-align:center;padding:12px}svg[data-v-6d2f2a19]{flex:none}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..d5f707fa751979dfbc727e129d621b25e842f8cc
GIT binary patch
literal 4286
zcmc(jX;f9`6^7~LvQ1KBZFHHzn%Fv}wW-$Gwwk6IH7aoyXN?1*Afh5DQJiqXnMpuF
z0a2Mn6cp!K;uvFGYSn0rNxMv!LFEE|Pv3L7_kshawm*7U-@S)(4)=T5``!E9;O6!N
zebue&X1%&4zwG8#)6LDTp_VSWwb!z)+YjBV*Q9KfU2t>5I*Lmn{}RS`8|K4Jm=88%
zI;UVdrepq^iRrKv^QRn4+Z~uzd6?$AFn`Q{{?%ePrteYMauXhCPsiRS^%Q1k0;czR
zOwUA2kBwyvUBu8S4fCFZ;m_jxUm2Q;yUiZVs>@{z2QOkq$6*G>Vg~5FuNZoX#a#^D
z6pJof91IzXLl(wjXt!N)$i=kyFXPaxjDgKJF!S^~4v)YLi^dEVgU32dKQZ(c!-q+j
z?qcXFhWAr3e-p#IV)#pT8AEG}VdwMb!OC4zu`3s5g7zLAh8Y<thBab{aWKSJU`Q5&
zG+{9~G=ZHVhtjsW&>|0-?bLeCcvyNEzXCIE6=sYWJ`&4tF$@vIz_pnEV(7EMp$RcK
zbV<iFZgkHjAn-B+LcYR##&x1bU*L4tV-&UA{d^n~mnsI!#jvshLsU6~OB2$iOA{$f
z3BJS+GjOe+q`|8R#SEHrn}hBJlq$yjCpF@?SalbQ@m_}U62sWlm{H-F5n>oBO$>Tc
zmp1n;bYFdoA7?>TF*sKho&QMJUP~%wvG-*PTklaUl<Q}4_%FarUQ~fW`S5fyI5qL8
zE{l34;~svCD%tQe?Psm3TlJn<wyNm-rF6rzfa~0AC5C71KYbo%S_o!}7$z;j_$VKi
zCOoByN_1J&FOi;6Us5#(UbGmtL6d~<i1t0hnu%w5XZ?3n)wODwhGpKDc=)XSKc0<o
zF)YORiNU3br|Z(@v4LJOH+f+P{9Fvb$TlSUo`CmKp+h>yJPz_sLLooh4)r$KIPR`{
zmDR@VS(uq(m@yX<pg2sm7^DdogQZL5!(JPfE~BvxiKEZjo4lm5t0smwGi{t5raJ6g
z)~k3ooixt^YG;-5f-ZZ8d`U^mr|W=uL73Sy#Sn}M5<}p8j9n9z=`s@A@L2lB-Jseo
zs4j+IXBF}3NCn~pt50l!PN_V2KZ_x&Zt<d?X_QjL#cl_o`IEhhg@G`C2Fww|EQ?`I
z1qMr(mL{y)aOiS$IJQyI^xN<S)m7>>RA%+Fi#R`8LU31&c6TszOd-YR1U2&vzZB!9
zac7{V{OhrP$r6896aXP&nENp%Sox492vjU8(WPx{Bm)w!Q)4f@B6&B=(f*z)0=s{y
zXZJ{kuABILP#%pHo0s+69Q6y@$vfJJp=G&;vV1axIvJ*mA&BDHv-xV?GKzv!o70pJ
zyC%wYX&WDgNAfjZ*$=h$LE|0Te?mI+lXp1!CGybQ{jzA2dY9^YZqm|gnD+AV$2^o(
zlVF7ymQIDm(-en564z$ZX6GFiuisBekoFI7GFZ9{#pbh;L7T5pODU~=0N&pDfX^mM
z`vcXt9sQD?3EUo-PTP#T)X;N&%de_FDtKsHd8qu02p?GOD+WIYgFgXjN2z%X+UDQk
zX2^1w@u((je#;n~dX?IT;q^oCyL|2MC*2K^ci8*oI_MM6g)v)clKX&KdS=1G3m{EA
z?x94Fhe&S-n+Pi{20!AGGO436rNQA6@*@&prnG6-rFxZW!!|XPq3M6;H9b@32>gDJ
z_V-uLM_4{?d1x&3k0oX10e*GR*jM^AJ=j@ZZufD`RhEypmuA;`LW~zgi6Pu#@a1gG
za+)44q>kFg<cyP)%$o&vT`CUhRkpxI49mR28^@up;`E1o54aGR1f$CO1Y)>9JdTkY
zuk)(zx5_Kz%1AZk?vA;t!feO-(Xei;gJFUge6WR0!7KL+bwAN(AAP{?=nWF^bXRTI
zf<hRceTBLO@Rk^x9k|bhAjQd3H7XxxWH_1g^J%2`y`lR7F&8QA>-2GJuF@>wnC(dX
z2sVfzP7JZ*V2#Bvfg>BjXnwqqw@yKq{kJ(69<JI@eFO*bkNHdJw)-~qPOA5avH4-`
zKWjZqkax((OFY9Fn{tKM^|NjE7IMy4#?)W6@s!z)O~WB+q!>n3U>MKCNFTzoa%g<|
zA-_@U=z8#LcEoMu%8C^%Og%*7lMiX2&#$l5^5}g&pDWExTnyezLA@$|^*%aDze%C{
z<>L-rdWhkX*-n~C9Riz&!Nw7gAcpucWtxcgqA+?g^K$p|+cTxqKc`%rDyH3uLf$^}
zkVay%Rzt1U$M177B$kq?OSlsd#<x==xbG9jKPSadGDezo&2~;7FQ4tm7$}Cp6&RF{
zc;&;=W%M}iMf<TPJDYZ=3Tb#=dw!~V7mIT>)_L24dt6=^$-b4FaNqY0efHeu^xTb#
zgYsed_%miZvin1(2c(H%%TP#GJ}gbRbUBWPQ4=_sxSVOb3+Qm_E=|rG8h<7htp+OV
z{s(UIuepoJjLo3FRpv*(<!Z2M&_{FC_sn)|?}LjWeGsH5A1+N)&}Ebt#gV>Tid#r}
zN;082dkNZE!2FyeoQ;UG>++M;>j>U@l0z${aew*v<jOp>e6}Nh0PN@u+xkJ4&Rq=B
zgiDvwguOP@t0Gh%tJEu2sBbTuqMq%q<`(dXhcZL+gv-Yto9$flrDnSkF;JkMztbIZ
z#gHS0tzxiiqH<k6(l0Fr%R`+$?()#GUR9Zgno*kfXKjYBWnlZIfn839zGBe#E?ruh
zP;Iz0;p~@IpHRQF{Obu1E%)(9W;<)XwC1Yun)iJo;D7{eO5lqWom&h&Ag>o}7sL1J
z(n~#C3@-ngT<)O@)TiuoRmIuP;h~e1kExpJq#OI+-RQ6wzL80vR2=sx2X=-Ex=fQU
powZ@tL<L=1{qmU%Gs|W>YrYK9-mBu_go?OWd+KohAK?G>{%<6N=Q98R

literal 0
HcmV?d00001

diff --git a/hashmap.json b/hashmap.json
new file mode 100644
index 00000000..5db0ec71
--- /dev/null
+++ b/hashmap.json
@@ -0,0 +1 @@
+{"backend_nodejs_node大文件上传.md":"84c9f765","backend_server_docker学习笔记.md":"d29feca6","backend_server_nginx学习笔记.md":"9d658cc4","framework_angular_angular基础总结一.md":"25af9886","framework_vue_vue3补漏笔记.md":"6422a5f9","framework_react_react基础总结一.md":"fc5d41af","framework_vue_vite原理学习.md":"8895a11d","backend_nodejs_mongodb笔记.md":"eb6021c2","backend_nodejs_node简单上传文件.md":"faa27b4e","framework_vue_列表最后一条数据删除处理.md":"9f59b85b","frontend_javascript_代码分支优化.md":"e8fda00c","frontend_git_git常用操作.md":"a0e87468","frontend_git_配置多个平台ssh.md":"49289c60","frontend_javascript_图片懒加载.md":"3d5465d0","framework_vue_分页与搜索条件记录并回显优化.md":"8805bdc2","frontend_javascript_基础复习一.md":"a8906ce7","framework_angular_angular基础总结三.md":"574a1956","frontend_javascript_基础复习二.md":"8f89af07","interview_css_高级面试题.md":"63a54546","frontend_shell_自动部署脚本.md":"7ce896dd","interview_brower_事件循环机制.md":"9f053692","frontend_typescript_进阶使用技巧.md":"21fda5ca","interview_css_进阶面试题.md":"6b9b42f1","interview_css_基础面试题.md":"b72bdb12","frontend_typescript_配置文件详解.md":"7a55465d","frontend_javascript_正则表达式.md":"a9560fb8","frontend_javascript_获取目录结构.md":"f15b6a8f","goodtool_index.md":"2cde5d0e","interview_brower_计算机网络.md":"73c84072","interview_javascript_字符串常用方法.md":"4808f793","interview_brower_浏览器网页请求过程.md":"1acb73dd","frontend_css_grid布局学习笔记.md":"6624dd93","interview_javascript_原型与原型链.md":"4ad216b5","interview_javascript_promise相关.md":"1015a7af","backend_nodejs_node学习笔记.md":"f1b234ff","frontend_css_常用代码段.md":"083fb786","interview_index.md":"ff0a75dc","index.md":"4cc1630f","interview_vue_vue响应式原理.md":"2eeac150","frontend_javascript_高阶函数.md":"f3e81d0b","frontend_git_terminal终端美化.md":"6674896b","problem_graphical_antv使用总结.md":"10b596c9","frontend_javascript_async与await.md":"d21c9cb0","frontend_javascript_手写promise.md":"fbddbbf5","interview_vue_自定义指令.md":"3d2ea0a9","framework_angular_angular基础总结二.md":"0a8462a7","interview_vue_常见path区别.md":"56f4fc59","interview_javascript_进阶面试题.md":"c89e986d","problem_nuxt3_nuxt3项目踩坑.md":"e3bdda07","interview_vue_vue基础篇.md":"d7fd744f","interview_vue_前端项目优化.md":"3cd67a0e","problem_graphical_echarts问题总结.md":"fe67d408","problem_vitepress_vuepress踩坑记录.md":"d7553dcf","interview_vue_npm run xxx执行过程.md":"9da37746","interview_vue_vue声明周期.md":"4220f397","frontend_javascript_数组求集合.md":"9e71e873","frontend_typescript_初学笔记.md":"a7be054a","frontend_css_揭秘读书摘要.md":"3689a434","interview_javascript_高级面试题.md":"0abc2056","frontend_javascript_文件系统.md":"1488f287","problem_vitepress_vitepress踩坑记录.md":"007e02bc","interview_javascript_基础面试题.md":"0df982a7","problem_vueproject_vue项目踩坑一.md":"5d32b46a","frontend_javascript_数据去重.md":"f1eaba48","interview_vue_vue进阶篇.md":"786b9622","problem_index.md":"724652c6","problem_graphical_antv代码片段集锦.md":"3d28f150","frontend_javascript_常见算法.md":"0cd56de3"}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..3465a156
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ZerDocs | ZerDocs</title>
+    <meta name="description" content="Front-end learning document collection.">
+    <link rel="preload stylesheet" href="/zerdocs/assets/style.ca30dd5f.css" as="style">
+    
+    <script type="module" src="/zerdocs/assets/app.c5d8d5ce.js"></script>
+    <link rel="preload" href="/zerdocs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/framework.c53372a0.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/theme.1e9d2528.js">
+    <link rel="modulepreload" href="/zerdocs/assets/chunks/DemoWrap.1b6e7adf.js">
+    <link rel="modulepreload" href="/zerdocs/assets/index.md.4cc1630f.lean.js">
+    <link rel="icon" href="/zerdocs/favicon.ico">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="manifest" href="/zerdocs/manifest.webmanifest">
+    <script id="vite-plugin-pwa:register-sw" src="/zerdocs/registerSW.js"></script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar top" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/zerdocs/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/zerdocs/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->ZerDocs<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🎨 FrontEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🗃️ BackEnd</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🚚 Framework</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Problem/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>📝 Problem</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/Interview/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🧑‍💻 Interview</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zerdocs/GoodTool/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>🛠 GoodTool</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>主题切换</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/fxzer/zerdocs" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://gitee.com/fxzer/zerdocs" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1677484943818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="3906"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/3642028720663127/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg t="1675304957957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1427" width="280" height="280"><path d="M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z" fill="#515151" p-id="1428"></path><path d="M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z" fill="#515151" p-id="1429"></path></svg></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/228134791" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
+    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
+  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><!----><!----><div class="VPContent is-home" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPHome" data-v-669faec9 data-v-d82743a8><!--[--><!--]--><div class="VPHero has-image VPHomeHero" data-v-d82743a8 data-v-da5d1713><div class="container" data-v-da5d1713><div class="main" data-v-da5d1713><!--[--><h1 class="name" data-v-da5d1713><span class="clip" data-v-da5d1713>ZerDocs</span></h1><p class="text" data-v-da5d1713>VitePress Front-End Learning Collection</p><!----><!--]--><div class="actions" data-v-da5d1713><!--[--><div class="action" data-v-da5d1713><a class="VPButton medium brand" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-da5d1713 data-v-c1c5efc1>开始阅读</a></div><div class="action" data-v-da5d1713><a class="VPButton medium alt" href="https://github.com/fxzer" target="_blank" rel="noreferrer" data-v-da5d1713 data-v-c1c5efc1>关于我</a></div><!--]--></div></div><div class="image" data-v-da5d1713><div class="image-container" data-v-da5d1713><div class="image-bg" data-v-da5d1713></div><!--[--><!--[--><img class="VPImage image-src" src="https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302041807975.svg" alt="ZerDocs" data-v-8426fc1a><!--]--><!--]--></div></div></div></div><!--[--><!--]--><!--[--><!--]--><div class="VPFeatures VPHomeFeatures" data-v-d82743a8 data-v-a6181336><div class="container" data-v-a6181336><div class="items" data-v-a6181336><!--[--><div class="grid-4 item" data-v-a6181336><a class="VPLink link no-icon VPFeature" href="/zerdocs/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96" data-v-a6181336 data-v-33204567><!--[--><article class="box" data-v-33204567><div class="icon" data-v-33204567>🎨</div><h2 class="title" data-v-33204567>FrontEnd</h2><p class="details" data-v-33204567>前端三件套相关基础积累。</p><!----></article><!--]--></a></div><div class="grid-4 item" data-v-a6181336><a class="VPLink link no-icon VPFeature" href="/zerdocs/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86" data-v-a6181336 data-v-33204567><!--[--><article class="box" data-v-33204567><div class="icon" data-v-33204567>🚚</div><h2 class="title" data-v-33204567>Framework</h2><p class="details" data-v-33204567>总结前段框架学习笔记。</p><!----></article><!--]--></a></div><div class="grid-4 item" data-v-a6181336><a class="VPLink link no-icon VPFeature" href="/zerdocs/Problem/" data-v-a6181336 data-v-33204567><!--[--><article class="box" data-v-33204567><div class="icon" data-v-33204567>📝</div><h2 class="title" data-v-33204567>Problem</h2><p class="details" data-v-33204567>积累编程中遇到的坑。</p><!----></article><!--]--></a></div><div class="grid-4 item" data-v-a6181336><a class="VPLink link no-icon VPFeature" href="/zerdocs/Interview/" data-v-a6181336 data-v-33204567><!--[--><article class="box" data-v-33204567><div class="icon" data-v-33204567>🧑‍💻</div><h2 class="title" data-v-33204567>Interview</h2><p class="details" data-v-33204567>归纳前端经典面试题。</p><!----></article><!--]--></a></div><div class="grid-4 item" data-v-a6181336><a class="VPLink link vp-external-link-icon no-icon VPFeature" href="https://fxzer.github.io/tsdoc-vitepress/zh/" target="_blank" rel="noreferrer" data-v-a6181336 data-v-33204567><!--[--><article class="box" data-v-33204567><div class="icon" data-v-33204567>🔐</div><h2 class="title" data-v-33204567>TypeScript</h2><p class="details" data-v-33204567>TypeScript 中英文档</p><!----></article><!--]--></a></div><div class="grid-4 item" data-v-a6181336><a class="VPLink link vp-external-link-icon no-icon VPFeature" href="https://fxzer.github.io/typescript-tutorial-vitepress/" target="_blank" rel="noreferrer" data-v-a6181336 data-v-33204567><!--[--><article class="box" data-v-33204567><div class="icon" data-v-33204567>🔐</div><h2 class="title" data-v-33204567>TypeScript</h2><p class="details" data-v-33204567>TypeScript 教程</p><!----></article><!--]--></a></div><div class="grid-4 item" data-v-a6181336><a class="VPLink link vp-external-link-icon no-icon VPFeature" href="https://fxzer.github.io/funny-canvas/#/a" target="_blank" rel="noreferrer" data-v-a6181336 data-v-33204567><!--[--><article class="box" data-v-33204567><div class="icon" data-v-33204567>💫</div><h2 class="title" data-v-33204567>Canvas</h2><p class="details" data-v-33204567>有趣的 Canvas 练习</p><!----></article><!--]--></a></div><div class="grid-4 item" data-v-a6181336><a class="VPLink link vp-external-link-icon no-icon VPFeature" href="https://fxzer.github.io/tailwindcss-showcase/#/" target="_blank" rel="noreferrer" data-v-a6181336 data-v-33204567><!--[--><article class="box" data-v-33204567><div class="icon" data-v-33204567>🤡</div><h2 class="title" data-v-33204567>Tailwind CSS</h2><p class="details" data-v-33204567>Tailwind CSS 案例练习</p><!----></article><!--]--></a></div><!--]--></div></div></div><!--[--><!--]--><div style="position:relative;" data-v-d82743a8><div></div></div></div></div><footer class="VPFooter" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the <a href="https://github.com/fxzer/zerdocs/blob/master/LICENSE">MIT License</a>.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present <a href="https://github.com/fxzer">fxzer</a>.</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_nodejs_node大文件上传.md\":\"84c9f765\",\"backend_server_docker学习笔记.md\":\"d29feca6\",\"backend_server_nginx学习笔记.md\":\"9d658cc4\",\"framework_angular_angular基础总结一.md\":\"25af9886\",\"framework_vue_vue3补漏笔记.md\":\"6422a5f9\",\"framework_react_react基础总结一.md\":\"fc5d41af\",\"framework_vue_vite原理学习.md\":\"8895a11d\",\"backend_nodejs_mongodb笔记.md\":\"eb6021c2\",\"backend_nodejs_node简单上传文件.md\":\"faa27b4e\",\"framework_vue_列表最后一条数据删除处理.md\":\"9f59b85b\",\"frontend_javascript_代码分支优化.md\":\"e8fda00c\",\"frontend_git_git常用操作.md\":\"a0e87468\",\"frontend_git_配置多个平台ssh.md\":\"49289c60\",\"frontend_javascript_图片懒加载.md\":\"3d5465d0\",\"framework_vue_分页与搜索条件记录并回显优化.md\":\"8805bdc2\",\"frontend_javascript_基础复习一.md\":\"a8906ce7\",\"framework_angular_angular基础总结三.md\":\"574a1956\",\"frontend_javascript_基础复习二.md\":\"8f89af07\",\"interview_css_高级面试题.md\":\"63a54546\",\"frontend_shell_自动部署脚本.md\":\"7ce896dd\",\"interview_brower_事件循环机制.md\":\"9f053692\",\"frontend_typescript_进阶使用技巧.md\":\"21fda5ca\",\"interview_css_进阶面试题.md\":\"6b9b42f1\",\"interview_css_基础面试题.md\":\"b72bdb12\",\"frontend_typescript_配置文件详解.md\":\"7a55465d\",\"frontend_javascript_正则表达式.md\":\"a9560fb8\",\"frontend_javascript_获取目录结构.md\":\"f15b6a8f\",\"goodtool_index.md\":\"2cde5d0e\",\"interview_brower_计算机网络.md\":\"73c84072\",\"interview_javascript_字符串常用方法.md\":\"4808f793\",\"interview_brower_浏览器网页请求过程.md\":\"1acb73dd\",\"frontend_css_grid布局学习笔记.md\":\"6624dd93\",\"interview_javascript_原型与原型链.md\":\"4ad216b5\",\"interview_javascript_promise相关.md\":\"1015a7af\",\"backend_nodejs_node学习笔记.md\":\"f1b234ff\",\"frontend_css_常用代码段.md\":\"083fb786\",\"interview_index.md\":\"ff0a75dc\",\"index.md\":\"4cc1630f\",\"interview_vue_vue响应式原理.md\":\"2eeac150\",\"frontend_javascript_高阶函数.md\":\"f3e81d0b\",\"frontend_git_terminal终端美化.md\":\"6674896b\",\"problem_graphical_antv使用总结.md\":\"10b596c9\",\"frontend_javascript_async与await.md\":\"d21c9cb0\",\"frontend_javascript_手写promise.md\":\"fbddbbf5\",\"interview_vue_自定义指令.md\":\"3d2ea0a9\",\"framework_angular_angular基础总结二.md\":\"0a8462a7\",\"interview_vue_常见path区别.md\":\"56f4fc59\",\"interview_javascript_进阶面试题.md\":\"c89e986d\",\"problem_nuxt3_nuxt3项目踩坑.md\":\"e3bdda07\",\"interview_vue_vue基础篇.md\":\"d7fd744f\",\"interview_vue_前端项目优化.md\":\"3cd67a0e\",\"problem_graphical_echarts问题总结.md\":\"fe67d408\",\"problem_vitepress_vuepress踩坑记录.md\":\"d7553dcf\",\"interview_vue_npm run xxx执行过程.md\":\"9da37746\",\"interview_vue_vue声明周期.md\":\"4220f397\",\"frontend_javascript_数组求集合.md\":\"9e71e873\",\"frontend_typescript_初学笔记.md\":\"a7be054a\",\"frontend_css_揭秘读书摘要.md\":\"3689a434\",\"interview_javascript_高级面试题.md\":\"0abc2056\",\"frontend_javascript_文件系统.md\":\"1488f287\",\"problem_vitepress_vitepress踩坑记录.md\":\"007e02bc\",\"interview_javascript_基础面试题.md\":\"0df982a7\",\"problem_vueproject_vue项目踩坑一.md\":\"5d32b46a\",\"frontend_javascript_数据去重.md\":\"f1eaba48\",\"interview_vue_vue进阶篇.md\":\"786b9622\",\"problem_index.md\":\"724652c6\",\"problem_graphical_antv代码片段集锦.md\":\"3d28f150\",\"frontend_javascript_常见算法.md\":\"0cd56de3\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZerDocs\",\"description\":\"Front-end learning document collection.\",\"base\":\"/zerdocs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"outline\":\"deep\",\"outlineTitle\":\"文章目录\",\"logo\":\"/logo.svg\",\"returnToTopLabel\":\"返回顶部\",\"sidebarMenuLabel\":\"目录\",\"darkModeSwitchLabel\":\"主题切换\",\"footer\":{\"message\":\"Released under the <a href=\\\"https://github.com/fxzer/zerdocs/blob/master/LICENSE\\\">MIT License</a>.\",\"copyright\":\"Copyright © 2023-present <a href=\\\"https://github.com/fxzer\\\">fxzer</a>.\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"🎨 FrontEnd\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"🗃️ BackEnd\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"🚚 Framework\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"},{\"text\":\"📝 Problem\",\"link\":\"/Problem/\"},{\"text\":\"🧑‍💻 Interview\",\"link\":\"/Interview/\"},{\"text\":\"🛠 GoodTool\",\"link\":\"/GoodTool/\"}],\"editLink\":{\"pattern\":\"https://github.com/fxzer/zerdocs/edit/master/docs/:path\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/fxzer/zerdocs\"},{\"link\":\"https://gitee.com/fxzer/zerdocs\",\"icon\":{\"svg\":\"<svg t=\\\"1677484943818\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"3905\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#888888\\\" p-id=\\\"3906\\\"></path></svg>\"}},{\"link\":\"https://juejin.cn/user/3642028720663127/posts\",\"icon\":{\"svg\":\"<svg t=\\\"1675304957957\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"1427\\\" width=\\\"280\\\" height=\\\"280\\\"><path d=\\\"M462.06826667 138.4448c-24.49813333 19.34933333-47.28 37.4496-50.5568 40.25813333l-6.24106667 4.992 11.7024 9.20746667c6.39786667 5.1488 12.64 10.14186667 13.888 11.23413333 1.248 1.09226667 19.19253333 15.29173333 39.63306667 31.67573334l37.2928 29.648 5.61813333-4.21333334c3.12-2.34026667 24.8096-19.6608 48.3712-38.38506666 23.40586667-18.72533333 44.0032-34.95253333 45.56373333-35.88906667 1.71626667-1.09226667 2.96426667-2.34026667 2.96426667-2.96533333 0-0.4672-10.29866667-9.20533333-22.9376-19.03573334-12.79466667-9.9872-24.1856-19.0368-25.43466667-20.12906666-17.008-13.888-53.0528-41.66293333-54.144-41.66293334-0.62506667 0.1568-21.2224 15.9168-45.71946666 35.26506667z m248.88 192.39466667C507.16266667 492.02666667 508.7232 490.77866667 504.97813333 488.4384c-3.2768-2.0288-12.3264-9.05066667-68.34453333-53.36533333-9.67466667-7.64586667-19.81653333-15.76-22.78186667-17.94453334-2.96533333-2.34026667-9.36213333-7.33333333-14.19946666-11.23413333-4.992-3.9008-11.39093333-8.89493333-14.19946667-11.2352-14.04266667-10.92266667-75.83466667-59.76213333-108.91413333-85.8208-6.24213333-4.99306667-12.17066667-9.05066667-12.95146667-9.05066667-0.77973333 0-11.7024 8.27093333-24.1856 18.25706667-12.4832 10.14186667-24.1856 19.50506667-25.90293333 20.75306667-1.872 1.248-5.46133333 4.21333333-7.95733334 6.5536-2.496 2.496-5.14986667 4.36906667-5.77386666 4.36906666-3.2768 0-0.77973333 3.2768 6.86613333 9.36213334 4.36906667 3.43253333 9.36213333 7.33333333 10.76693333 8.5824 1.40373333 1.09226667 10.92266667 8.58133333 21.06453334 16.53973333s24.81066667 19.50506667 32.45653333 25.58933333c20.59733333 16.22933333 34.016 26.9952 136.37653333 107.82293334 51.02506667 40.25813333 94.71573333 74.43093333 96.90026667 75.83466666 3.9008 2.6528 4.21333333 2.6528 7.95733333-0.31146666a1110.848 1110.848 0 0 0 17.1648-13.57546667c7.33333333-5.77386667 15.76-12.4832 18.72426667-14.82346667 32.144-25.27893333 85.35253333-67.25333333 87.2256-68.8128 1.248-1.09226667 13.26293333-10.45546667 26.52586667-20.90986666s40.41386667-31.67573333 60.07466666-47.27893334c19.8176-15.60426667 49.3088-38.85333333 65.84853334-51.8048 16.53973333-12.95146667 29.64693333-24.02986667 29.33546666-24.81066666-0.93653333-1.248-61.47946667-50.24426667-63.97653333-51.49226667-0.77973333-0.46826667-19.81653333 13.57546667-42.13013333 31.20746667z\\\" fill=\\\"#515151\\\" p-id=\\\"1428\\\"></path><path d=\\\"M27.65866667 487.8144c-16.22933333 13.1072-30.4288 24.96533333-31.6768 26.2144-2.496 2.34026667-5.7728-0.46933333 85.35253333 71.3088 35.4208 27.93066667 34.7968 27.46346667 61.47946667 48.528 11.0784 8.73813333 38.6976 30.58346667 61.6352 48.528 40.72533333 32.144 47.904 37.76106667 56.17386666 44.31466667 2.18453333 1.87306667 24.49813333 19.34933333 49.46346667 39.01013333 24.81066667 19.6608 79.11146667 62.41493333 120.46186667 95.0272 41.50613333 32.6112 75.83466667 59.4496 76.6144 59.76213333 0.7808 0.31253333 7.95733333-4.6816 15.91573333-11.0784 23.25013333-18.10133333 96.27626667-75.67893333 108.2912-85.1968 6.08533333-4.83733333 13.7312-10.92266667 17.008-13.41866666 3.2768-2.65386667 6.86506667-5.46133333 7.8016-6.24213334 0.93653333-0.93653333 12.64-10.14293333 25.90186667-20.59733333 22.15786667-17.16373333 63.04-49.30773333 68.65706666-53.98933333 1.248-1.09226667 5.46133333-4.36906667 9.36213334-7.33333334 3.9008-2.96533333 8.42666667-6.70933333 10.14293333-8.11413333 1.71626667-1.4048 15.76-12.4832 31.20746667-24.65386667 31.05066667-24.34133333 45.09546667-35.4208 94.4032-74.27413333 18.4128-14.512 34.64-27.15093333 35.88906666-28.2432 2.65173333-2.18453333 33.54773333-26.52693333 47.59146667-37.60533333 5.1488-3.9008 9.67466667-7.64586667 10.14186667-8.11413334 0.46933333-0.624 6.39786667-5.1488 13.264-10.45333333 6.86506667-5.14986667 14.04266667-10.92266667 16.07146666-12.64l3.58933334-3.12106667-10.6112-8.26986666c-5.7728-4.68053333-10.92266667-8.73813333-11.39093334-9.20533334-1.248-1.4048-23.87306667-19.66186667-32.144-25.90293333-4.21333333-3.2768-7.8016-6.39786667-8.11306666-7.17866667-1.4048-3.27573333-7.17866667 0.1568-31.20853334 19.1936-14.3552 11.23413333-27.4624 21.5328-29.17866666 22.9376-1.71733333 1.56053333-11.2352 8.89386667-21.0656 16.69546667-9.8304 7.64586667-18.256 14.35626667-18.72426667 14.82453333-0.46826667 0.4672-7.02186667 5.7728-14.82346667 11.7024-7.64586667 5.9296-16.22826667 12.4832-18.88 14.66666667-5.3056 4.37013333-5.77386667 4.68266667-21.6896 17.3216-5.93066667 4.68053333-12.01493333 9.36213333-13.264 10.45333333-1.248 1.09333333-21.68853333 17.1648-45.25013333 35.5776-23.56266667 18.56853333-44.31573333 34.95253333-46.032 36.35626667-1.71626667 1.56053333-15.44746667 12.32746667-30.42666667 24.02986667s-43.53493333 34.1728-63.50826666 49.9328c-19.81653333 15.76-45.0944 35.57653333-56.01706667 44.15893333s-24.81066667 19.504-30.896 24.34133333l-11.0784 8.89493334-4.6816-3.2768c-2.496-1.87306667-4.992-3.74506667-5.46133333-4.21333334-0.46826667-0.46826667-5.30453333-4.36906667-10.92266667-8.5824-12.63893333-9.8304-15.44746667-12.01493333-17.78773333-14.04373333-0.93653333-0.93546667-4.52586667-3.744-7.95733334-6.24106667-3.43466667-2.6528-6.55466667-4.99306667-7.02293333-5.46133333-0.46826667-0.46826667-7.33333333-6.08533333-15.44746667-12.4832-8.11413333-6.24106667-15.91573333-12.3264-17.16373333-13.41866667-1.4048-1.248-18.25706667-14.512-37.60533333-29.648-19.19253333-15.136-37.4496-29.4912-40.57066667-31.83146666-6.08533333-4.99306667-35.73226667-28.39893333-133.41226667-105.32586667-36.82453333-29.02293333-77.55093333-61.16693333-90.5024-71.3088-53.0528-42.1312-58.82666667-46.50026667-60.69866666-46.34346667-0.93546667 0-14.9792 10.92266667-31.20746667 24.02986667z\\\" fill=\\\"#515151\\\" p-id=\\\"1429\\\"></path></svg>\"}},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/228134791\"}],\"sidebar\":{\"/BackEnd/\":[{\"text\":\"NodeJS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"MongoDB笔记\",\"link\":\"/BackEnd/NodeJS/MongoDB笔记\"},{\"text\":\"Node大文件上传\",\"link\":\"/BackEnd/NodeJS/Node大文件上传\"},{\"text\":\"Node学习笔记\",\"link\":\"/BackEnd/NodeJS/Node学习笔记\"},{\"text\":\"Node简单上传文件\",\"link\":\"/BackEnd/NodeJS/Node简单上传文件\"}]},{\"text\":\"Server\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Docker学习笔记\",\"link\":\"/BackEnd/Server/Docker学习笔记\"},{\"text\":\"Nginx学习笔记\",\"link\":\"/BackEnd/Server/Nginx学习笔记\"}]}],\"/Framework/\":[{\"text\":\"Angular\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Angular基础总结一\",\"link\":\"/Framework/Angular/Angular基础总结一\"},{\"text\":\"Angular基础总结三\",\"link\":\"/Framework/Angular/Angular基础总结三\"},{\"text\":\"Angular基础总结二\",\"link\":\"/Framework/Angular/Angular基础总结二\"}]},{\"text\":\"React\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"React基础总结一\",\"link\":\"/Framework/React/React基础总结一\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vite原理学习\",\"link\":\"/Framework/Vue/Vite原理学习\"},{\"text\":\"Vue3补漏笔记\",\"link\":\"/Framework/Vue/Vue3补漏笔记\"},{\"text\":\"分页与搜索条件记录并回显优化\",\"link\":\"/Framework/Vue/分页与搜索条件记录并回显优化\"},{\"text\":\"列表最后一条数据删除处理\",\"link\":\"/Framework/Vue/列表最后一条数据删除处理\"}]}],\"/FrontEnd/\":[{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Grid布局学习笔记\",\"link\":\"/FrontEnd/CSS/Grid布局学习笔记\"},{\"text\":\"常用代码段\",\"link\":\"/FrontEnd/CSS/常用代码段\"},{\"text\":\"揭秘读书摘要\",\"link\":\"/FrontEnd/CSS/揭秘读书摘要\"}]},{\"text\":\"Git\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Git常用操作\",\"link\":\"/FrontEnd/Git/Git常用操作\"},{\"text\":\"Terminal终端美化\",\"link\":\"/FrontEnd/Git/Terminal终端美化\"},{\"text\":\"配置多个平台SSH\",\"link\":\"/FrontEnd/Git/配置多个平台SSH\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"async与await\",\"link\":\"/FrontEnd/JavaScript/async与await\"},{\"text\":\"代码分支优化\",\"link\":\"/FrontEnd/JavaScript/代码分支优化\"},{\"text\":\"图片懒加载\",\"link\":\"/FrontEnd/JavaScript/图片懒加载\"},{\"text\":\"基础复习一\",\"link\":\"/FrontEnd/JavaScript/基础复习一\"},{\"text\":\"基础复习二\",\"link\":\"/FrontEnd/JavaScript/基础复习二\"},{\"text\":\"常见算法\",\"link\":\"/FrontEnd/JavaScript/常见算法\"},{\"text\":\"手写Promise\",\"link\":\"/FrontEnd/JavaScript/手写Promise\"},{\"text\":\"数据去重\",\"link\":\"/FrontEnd/JavaScript/数据去重\"},{\"text\":\"数组求集合\",\"link\":\"/FrontEnd/JavaScript/数组求集合\"},{\"text\":\"文件系统\",\"link\":\"/FrontEnd/JavaScript/文件系统\"},{\"text\":\"正则表达式\",\"link\":\"/FrontEnd/JavaScript/正则表达式\"},{\"text\":\"获取目录结构\",\"link\":\"/FrontEnd/JavaScript/获取目录结构\"},{\"text\":\"高阶函数\",\"link\":\"/FrontEnd/JavaScript/高阶函数\"}]},{\"text\":\"Shell\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"自动部署脚本\",\"link\":\"/FrontEnd/Shell/自动部署脚本\"}]},{\"text\":\"TypeScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"初学笔记\",\"link\":\"/FrontEnd/TypeScript/初学笔记\"},{\"text\":\"进阶使用技巧\",\"link\":\"/FrontEnd/TypeScript/进阶使用技巧\"},{\"text\":\"配置文件详解\",\"link\":\"/FrontEnd/TypeScript/配置文件详解\"}]}],\"/GoodTool/\":[],\"/Interview/\":[{\"text\":\"Brower\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"事件循环机制\",\"link\":\"/Interview/Brower/事件循环机制\"},{\"text\":\"浏览器网页请求过程\",\"link\":\"/Interview/Brower/浏览器网页请求过程\"},{\"text\":\"计算机网络\",\"link\":\"/Interview/Brower/计算机网络\"}]},{\"text\":\"CSS\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"基础面试题\",\"link\":\"/Interview/CSS/基础面试题\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/CSS/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/CSS/高级面试题\"}]},{\"text\":\"JavaScript\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Promise相关\",\"link\":\"/Interview/JavaScript/Promise相关\"},{\"text\":\"原型与原型链\",\"link\":\"/Interview/JavaScript/原型与原型链\"},{\"text\":\"基础面试题\",\"link\":\"/Interview/JavaScript/基础面试题\"},{\"text\":\"字符串常用方法\",\"link\":\"/Interview/JavaScript/字符串常用方法\"},{\"text\":\"进阶面试题\",\"link\":\"/Interview/JavaScript/进阶面试题\"},{\"text\":\"高级面试题\",\"link\":\"/Interview/JavaScript/高级面试题\"}]},{\"text\":\"Vue\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue响应式原理\",\"link\":\"/Interview/Vue/Vue响应式原理\"},{\"text\":\"Vue基础篇\",\"link\":\"/Interview/Vue/Vue基础篇\"},{\"text\":\"Vue声明周期\",\"link\":\"/Interview/Vue/Vue声明周期\"},{\"text\":\"Vue进阶篇\",\"link\":\"/Interview/Vue/Vue进阶篇\"},{\"text\":\"npm run xxx执行过程\",\"link\":\"/Interview/Vue/npm run xxx执行过程\"},{\"text\":\"前端项目优化\",\"link\":\"/Interview/Vue/前端项目优化\"},{\"text\":\"常见Path区别\",\"link\":\"/Interview/Vue/常见Path区别\"},{\"text\":\"自定义指令\",\"link\":\"/Interview/Vue/自定义指令\"}]}],\"/Problem/\":[{\"text\":\"Graphical\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Antv代码片段集锦\",\"link\":\"/Problem/Graphical/Antv代码片段集锦\"},{\"text\":\"Antv使用总结\",\"link\":\"/Problem/Graphical/Antv使用总结\"},{\"text\":\"Echarts问题总结\",\"link\":\"/Problem/Graphical/Echarts问题总结\"}]},{\"text\":\"Nuxt3\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Nuxt3项目踩坑\",\"link\":\"/Problem/Nuxt3/Nuxt3项目踩坑\"}]},{\"text\":\"VitePress\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"VitePress踩坑记录\",\"link\":\"/Problem/VitePress/VitePress踩坑记录\"},{\"text\":\"VuePress踩坑记录\",\"link\":\"/Problem/VitePress/VuePress踩坑记录\"}]},{\"text\":\"VueProject\",\"collapsible\":true,\"collapsed\":false,\"items\":[{\"text\":\"Vue项目踩坑一\",\"link\":\"/Problem/VueProject/Vue项目踩坑一\"}]}],\"/build/\":[]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/logo.svg b/logo.svg
new file mode 100644
index 00000000..53669542
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,21 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16C0 7.16345 7.16344 0 16 0H84C92.8366 0 100 7.16344 100 16V84C100 92.8366 92.8366 100 84 100H16C7.16345 100 0 92.8366 0 84V16Z" fill="url(#paint0_linear_26_132)"/>
+<path d="M82.9588 46.7328C82.3343 40.3912 79.9088 34.3908 76.0086 29.421C74.6447 27.6832 72.0899 27.6961 70.5278 29.2582C68.9657 30.8203 68.9961 33.3379 70.2946 35.1251C73.3294 39.3021 75.1193 44.442 75.1193 50C75.1193 57.9615 71.4467 65.0652 65.7033 69.7094C61.6031 73.0248 56.4526 69.2527 56.4526 63.9797V22.6667C56.4526 19.353 53.7663 16.6667 50.4526 16.6667C50.2339 16.6667 50.0179 16.6784 49.8052 16.7012C49.795 16.7023 49.786 16.6943 49.786 16.684C49.786 16.6744 49.7782 16.6667 49.7687 16.6667C42.063 16.6707 34.5964 19.3443 28.6396 24.233C22.6782 29.1253 18.5977 35.9333 17.0932 43.497C16.9272 44.3316 16.7936 45.1698 16.6923 46.0096C16.4278 48.2029 18.2435 50 20.4526 50C22.6617 50 24.4195 48.197 24.7642 46.0149C25.8691 39.0223 29.8349 32.981 35.4252 29.1274C39.6185 26.2368 44.4526 30.0317 44.4526 35.1248V77.3333C44.4526 80.4158 46.777 82.9553 49.7687 83.2948C49.7785 83.2959 49.7859 83.3042 49.7859 83.314C49.7859 83.3247 49.7773 83.3333 49.7666 83.3333C49.7027 83.3333 49.6387 83.3331 49.5747 83.3327C49.8008 83.3341 50.0269 83.3332 50.253 83.3301C50.3193 83.3322 50.3858 83.3333 50.4526 83.3333C50.62 83.3333 50.7857 83.3265 50.9496 83.313C53.8168 83.2129 56.6785 82.7424 59.4622 81.898C66.842 79.6594 73.2172 74.9312 77.5017 68.519C81.7861 62.1068 83.7147 54.4075 82.9588 46.7328Z" fill="url(#paint1_linear_26_132)"/>
+<path d="M61.3333 16.6667H63.3333C66.647 16.6667 69.3333 19.353 69.3333 22.6667V24.6667H61.3333V16.6667Z" fill="url(#paint2_linear_26_132)"/>
+<defs>
+<linearGradient id="paint0_linear_26_132" x1="-0.828096" y1="-3.3213" x2="66.6389" y2="78.3339" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_26_132" x1="27.9858" y1="2.2418" x2="35.0281" y2="90.3111" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+<linearGradient id="paint2_linear_26_132" x1="27.9858" y1="2.2418" x2="35.0281" y2="90.3111" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/manifest.webmanifest b/manifest.webmanifest
new file mode 100644
index 00000000..15ac156d
--- /dev/null
+++ b/manifest.webmanifest
@@ -0,0 +1 @@
+{"name":"zerdocs","short_name":"zerdocs","start_url":"/zerdocs/","display":"standalone","background_color":"#ffffff","lang":"en","scope":"/zerdocs/","theme_color":"#ffffff","icons":[{"src":"pwa-512x512.png","types":"img/png","sizes":"512x512","purpose":"any"},{"src":"pwa-192x192.png","types":"img/png","sizes":"192x192","purpose":"maskable"}]}
diff --git a/pwa-192x192.png b/pwa-192x192.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b011cbafe874b4951139d7f99058ee752a19c05
GIT binary patch
literal 35142
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
KMNUMnLSTZ@`=f>c

literal 0
HcmV?d00001

diff --git a/pwa-512x512.png b/pwa-512x512.png
new file mode 100644
index 0000000000000000000000000000000000000000..80c83313a927931969fcbec3ea8be4fd624e2e6f
GIT binary patch
literal 220652
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

literal 0
HcmV?d00001

diff --git a/registerSW.js b/registerSW.js
new file mode 100644
index 00000000..26fc40d0
--- /dev/null
+++ b/registerSW.js
@@ -0,0 +1 @@
+if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/zerdocs/sw.js', { scope: '/zerdocs/' })})}
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 00000000..078504b1
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://fxzer.github.io/BackEnd/NodeJS/MongoDB%E7%AC%94%E8%AE%B0</loc></url><url><loc>https://fxzer.github.io/BackEnd/NodeJS/Node%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0</loc></url><url><loc>https://fxzer.github.io/BackEnd/NodeJS/Node%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0</loc></url><url><loc>https://fxzer.github.io/BackEnd/NodeJS/Node%E7%AE%80%E5%8D%95%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6</loc></url><url><loc>https://fxzer.github.io/BackEnd/Server/Docker%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0</loc></url><url><loc>https://fxzer.github.io/BackEnd/Server/Nginx%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0</loc></url><url><loc>https://fxzer.github.io/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80</loc></url><url><loc>https://fxzer.github.io/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%89</loc></url><url><loc>https://fxzer.github.io/Framework/Angular/Angular%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%BA%8C</loc></url><url><loc>https://fxzer.github.io/Framework/React/React%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E4%B8%80</loc></url><url><loc>https://fxzer.github.io/Framework/Vue/Vite%E5%8E%9F%E7%90%86%E5%AD%A6%E4%B9%A0</loc></url><url><loc>https://fxzer.github.io/Framework/Vue/Vue3%E8%A1%A5%E6%BC%8F%E7%AC%94%E8%AE%B0</loc></url><url><loc>https://fxzer.github.io/Framework/Vue/%E5%88%86%E9%A1%B5%E4%B8%8E%E6%90%9C%E7%B4%A2%E6%9D%A1%E4%BB%B6%E8%AE%B0%E5%BD%95%E5%B9%B6%E5%9B%9E%E6%98%BE%E4%BC%98%E5%8C%96</loc></url><url><loc>https://fxzer.github.io/Framework/Vue/%E5%88%97%E8%A1%A8%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E6%95%B0%E6%8D%AE%E5%88%A0%E9%99%A4%E5%A4%84%E7%90%86</loc></url><url><loc>https://fxzer.github.io/FrontEnd/CSS/Grid%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0</loc></url><url><loc>https://fxzer.github.io/FrontEnd/CSS/%E5%B8%B8%E7%94%A8%E4%BB%A3%E7%A0%81%E6%AE%B5</loc></url><url><loc>https://fxzer.github.io/FrontEnd/CSS/%E6%8F%AD%E7%A7%98%E8%AF%BB%E4%B9%A6%E6%91%98%E8%A6%81</loc></url><url><loc>https://fxzer.github.io/FrontEnd/Git/Git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C</loc></url><url><loc>https://fxzer.github.io/FrontEnd/Git/Terminal%E7%BB%88%E7%AB%AF%E7%BE%8E%E5%8C%96</loc></url><url><loc>https://fxzer.github.io/FrontEnd/Git/%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B9%B3%E5%8F%B0SSH</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/async%E4%B8%8Eawait</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E4%BB%A3%E7%A0%81%E5%88%86%E6%94%AF%E4%BC%98%E5%8C%96</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%B8%80</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E5%9F%BA%E7%A1%80%E5%A4%8D%E4%B9%A0%E4%BA%8C</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E6%89%8B%E5%86%99Promise</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E6%95%B0%E6%8D%AE%E5%8E%BB%E9%87%8D</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E6%95%B0%E7%BB%84%E6%B1%82%E9%9B%86%E5%90%88</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E8%8E%B7%E5%8F%96%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84</loc></url><url><loc>https://fxzer.github.io/FrontEnd/JavaScript/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0</loc></url><url><loc>https://fxzer.github.io/FrontEnd/Shell/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E8%84%9A%E6%9C%AC</loc></url><url><loc>https://fxzer.github.io/FrontEnd/TypeScript/%E5%88%9D%E5%AD%A6%E7%AC%94%E8%AE%B0</loc></url><url><loc>https://fxzer.github.io/FrontEnd/TypeScript/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7</loc></url><url><loc>https://fxzer.github.io/FrontEnd/TypeScript/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%A6%E8%A7%A3</loc></url><url><loc>https://fxzer.github.io/GoodTool/</loc></url><url><loc>https://fxzer.github.io/Interview/Brower/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6</loc></url><url><loc>https://fxzer.github.io/Interview/Brower/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B</loc></url><url><loc>https://fxzer.github.io/Interview/Brower/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C</loc></url><url><loc>https://fxzer.github.io/Interview/CSS/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98</loc></url><url><loc>https://fxzer.github.io/Interview/CSS/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98</loc></url><url><loc>https://fxzer.github.io/Interview/CSS/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98</loc></url><url><loc>https://fxzer.github.io/Interview/JavaScript/Promise%E7%9B%B8%E5%85%B3</loc></url><url><loc>https://fxzer.github.io/Interview/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE</loc></url><url><loc>https://fxzer.github.io/Interview/JavaScript/%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98</loc></url><url><loc>https://fxzer.github.io/Interview/JavaScript/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95</loc></url><url><loc>https://fxzer.github.io/Interview/JavaScript/%E8%BF%9B%E9%98%B6%E9%9D%A2%E8%AF%95%E9%A2%98</loc></url><url><loc>https://fxzer.github.io/Interview/JavaScript/%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98</loc></url><url><loc>https://fxzer.github.io/Interview/Vue/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86</loc></url><url><loc>https://fxzer.github.io/Interview/Vue/Vue%E5%9F%BA%E7%A1%80%E7%AF%87</loc></url><url><loc>https://fxzer.github.io/Interview/Vue/Vue%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F</loc></url><url><loc>https://fxzer.github.io/Interview/Vue/Vue%E8%BF%9B%E9%98%B6%E7%AF%87</loc></url><url><loc>https://fxzer.github.io/Interview/Vue/npm%20run%20xxx%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B</loc></url><url><loc>https://fxzer.github.io/Interview/Vue/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96</loc></url><url><loc>https://fxzer.github.io/Interview/Vue/%E5%B8%B8%E8%A7%81Path%E5%8C%BA%E5%88%AB</loc></url><url><loc>https://fxzer.github.io/Interview/Vue/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4</loc></url><url><loc>https://fxzer.github.io/Interview/</loc></url><url><loc>https://fxzer.github.io/Problem/Graphical/Antv%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E9%9B%86%E9%94%A6</loc></url><url><loc>https://fxzer.github.io/Problem/Graphical/Antv%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93</loc></url><url><loc>https://fxzer.github.io/Problem/Graphical/Echarts%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93</loc></url><url><loc>https://fxzer.github.io/Problem/Nuxt3/Nuxt3%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91</loc></url><url><loc>https://fxzer.github.io/Problem/VitePress/VitePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95</loc></url><url><loc>https://fxzer.github.io/Problem/VitePress/VuePress%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95</loc></url><url><loc>https://fxzer.github.io/Problem/VueProject/Vue%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91%E4%B8%80</loc></url><url><loc>https://fxzer.github.io/Problem/</loc></url><url><loc>https://fxzer.github.io/zerdocs</loc></url><url><loc>https://fxzer.github.io/extra-page</loc><changefreq>monthly</changefreq><priority>0.8</priority></url></urlset>
\ No newline at end of file
diff --git a/socialIcons.ts b/socialIcons.ts
new file mode 100644
index 00000000..a5950059
--- /dev/null
+++ b/socialIcons.ts
@@ -0,0 +1,9 @@
+
+export const icons = {
+  bilibili: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+  width="20" height="20" viewBox="0 0 512 512">
+  <path fill="currentColor"
+    d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z">
+  </path>
+</svg>`
+}
\ No newline at end of file
diff --git a/sw.js b/sw.js
new file mode 100644
index 00000000..90362587
--- /dev/null
+++ b/sw.js
@@ -0,0 +1 @@
+if(!self.define){let e,s={};const r=(r,n)=>(r=new URL(r+".js",n).href,s[r]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=r,e.onload=s,document.head.appendChild(e)}else e=r,importScripts(r),s()})).then((()=>{let e=s[r];if(!e)throw new Error(`Module ${r} didn’t register its module`);return e})));self.define=(n,l)=>{const a=e||("document"in self?document.currentScript.src:"")||location.href;if(s[a])return;let i={};const d=e=>r(e,a),t={module:{uri:a},exports:i,require:d};s[a]=Promise.all(n.map((e=>t[e]||d(e)))).then((e=>(l(...e),i)))}}define(["./workbox-fa446783"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"404.html",revision:"e87db43fe77f4203f35b5630ea3a98f3"},{url:"assets/app.c5d8d5ce.js",revision:null},{url:"assets/BackEnd_NodeJS_MongoDB笔记.md.eb6021c2.js",revision:null},{url:"assets/BackEnd_NodeJS_MongoDB笔记.md.eb6021c2.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node大文件上传.md.84c9f765.js",revision:null},{url:"assets/BackEnd_NodeJS_Node大文件上传.md.84c9f765.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node学习笔记.md.f1b234ff.js",revision:null},{url:"assets/BackEnd_NodeJS_Node学习笔记.md.f1b234ff.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node简单上传文件.md.faa27b4e.js",revision:null},{url:"assets/BackEnd_NodeJS_Node简单上传文件.md.faa27b4e.lean.js",revision:null},{url:"assets/BackEnd_Server_Docker学习笔记.md.d29feca6.js",revision:null},{url:"assets/BackEnd_Server_Docker学习笔记.md.d29feca6.lean.js",revision:null},{url:"assets/BackEnd_Server_Nginx学习笔记.md.9d658cc4.js",revision:null},{url:"assets/BackEnd_Server_Nginx学习笔记.md.9d658cc4.lean.js",revision:null},{url:"assets/chunks/@localSearchIndexroot.20abec5d.js",revision:null},{url:"assets/chunks/DemoWrap.1b6e7adf.js",revision:null},{url:"assets/chunks/framework.c53372a0.js",revision:null},{url:"assets/chunks/theme.1e9d2528.js",revision:null},{url:"assets/chunks/VPLocalSearchBox.0bede1e4.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结一.md.25af9886.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结一.md.25af9886.lean.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结三.md.574a1956.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结三.md.574a1956.lean.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结二.md.0a8462a7.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结二.md.0a8462a7.lean.js",revision:null},{url:"assets/Framework_React_React基础总结一.md.fc5d41af.js",revision:null},{url:"assets/Framework_React_React基础总结一.md.fc5d41af.lean.js",revision:null},{url:"assets/Framework_Vue_Vite原理学习.md.8895a11d.js",revision:null},{url:"assets/Framework_Vue_Vite原理学习.md.8895a11d.lean.js",revision:null},{url:"assets/Framework_Vue_Vue3补漏笔记.md.6422a5f9.js",revision:null},{url:"assets/Framework_Vue_Vue3补漏笔记.md.6422a5f9.lean.js",revision:null},{url:"assets/Framework_Vue_分页与搜索条件记录并回显优化.md.8805bdc2.js",revision:null},{url:"assets/Framework_Vue_分页与搜索条件记录并回显优化.md.8805bdc2.lean.js",revision:null},{url:"assets/Framework_Vue_列表最后一条数据删除处理.md.9f59b85b.js",revision:null},{url:"assets/Framework_Vue_列表最后一条数据删除处理.md.9f59b85b.lean.js",revision:null},{url:"assets/FrontEnd_CSS_Grid布局学习笔记.md.6624dd93.js",revision:null},{url:"assets/FrontEnd_CSS_Grid布局学习笔记.md.6624dd93.lean.js",revision:null},{url:"assets/FrontEnd_CSS_常用代码段.md.083fb786.js",revision:null},{url:"assets/FrontEnd_CSS_常用代码段.md.083fb786.lean.js",revision:null},{url:"assets/FrontEnd_CSS_揭秘读书摘要.md.3689a434.js",revision:null},{url:"assets/FrontEnd_CSS_揭秘读书摘要.md.3689a434.lean.js",revision:null},{url:"assets/FrontEnd_Git_Git常用操作.md.a0e87468.js",revision:null},{url:"assets/FrontEnd_Git_Git常用操作.md.a0e87468.lean.js",revision:null},{url:"assets/FrontEnd_Git_Terminal终端美化.md.6674896b.js",revision:null},{url:"assets/FrontEnd_Git_Terminal终端美化.md.6674896b.lean.js",revision:null},{url:"assets/FrontEnd_Git_配置多个平台SSH.md.49289c60.js",revision:null},{url:"assets/FrontEnd_Git_配置多个平台SSH.md.49289c60.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_async与await.md.d21c9cb0.js",revision:null},{url:"assets/FrontEnd_JavaScript_async与await.md.d21c9cb0.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_代码分支优化.md.e8fda00c.js",revision:null},{url:"assets/FrontEnd_JavaScript_代码分支优化.md.e8fda00c.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_图片懒加载.md.3d5465d0.js",revision:null},{url:"assets/FrontEnd_JavaScript_图片懒加载.md.3d5465d0.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习一.md.a8906ce7.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习一.md.a8906ce7.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习二.md.8f89af07.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习二.md.8f89af07.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_常见算法.md.0cd56de3.js",revision:null},{url:"assets/FrontEnd_JavaScript_常见算法.md.0cd56de3.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_手写Promise.md.fbddbbf5.js",revision:null},{url:"assets/FrontEnd_JavaScript_手写Promise.md.fbddbbf5.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_数据去重.md.f1eaba48.js",revision:null},{url:"assets/FrontEnd_JavaScript_数据去重.md.f1eaba48.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_数组求集合.md.9e71e873.js",revision:null},{url:"assets/FrontEnd_JavaScript_数组求集合.md.9e71e873.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_文件系统.md.1488f287.js",revision:null},{url:"assets/FrontEnd_JavaScript_文件系统.md.1488f287.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_正则表达式.md.a9560fb8.js",revision:null},{url:"assets/FrontEnd_JavaScript_正则表达式.md.a9560fb8.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_获取目录结构.md.f15b6a8f.js",revision:null},{url:"assets/FrontEnd_JavaScript_获取目录结构.md.f15b6a8f.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_高阶函数.md.f3e81d0b.js",revision:null},{url:"assets/FrontEnd_JavaScript_高阶函数.md.f3e81d0b.lean.js",revision:null},{url:"assets/FrontEnd_Shell_自动部署脚本.md.7ce896dd.js",revision:null},{url:"assets/FrontEnd_Shell_自动部署脚本.md.7ce896dd.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_初学笔记.md.a7be054a.js",revision:null},{url:"assets/FrontEnd_TypeScript_初学笔记.md.a7be054a.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_进阶使用技巧.md.21fda5ca.js",revision:null},{url:"assets/FrontEnd_TypeScript_进阶使用技巧.md.21fda5ca.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_配置文件详解.md.7a55465d.js",revision:null},{url:"assets/FrontEnd_TypeScript_配置文件详解.md.7a55465d.lean.js",revision:null},{url:"assets/GoodTool_index.md.2cde5d0e.js",revision:null},{url:"assets/GoodTool_index.md.2cde5d0e.lean.js",revision:null},{url:"assets/index.md.4cc1630f.js",revision:null},{url:"assets/index.md.4cc1630f.lean.js",revision:null},{url:"assets/Interview_Brower_事件循环机制.md.9f053692.js",revision:null},{url:"assets/Interview_Brower_事件循环机制.md.9f053692.lean.js",revision:null},{url:"assets/Interview_Brower_浏览器网页请求过程.md.1acb73dd.js",revision:null},{url:"assets/Interview_Brower_浏览器网页请求过程.md.1acb73dd.lean.js",revision:null},{url:"assets/Interview_Brower_计算机网络.md.73c84072.js",revision:null},{url:"assets/Interview_Brower_计算机网络.md.73c84072.lean.js",revision:null},{url:"assets/Interview_CSS_基础面试题.md.b72bdb12.js",revision:null},{url:"assets/Interview_CSS_基础面试题.md.b72bdb12.lean.js",revision:null},{url:"assets/Interview_CSS_进阶面试题.md.6b9b42f1.js",revision:null},{url:"assets/Interview_CSS_进阶面试题.md.6b9b42f1.lean.js",revision:null},{url:"assets/Interview_CSS_高级面试题.md.63a54546.js",revision:null},{url:"assets/Interview_CSS_高级面试题.md.63a54546.lean.js",revision:null},{url:"assets/Interview_index.md.ff0a75dc.js",revision:null},{url:"assets/Interview_index.md.ff0a75dc.lean.js",revision:null},{url:"assets/Interview_JavaScript_Promise相关.md.1015a7af.js",revision:null},{url:"assets/Interview_JavaScript_Promise相关.md.1015a7af.lean.js",revision:null},{url:"assets/Interview_JavaScript_原型与原型链.md.4ad216b5.js",revision:null},{url:"assets/Interview_JavaScript_原型与原型链.md.4ad216b5.lean.js",revision:null},{url:"assets/Interview_JavaScript_基础面试题.md.0df982a7.js",revision:null},{url:"assets/Interview_JavaScript_基础面试题.md.0df982a7.lean.js",revision:null},{url:"assets/Interview_JavaScript_字符串常用方法.md.4808f793.js",revision:null},{url:"assets/Interview_JavaScript_字符串常用方法.md.4808f793.lean.js",revision:null},{url:"assets/Interview_JavaScript_进阶面试题.md.c89e986d.js",revision:null},{url:"assets/Interview_JavaScript_进阶面试题.md.c89e986d.lean.js",revision:null},{url:"assets/Interview_JavaScript_高级面试题.md.0abc2056.js",revision:null},{url:"assets/Interview_JavaScript_高级面试题.md.0abc2056.lean.js",revision:null},{url:"assets/Interview_Vue_npm run xxx执行过程.md.9da37746.js",revision:null},{url:"assets/Interview_Vue_npm run xxx执行过程.md.9da37746.lean.js",revision:null},{url:"assets/Interview_Vue_Vue响应式原理.md.2eeac150.js",revision:null},{url:"assets/Interview_Vue_Vue响应式原理.md.2eeac150.lean.js",revision:null},{url:"assets/Interview_Vue_Vue基础篇.md.d7fd744f.js",revision:null},{url:"assets/Interview_Vue_Vue基础篇.md.d7fd744f.lean.js",revision:null},{url:"assets/Interview_Vue_Vue声明周期.md.4220f397.js",revision:null},{url:"assets/Interview_Vue_Vue声明周期.md.4220f397.lean.js",revision:null},{url:"assets/Interview_Vue_Vue进阶篇.md.786b9622.js",revision:null},{url:"assets/Interview_Vue_Vue进阶篇.md.786b9622.lean.js",revision:null},{url:"assets/Interview_Vue_前端项目优化.md.3cd67a0e.js",revision:null},{url:"assets/Interview_Vue_前端项目优化.md.3cd67a0e.lean.js",revision:null},{url:"assets/Interview_Vue_常见Path区别.md.56f4fc59.js",revision:null},{url:"assets/Interview_Vue_常见Path区别.md.56f4fc59.lean.js",revision:null},{url:"assets/Interview_Vue_自定义指令.md.3d2ea0a9.js",revision:null},{url:"assets/Interview_Vue_自定义指令.md.3d2ea0a9.lean.js",revision:null},{url:"assets/Problem_Graphical_Antv代码片段集锦.md.3d28f150.js",revision:null},{url:"assets/Problem_Graphical_Antv代码片段集锦.md.3d28f150.lean.js",revision:null},{url:"assets/Problem_Graphical_Antv使用总结.md.10b596c9.js",revision:null},{url:"assets/Problem_Graphical_Antv使用总结.md.10b596c9.lean.js",revision:null},{url:"assets/Problem_Graphical_Echarts问题总结.md.fe67d408.js",revision:null},{url:"assets/Problem_Graphical_Echarts问题总结.md.fe67d408.lean.js",revision:null},{url:"assets/Problem_index.md.724652c6.js",revision:null},{url:"assets/Problem_index.md.724652c6.lean.js",revision:null},{url:"assets/Problem_Nuxt3_Nuxt3项目踩坑.md.e3bdda07.js",revision:null},{url:"assets/Problem_Nuxt3_Nuxt3项目踩坑.md.e3bdda07.lean.js",revision:null},{url:"assets/Problem_VitePress_VitePress踩坑记录.md.007e02bc.js",revision:null},{url:"assets/Problem_VitePress_VitePress踩坑记录.md.007e02bc.lean.js",revision:null},{url:"assets/Problem_VitePress_VuePress踩坑记录.md.d7553dcf.js",revision:null},{url:"assets/Problem_VitePress_VuePress踩坑记录.md.d7553dcf.lean.js",revision:null},{url:"assets/Problem_VueProject_Vue项目踩坑一.md.5d32b46a.js",revision:null},{url:"assets/Problem_VueProject_Vue项目踩坑一.md.5d32b46a.lean.js",revision:null},{url:"assets/style.ca30dd5f.css",revision:null},{url:"BackEnd/NodeJS/MongoDB笔记.html",revision:"6fa1aed7030f69f08f405acf2502d0d3"},{url:"BackEnd/NodeJS/Node大文件上传.html",revision:"a557bb2dd4ad1edd3a67f4e634f9912d"},{url:"BackEnd/NodeJS/Node学习笔记.html",revision:"57b5a3d214f0c349e56192cfd8562f18"},{url:"BackEnd/NodeJS/Node简单上传文件.html",revision:"65613222629d7db41f242f0ad4bd711a"},{url:"BackEnd/Server/Docker学习笔记.html",revision:"036b2e33423baa47b63cec7e83aca161"},{url:"BackEnd/Server/Nginx学习笔记.html",revision:"12600bea4455d96bc3a30df9255ef85e"},{url:"Framework/Angular/Angular基础总结一.html",revision:"e67a1a600c4c4f3dad7e3bf3a9e9cfad"},{url:"Framework/Angular/Angular基础总结三.html",revision:"c6575496a2dc99033945fb6ec1ac5e25"},{url:"Framework/Angular/Angular基础总结二.html",revision:"2c57128e00edd6f16e6bf09883deca35"},{url:"Framework/React/React基础总结一.html",revision:"7b02257863eb625a82af0a0a7b5a876b"},{url:"Framework/Vue/Vite原理学习.html",revision:"d2eb221ec2f13fc992e8e665d5e4bf10"},{url:"Framework/Vue/Vue3补漏笔记.html",revision:"653ca29c4ed57a8840b7b9f8b4fdefb7"},{url:"Framework/Vue/分页与搜索条件记录并回显优化.html",revision:"d1d6dde8647f9562ca7c97405619079c"},{url:"Framework/Vue/列表最后一条数据删除处理.html",revision:"aa839c8a35315c0d130fc13183924e23"},{url:"FrontEnd/CSS/Grid布局学习笔记.html",revision:"312e04585f9184445a70710100d1f3d4"},{url:"FrontEnd/CSS/常用代码段.html",revision:"102f3df98828d0145c7f34b40d1078b1"},{url:"FrontEnd/CSS/揭秘读书摘要.html",revision:"a1324274b090e440e2d8ced238964b27"},{url:"FrontEnd/Git/Git常用操作.html",revision:"9727faad3302669341d79057ebd76ce8"},{url:"FrontEnd/Git/Terminal终端美化.html",revision:"77ed1ffaeaef91c0319d04196ecf5645"},{url:"FrontEnd/Git/配置多个平台SSH.html",revision:"53d170a276eb2e573d7cae1046e74a03"},{url:"FrontEnd/JavaScript/async与await.html",revision:"db67d6ac449ae54dc97f3e745acf7637"},{url:"FrontEnd/JavaScript/代码分支优化.html",revision:"af9a0de863a26196a08cf0812660b01b"},{url:"FrontEnd/JavaScript/图片懒加载.html",revision:"3f2142a3b6fe5d945e4e70b2b4b33253"},{url:"FrontEnd/JavaScript/基础复习一.html",revision:"a86153546f40713fd4b13f3908bf26ae"},{url:"FrontEnd/JavaScript/基础复习二.html",revision:"9b9de47e72d16f98664638e0e17bffba"},{url:"FrontEnd/JavaScript/常见算法.html",revision:"f2d3662bae834b195646b962e41d3cac"},{url:"FrontEnd/JavaScript/手写Promise.html",revision:"83bb23fbf5892a1fb6fc2e4c25b5bee6"},{url:"FrontEnd/JavaScript/数据去重.html",revision:"64c558c1d094bc3113b8acaf93ae9271"},{url:"FrontEnd/JavaScript/数组求集合.html",revision:"91d0f79c6fd67be0187c968a4874e062"},{url:"FrontEnd/JavaScript/文件系统.html",revision:"9e0d578342c81b1086c0f149ee6c8814"},{url:"FrontEnd/JavaScript/正则表达式.html",revision:"96c33365b3264af79318e05c750412a5"},{url:"FrontEnd/JavaScript/获取目录结构.html",revision:"9035f9cd169b5e3dcf5027fe9197cf79"},{url:"FrontEnd/JavaScript/高阶函数.html",revision:"21809b2db7cad48d62235f1c0227814b"},{url:"FrontEnd/Shell/自动部署脚本.html",revision:"9e3170e934f8f93b114b9d3d29dadd83"},{url:"FrontEnd/TypeScript/初学笔记.html",revision:"b9ba3d395a50cdcfbd5f0779ff8a8f57"},{url:"FrontEnd/TypeScript/进阶使用技巧.html",revision:"5a591457e1a22d5f30f9f2ed98ce3cd6"},{url:"FrontEnd/TypeScript/配置文件详解.html",revision:"d4a87bd4aacd9c2f27a415ad66e880ff"},{url:"GoodTool/index.html",revision:"3acfad58f9cee976a30e2f0fa31b067d"},{url:"index.html",revision:"b1aaa1588b5288ad57cc0f1ae588b40c"},{url:"Interview/Brower/事件循环机制.html",revision:"ed47d89475d03693886b95bc26bec037"},{url:"Interview/Brower/浏览器网页请求过程.html",revision:"37c2bcbec782d54bab93edfd54a74d9e"},{url:"Interview/Brower/计算机网络.html",revision:"e61d17ab4d98fd4acd8119b518b33f76"},{url:"Interview/CSS/基础面试题.html",revision:"79b7323c8c6af203bc52965aeb2edd42"},{url:"Interview/CSS/进阶面试题.html",revision:"b4a184072e964a310db7d4a28d2c6e92"},{url:"Interview/CSS/高级面试题.html",revision:"6d6c2404f111046fb5e443f173bdd3d8"},{url:"Interview/index.html",revision:"d6374db1df3a19ab6c3e73271739c4a8"},{url:"Interview/JavaScript/Promise相关.html",revision:"d571639d139453ac82949d856c089446"},{url:"Interview/JavaScript/原型与原型链.html",revision:"80a93283f8c3553aea2018366dfc7938"},{url:"Interview/JavaScript/基础面试题.html",revision:"7f417e6acc4e66ac3939b02fcdda4243"},{url:"Interview/JavaScript/字符串常用方法.html",revision:"f6886427cae7510cffa2fb26528dd49c"},{url:"Interview/JavaScript/进阶面试题.html",revision:"3027f402aa7f5775169a9d8be2fde950"},{url:"Interview/JavaScript/高级面试题.html",revision:"eec2d696b50de3f8d1b94018ec1ec135"},{url:"Interview/Vue/npm run xxx执行过程.html",revision:"78a8f0379f08540ea148ed63a8ff11e7"},{url:"Interview/Vue/Vue响应式原理.html",revision:"d89f8d2484ede5cd1fbc210e42dc2249"},{url:"Interview/Vue/Vue基础篇.html",revision:"0f4f72a16a37e5920456904a9defe044"},{url:"Interview/Vue/Vue声明周期.html",revision:"3dfe74095a54aa6febb5a2c3fe8ed5ac"},{url:"Interview/Vue/Vue进阶篇.html",revision:"8ba96c5710ab321e363c43c34240e534"},{url:"Interview/Vue/前端项目优化.html",revision:"6c9f8b1f918049515a6415c1eba88b5c"},{url:"Interview/Vue/常见Path区别.html",revision:"1d3968c627cbd11c97195f81b459fc2b"},{url:"Interview/Vue/自定义指令.html",revision:"36d433972846dacccba61de5673b88a3"},{url:"Problem/Graphical/Antv代码片段集锦.html",revision:"0250c0eded3d726adaf675f98a3aa1c6"},{url:"Problem/Graphical/Antv使用总结.html",revision:"c96fcfd5207a2f9ae6eaa25ceae12547"},{url:"Problem/Graphical/Echarts问题总结.html",revision:"50bf018028b723263c35e01b39f06a73"},{url:"Problem/index.html",revision:"3b6bbc63eedfa0dbbe51b7a2f16da77e"},{url:"Problem/Nuxt3/Nuxt3项目踩坑.html",revision:"5f2a128296e7b96bfa5c207b00156b8d"},{url:"Problem/VitePress/VitePress踩坑记录.html",revision:"e6c8b8704bee434c147e1c01d6b69a10"},{url:"Problem/VitePress/VuePress踩坑记录.html",revision:"59afc482bb57cbdb3ef81b094db0cd9e"},{url:"Problem/VueProject/Vue项目踩坑一.html",revision:"4556e5986a340c0896eac348eeb8dfa1"},{url:"registerSW.js",revision:"385b79d064fe7f8195f90acea5c7388b"},{url:"pwa-512x512.png",revision:"cb765af63e04e54c9125f175a7b67333"},{url:"pwa-192x192.png",revision:"26a17df838f4a40e035971d0f34b32c1"},{url:"manifest.webmanifest",revision:"b9bd1c040f779c7165c5d3fff7644134"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))}));
diff --git a/workbox-fa446783.js b/workbox-fa446783.js
new file mode 100644
index 00000000..8c012bc7
--- /dev/null
+++ b/workbox-fa446783.js
@@ -0,0 +1 @@
+define(["exports"],(function(t){"use strict";try{self["workbox:core:7.0.0"]&&_()}catch(t){}const e=(t,...e)=>{let s=t;return e.length>0&&(s+=` :: ${JSON.stringify(e)}`),s};class s extends Error{constructor(t,s){super(e(t,s)),this.name=t,this.details=s}}try{self["workbox:routing:7.0.0"]&&_()}catch(t){}const n=t=>t&&"object"==typeof t?t:{handle:t};class i{constructor(t,e,s="GET"){this.handler=n(e),this.match=t,this.method=s}setCatchHandler(t){this.catchHandler=n(t)}}class r extends i{constructor(t,e,s){super((({url:e})=>{const s=t.exec(e.href);if(s&&(e.origin===location.origin||0===s.index))return s.slice(1)}),e,s)}}class o{constructor(){this.t=new Map,this.i=new Map}get routes(){return this.t}addFetchListener(){self.addEventListener("fetch",(t=>{const{request:e}=t,s=this.handleRequest({request:e,event:t});s&&t.respondWith(s)}))}addCacheListener(){self.addEventListener("message",(t=>{if(t.data&&"CACHE_URLS"===t.data.type){const{payload:e}=t.data,s=Promise.all(e.urlsToCache.map((e=>{"string"==typeof e&&(e=[e]);const s=new Request(...e);return this.handleRequest({request:s,event:t})})));t.waitUntil(s),t.ports&&t.ports[0]&&s.then((()=>t.ports[0].postMessage(!0)))}}))}handleRequest({request:t,event:e}){const s=new URL(t.url,location.href);if(!s.protocol.startsWith("http"))return;const n=s.origin===location.origin,{params:i,route:r}=this.findMatchingRoute({event:e,request:t,sameOrigin:n,url:s});let o=r&&r.handler;const c=t.method;if(!o&&this.i.has(c)&&(o=this.i.get(c)),!o)return;let a;try{a=o.handle({url:s,request:t,event:e,params:i})}catch(t){a=Promise.reject(t)}const h=r&&r.catchHandler;return a instanceof Promise&&(this.o||h)&&(a=a.catch((async n=>{if(h)try{return await h.handle({url:s,request:t,event:e,params:i})}catch(t){t instanceof Error&&(n=t)}if(this.o)return this.o.handle({url:s,request:t,event:e});throw n}))),a}findMatchingRoute({url:t,sameOrigin:e,request:s,event:n}){const i=this.t.get(s.method)||[];for(const r of i){let i;const o=r.match({url:t,sameOrigin:e,request:s,event:n});if(o)return i=o,(Array.isArray(i)&&0===i.length||o.constructor===Object&&0===Object.keys(o).length||"boolean"==typeof o)&&(i=void 0),{route:r,params:i}}return{}}setDefaultHandler(t,e="GET"){this.i.set(e,n(t))}setCatchHandler(t){this.o=n(t)}registerRoute(t){this.t.has(t.method)||this.t.set(t.method,[]),this.t.get(t.method).push(t)}unregisterRoute(t){if(!this.t.has(t.method))throw new s("unregister-route-but-not-found-with-method",{method:t.method});const e=this.t.get(t.method).indexOf(t);if(!(e>-1))throw new s("unregister-route-route-not-registered");this.t.get(t.method).splice(e,1)}}let c;const a=()=>(c||(c=new o,c.addFetchListener(),c.addCacheListener()),c);function h(t,e,n){let o;if("string"==typeof t){const s=new URL(t,location.href);o=new i((({url:t})=>t.href===s.href),e,n)}else if(t instanceof RegExp)o=new r(t,e,n);else if("function"==typeof t)o=new i(t,e,n);else{if(!(t instanceof i))throw new s("unsupported-route-type",{moduleName:"workbox-routing",funcName:"registerRoute",paramName:"capture"});o=t}return a().registerRoute(o),o}const u={googleAnalytics:"googleAnalytics",precache:"precache-v2",prefix:"workbox",runtime:"runtime",suffix:"undefined"!=typeof registration?registration.scope:""},l=t=>[u.prefix,t,u.suffix].filter((t=>t&&t.length>0)).join("-"),f=t=>t||l(u.precache),w=t=>t||l(u.runtime);function d(t,e){const s=e();return t.waitUntil(s),s}try{self["workbox:precaching:7.0.0"]&&_()}catch(t){}function p(t){if(!t)throw new s("add-to-cache-list-unexpected-type",{entry:t});if("string"==typeof t){const e=new URL(t,location.href);return{cacheKey:e.href,url:e.href}}const{revision:e,url:n}=t;if(!n)throw new s("add-to-cache-list-unexpected-type",{entry:t});if(!e){const t=new URL(n,location.href);return{cacheKey:t.href,url:t.href}}const i=new URL(n,location.href),r=new URL(n,location.href);return i.searchParams.set("__WB_REVISION__",e),{cacheKey:i.href,url:r.href}}class y{constructor(){this.updatedURLs=[],this.notUpdatedURLs=[],this.handlerWillStart=async({request:t,state:e})=>{e&&(e.originalRequest=t)},this.cachedResponseWillBeUsed=async({event:t,state:e,cachedResponse:s})=>{if("install"===t.type&&e&&e.originalRequest&&e.originalRequest instanceof Request){const t=e.originalRequest.url;s?this.notUpdatedURLs.push(t):this.updatedURLs.push(t)}return s}}}class g{constructor({precacheController:t}){this.cacheKeyWillBeUsed=async({request:t,params:e})=>{const s=(null==e?void 0:e.cacheKey)||this.h.getCacheKeyForURL(t.url);return s?new Request(s,{headers:t.headers}):t},this.h=t}}let R;async function m(t,e){let n=null;if(t.url){n=new URL(t.url).origin}if(n!==self.location.origin)throw new s("cross-origin-copy-response",{origin:n});const i=t.clone(),r={headers:new Headers(i.headers),status:i.status,statusText:i.statusText},o=e?e(r):r,c=function(){if(void 0===R){const t=new Response("");if("body"in t)try{new Response(t.body),R=!0}catch(t){R=!1}R=!1}return R}()?i.body:await i.blob();return new Response(c,o)}function v(t,e){const s=new URL(t);for(const t of e)s.searchParams.delete(t);return s.href}class q{constructor(){this.promise=new Promise(((t,e)=>{this.resolve=t,this.reject=e}))}}const U=new Set;try{self["workbox:strategies:7.0.0"]&&_()}catch(t){}function L(t){return"string"==typeof t?new Request(t):t}class b{constructor(t,e){this.u={},Object.assign(this,e),this.event=e.event,this.l=t,this.p=new q,this.R=[],this.m=[...t.plugins],this.v=new Map;for(const t of this.m)this.v.set(t,{});this.event.waitUntil(this.p.promise)}async fetch(t){const{event:e}=this;let n=L(t);if("navigate"===n.mode&&e instanceof FetchEvent&&e.preloadResponse){const t=await e.preloadResponse;if(t)return t}const i=this.hasCallback("fetchDidFail")?n.clone():null;try{for(const t of this.iterateCallbacks("requestWillFetch"))n=await t({request:n.clone(),event:e})}catch(t){if(t instanceof Error)throw new s("plugin-error-request-will-fetch",{thrownErrorMessage:t.message})}const r=n.clone();try{let t;t=await fetch(n,"navigate"===n.mode?void 0:this.l.fetchOptions);for(const s of this.iterateCallbacks("fetchDidSucceed"))t=await s({event:e,request:r,response:t});return t}catch(t){throw i&&await this.runCallbacks("fetchDidFail",{error:t,event:e,originalRequest:i.clone(),request:r.clone()}),t}}async fetchAndCachePut(t){const e=await this.fetch(t),s=e.clone();return this.waitUntil(this.cachePut(t,s)),e}async cacheMatch(t){const e=L(t);let s;const{cacheName:n,matchOptions:i}=this.l,r=await this.getCacheKey(e,"read"),o=Object.assign(Object.assign({},i),{cacheName:n});s=await caches.match(r,o);for(const t of this.iterateCallbacks("cachedResponseWillBeUsed"))s=await t({cacheName:n,matchOptions:i,cachedResponse:s,request:r,event:this.event})||void 0;return s}async cachePut(t,e){const n=L(t);var i;await(i=0,new Promise((t=>setTimeout(t,i))));const r=await this.getCacheKey(n,"write");if(!e)throw new s("cache-put-with-no-response",{url:(o=r.url,new URL(String(o),location.href).href.replace(new RegExp(`^${location.origin}`),""))});var o;const c=await this.q(e);if(!c)return!1;const{cacheName:a,matchOptions:h}=this.l,u=await self.caches.open(a),l=this.hasCallback("cacheDidUpdate"),f=l?await async function(t,e,s,n){const i=v(e.url,s);if(e.url===i)return t.match(e,n);const r=Object.assign(Object.assign({},n),{ignoreSearch:!0}),o=await t.keys(e,r);for(const e of o)if(i===v(e.url,s))return t.match(e,n)}(u,r.clone(),["__WB_REVISION__"],h):null;try{await u.put(r,l?c.clone():c)}catch(t){if(t instanceof Error)throw"QuotaExceededError"===t.name&&await async function(){for(const t of U)await t()}(),t}for(const t of this.iterateCallbacks("cacheDidUpdate"))await t({cacheName:a,oldResponse:f,newResponse:c.clone(),request:r,event:this.event});return!0}async getCacheKey(t,e){const s=`${t.url} | ${e}`;if(!this.u[s]){let n=t;for(const t of this.iterateCallbacks("cacheKeyWillBeUsed"))n=L(await t({mode:e,request:n,event:this.event,params:this.params}));this.u[s]=n}return this.u[s]}hasCallback(t){for(const e of this.l.plugins)if(t in e)return!0;return!1}async runCallbacks(t,e){for(const s of this.iterateCallbacks(t))await s(e)}*iterateCallbacks(t){for(const e of this.l.plugins)if("function"==typeof e[t]){const s=this.v.get(e),n=n=>{const i=Object.assign(Object.assign({},n),{state:s});return e[t](i)};yield n}}waitUntil(t){return this.R.push(t),t}async doneWaiting(){let t;for(;t=this.R.shift();)await t}destroy(){this.p.resolve(null)}async q(t){let e=t,s=!1;for(const t of this.iterateCallbacks("cacheWillUpdate"))if(e=await t({request:this.request,response:e,event:this.event})||void 0,s=!0,!e)break;return s||e&&200!==e.status&&(e=void 0),e}}class C{constructor(t={}){this.cacheName=w(t.cacheName),this.plugins=t.plugins||[],this.fetchOptions=t.fetchOptions,this.matchOptions=t.matchOptions}handle(t){const[e]=this.handleAll(t);return e}handleAll(t){t instanceof FetchEvent&&(t={event:t,request:t.request});const e=t.event,s="string"==typeof t.request?new Request(t.request):t.request,n="params"in t?t.params:void 0,i=new b(this,{event:e,request:s,params:n}),r=this.U(i,s,e);return[r,this.L(r,i,s,e)]}async U(t,e,n){let i;await t.runCallbacks("handlerWillStart",{event:n,request:e});try{if(i=await this._(e,t),!i||"error"===i.type)throw new s("no-response",{url:e.url})}catch(s){if(s instanceof Error)for(const r of t.iterateCallbacks("handlerDidError"))if(i=await r({error:s,event:n,request:e}),i)break;if(!i)throw s}for(const s of t.iterateCallbacks("handlerWillRespond"))i=await s({event:n,request:e,response:i});return i}async L(t,e,s,n){let i,r;try{i=await t}catch(r){}try{await e.runCallbacks("handlerDidRespond",{event:n,request:s,response:i}),await e.doneWaiting()}catch(t){t instanceof Error&&(r=t)}if(await e.runCallbacks("handlerDidComplete",{event:n,request:s,response:i,error:r}),e.destroy(),r)throw r}}class E extends C{constructor(t={}){t.cacheName=f(t.cacheName),super(t),this.C=!1!==t.fallbackToNetwork,this.plugins.push(E.copyRedirectedCacheableResponsesPlugin)}async _(t,e){const s=await e.cacheMatch(t);return s||(e.event&&"install"===e.event.type?await this.O(t,e):await this.N(t,e))}async N(t,e){let n;const i=e.params||{};if(!this.C)throw new s("missing-precache-entry",{cacheName:this.cacheName,url:t.url});{const s=i.integrity,r=t.integrity,o=!r||r===s;n=await e.fetch(new Request(t,{integrity:"no-cors"!==t.mode?r||s:void 0})),s&&o&&"no-cors"!==t.mode&&(this.k(),await e.cachePut(t,n.clone()))}return n}async O(t,e){this.k();const n=await e.fetch(t);if(!await e.cachePut(t,n.clone()))throw new s("bad-precaching-response",{url:t.url,status:n.status});return n}k(){let t=null,e=0;for(const[s,n]of this.plugins.entries())n!==E.copyRedirectedCacheableResponsesPlugin&&(n===E.defaultPrecacheCacheabilityPlugin&&(t=s),n.cacheWillUpdate&&e++);0===e?this.plugins.push(E.defaultPrecacheCacheabilityPlugin):e>1&&null!==t&&this.plugins.splice(t,1)}}E.defaultPrecacheCacheabilityPlugin={cacheWillUpdate:async({response:t})=>!t||t.status>=400?null:t},E.copyRedirectedCacheableResponsesPlugin={cacheWillUpdate:async({response:t})=>t.redirected?await m(t):t};class O{constructor({cacheName:t,plugins:e=[],fallbackToNetwork:s=!0}={}){this.K=new Map,this.P=new Map,this.T=new Map,this.l=new E({cacheName:f(t),plugins:[...e,new g({precacheController:this})],fallbackToNetwork:s}),this.install=this.install.bind(this),this.activate=this.activate.bind(this)}get strategy(){return this.l}precache(t){this.addToCacheList(t),this.W||(self.addEventListener("install",this.install),self.addEventListener("activate",this.activate),this.W=!0)}addToCacheList(t){const e=[];for(const n of t){"string"==typeof n?e.push(n):n&&void 0===n.revision&&e.push(n.url);const{cacheKey:t,url:i}=p(n),r="string"!=typeof n&&n.revision?"reload":"default";if(this.K.has(i)&&this.K.get(i)!==t)throw new s("add-to-cache-list-conflicting-entries",{firstEntry:this.K.get(i),secondEntry:t});if("string"!=typeof n&&n.integrity){if(this.T.has(t)&&this.T.get(t)!==n.integrity)throw new s("add-to-cache-list-conflicting-integrities",{url:i});this.T.set(t,n.integrity)}if(this.K.set(i,t),this.P.set(i,r),e.length>0){const t=`Workbox is precaching URLs without revision info: ${e.join(", ")}\nThis is generally NOT safe. Learn more at https://bit.ly/wb-precache`;console.warn(t)}}}install(t){return d(t,(async()=>{const e=new y;this.strategy.plugins.push(e);for(const[e,s]of this.K){const n=this.T.get(s),i=this.P.get(e),r=new Request(e,{integrity:n,cache:i,credentials:"same-origin"});await Promise.all(this.strategy.handleAll({params:{cacheKey:s},request:r,event:t}))}const{updatedURLs:s,notUpdatedURLs:n}=e;return{updatedURLs:s,notUpdatedURLs:n}}))}activate(t){return d(t,(async()=>{const t=await self.caches.open(this.strategy.cacheName),e=await t.keys(),s=new Set(this.K.values()),n=[];for(const i of e)s.has(i.url)||(await t.delete(i),n.push(i.url));return{deletedURLs:n}}))}getURLsToCacheKeys(){return this.K}getCachedURLs(){return[...this.K.keys()]}getCacheKeyForURL(t){const e=new URL(t,location.href);return this.K.get(e.href)}getIntegrityForCacheKey(t){return this.T.get(t)}async matchPrecache(t){const e=t instanceof Request?t.url:t,s=this.getCacheKeyForURL(e);if(s){return(await self.caches.open(this.strategy.cacheName)).match(s)}}createHandlerBoundToURL(t){const e=this.getCacheKeyForURL(t);if(!e)throw new s("non-precached-url",{url:t});return s=>(s.request=new Request(t),s.params=Object.assign({cacheKey:e},s.params),this.strategy.handle(s))}}let x;const N=()=>(x||(x=new O),x);class k extends i{constructor(t,e){super((({request:s})=>{const n=t.getURLsToCacheKeys();for(const i of function*(t,{ignoreURLParametersMatching:e=[/^utm_/,/^fbclid$/],directoryIndex:s="index.html",cleanURLs:n=!0,urlManipulation:i}={}){const r=new URL(t,location.href);r.hash="",yield r.href;const o=function(t,e=[]){for(const s of[...t.searchParams.keys()])e.some((t=>t.test(s)))&&t.searchParams.delete(s);return t}(r,e);if(yield o.href,s&&o.pathname.endsWith("/")){const t=new URL(o.href);t.pathname+=s,yield t.href}if(n){const t=new URL(o.href);t.pathname+=".html",yield t.href}if(i){const t=i({url:r});for(const e of t)yield e.href}}(s.url,e)){const e=n.get(i);if(e){return{cacheKey:e,integrity:t.getIntegrityForCacheKey(e)}}}}),t.strategy)}}t.NavigationRoute=class extends i{constructor(t,{allowlist:e=[/./],denylist:s=[]}={}){super((t=>this.j(t)),t),this.M=e,this.S=s}j({url:t,request:e}){if(e&&"navigate"!==e.mode)return!1;const s=t.pathname+t.search;for(const t of this.S)if(t.test(s))return!1;return!!this.M.some((t=>t.test(s)))}},t.cleanupOutdatedCaches=function(){self.addEventListener("activate",(t=>{const e=f();t.waitUntil((async(t,e="-precache-")=>{const s=(await self.caches.keys()).filter((s=>s.includes(e)&&s.includes(self.registration.scope)&&s!==t));return await Promise.all(s.map((t=>self.caches.delete(t)))),s})(e).then((t=>{})))}))},t.clientsClaim=function(){self.addEventListener("activate",(()=>self.clients.claim()))},t.createHandlerBoundToURL=function(t){return N().createHandlerBoundToURL(t)},t.precacheAndRoute=function(t,e){!function(t){N().precache(t)}(t),function(t){const e=N();h(new k(e,t))}(e)},t.registerRoute=h}));